@shopify/shop-minis-react/stylelint/plugin-no-font-imports.mjs

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

/**
 * ESLint rule wrapper for stylelint to prevent font imports in Shop Minis
 */
import stylelint from 'stylelint'

const ruleName = 'plugin/no-font-imports'
const messages = stylelint.utils.ruleMessages(ruleName, {
  rejected: 'Custom font imports are not allowed in Shop Minis',
})

const meta = {
  url: '',
}

/** @type {import('stylelint').Rule} */
const ruleFunction = primary => {
  return (root, result) => {
    const validOptions = stylelint.utils.validateOptions(result, ruleName, {
      actual: primary,
      possible: [true],
    })

    if (!validOptions) return

    root.walkAtRules('import', atRule => {
      const importPath = atRule.params

      // Check for common font-related URLs
      if (
        importPath.includes('fonts.googleapis.com') ||
        importPath.includes('fonts.gstatic.com') ||
        importPath.includes('use.typekit.net') ||
        importPath.includes('fast.fonts.net') ||
        /font/i.test(importPath)
      ) {
        stylelint.utils.report({
          message: messages.rejected,
          node: atRule,
          result,
          ruleName,
        })
      }
    })

    root.walkAtRules('font-face', atRule => {
      stylelint.utils.report({
        message: messages.rejected,
        node: atRule,
        result,
        ruleName,
      })
    })
  }
}

ruleFunction.ruleName = ruleName
ruleFunction.messages = messages
ruleFunction.meta = meta

export default stylelint.createPlugin(ruleName, ruleFunction)