@shopify/shop-minis-react/eslint/rules/no-dynamic-asset-paths.cjs

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

/**
 * ESLint rule to warn about dynamic asset paths in template literals
 * @fileoverview Warns about template literals that may construct asset paths dynamically
 */

const {
  ASSET_EXTENSIONS,
  LOCAL_PATH_PATTERNS,
  REMOTE_PATTERNS,
  // eslint-disable-next-line import/extensions
} = require('./asset-path-patterns.cjs')

/**
 * Check if a template literal might contain an asset path but we can't be certain
 * Returns true only for UNCERTAIN cases (ends with asset extension but doesn't
 * start with a known local path pattern). Definite cases are handled by
 * no-hardcoded-asset-paths rule.
 * @param {object} node - The TemplateLiteral AST node
 * @returns {boolean}
 */
function isUncertainAssetTemplateLiteral(node) {
  const quasis = node.quasis
  if (quasis.length === 0) return false

  // Get the first static part to check if it starts with a local path
  const firstPart = quasis[0].value.raw || quasis[0].value.cooked || ''

  // Get the last static part to check if it ends with an asset extension
  const lastPart =
    quasis[quasis.length - 1].value.raw ||
    quasis[quasis.length - 1].value.cooked ||
    ''

  // Must end with an asset extension
  if (!ASSET_EXTENSIONS.test(lastPart)) return false

  // Check if it starts with a remote URL (only need to check first static part)
  if (REMOTE_PATTERNS.some(pattern => pattern.test(firstPart))) return false

  // If it starts with a local path pattern, it's a DEFINITE error (handled by other rule)
  // We only want to flag UNCERTAIN cases here
  if (LOCAL_PATH_PATTERNS.some(pattern => pattern.test(firstPart))) return false

  // Ends with asset extension but doesn't start with known local path = uncertain
  return true
}

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description:
        'Warn about template literals that may construct asset paths dynamically',
      category: 'Best Practices',
      recommended: true,
      url: 'https://vite.dev/guide/assets',
    },
    messages: {
      noDynamicAssetPath:
        'Template literal may contain a hardcoded asset path that will not work in production. Import assets instead of constructing paths dynamically. See: https://vite.dev/guide/assets',
    },
    schema: [],
  },

  create(context) {
    return {
      TemplateLiteral(node) {
        // Only flag uncertain cases (definite cases handled by no-hardcoded-asset-paths)
        if (isUncertainAssetTemplateLiteral(node)) {
          context.report({
            node,
            messageId: 'noDynamicAssetPath',
          })
        }
      },
    }
  },
}