@atlaskit/eslint-plugin-design-system/dist/esm/rules/ensure-design-token-usage/lint-jsx-literal-for-color.js

The essential plugin for use with the Atlassian Design System.

function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import { isNodeOfType } from 'eslint-codemod-utils';
import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
import { getIsException } from '../utils/get-is-exception';
import { includesHardCodedColor } from '../utils/includes-hard-coded-color';
import { isDecendantOfPrimitive } from '../utils/is-decendant-of-primitive';
import { isDecendantOfSvgElement } from '../utils/is-decendant-of-svg-element';
import { isHardCodedColor } from '../utils/is-hard-coded-color';
import { getTokenSuggestion } from './get-token-suggestion';
/**
 * Check if the JSXAttribute is a 'color' prop on a Tag component imported from @atlaskit/tag
 */
var isTagComponentColorProp = function isTagComponentColorProp(jsxAttributeNode, context) {
  var _variable$defs;
  if (!isNodeOfType(jsxAttributeNode, 'JSXAttribute')) {
    return false;
  }

  // Check if the attribute name is 'color'
  var attributeName = typeof jsxAttributeNode.name.name === 'string' ? jsxAttributeNode.name.name : jsxAttributeNode.name.name.name;
  if (attributeName !== 'color') {
    return false;
  }

  // Find the JSXOpeningElement
  var currentNode = jsxAttributeNode.parent;
  while (currentNode && !isNodeOfType(currentNode, 'JSXOpeningElement')) {
    currentNode = currentNode.parent;
  }
  if (!currentNode || !isNodeOfType(currentNode, 'JSXOpeningElement')) {
    return false;
  }

  // Get the component name
  var elementName = isNodeOfType(currentNode.name, 'JSXIdentifier') ? currentNode.name.name : null;
  if (!elementName) {
    return false;
  }

  // Check if the component is imported from @atlaskit/tag (scope-based resolution)
  var scope = getScope(context, jsxAttributeNode);
  var variable = scope.variables.find(function (v) {
    return v.name === elementName;
  });
  if (variable !== null && variable !== void 0 && (_variable$defs = variable.defs) !== null && _variable$defs !== void 0 && _variable$defs.length) {
    var _iterator = _createForOfIteratorHelper(variable.defs),
      _step;
    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var def = _step.value;
        if (def.type === 'ImportBinding' && def.parent && isNodeOfType(def.parent, 'ImportDeclaration')) {
          var importSource = def.parent.source.value;
          if (typeof importSource === 'string' && importSource.match(/^@atlaskit\/tag(\/|$)/)) {
            return true;
          }
        }
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }
  }

  // Fallback: scan AST for ImportDeclaration (more reliable when scope differs e.g. in some monorepo/parser setups)
  var sourceCode = getSourceCode(context);
  var ast = sourceCode.ast;
  if (ast !== null && ast !== void 0 && ast.body) {
    var _iterator2 = _createForOfIteratorHelper(ast.body),
      _step2;
    try {
      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
        var _node$source, _node$specifiers;
        var node = _step2.value;
        if (!isNodeOfType(node, 'ImportDeclaration')) {
          continue;
        }
        var source = (_node$source = node.source) === null || _node$source === void 0 ? void 0 : _node$source.value;
        if (typeof source !== 'string' || !source.match(/^@atlaskit\/tag(\/|$)/)) {
          continue;
        }
        var hasMatchingImport = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.some(function (s) {
          var _s$local, _s$local2;
          return s.type === 'ImportDefaultSpecifier' && ((_s$local = s.local) === null || _s$local === void 0 ? void 0 : _s$local.name) === elementName || s.type === 'ImportSpecifier' && ((_s$local2 = s.local) === null || _s$local2 === void 0 ? void 0 : _s$local2.name) === elementName;
        });
        if (hasMatchingImport) {
          return true;
        }
      }
    } catch (err) {
      _iterator2.e(err);
    } finally {
      _iterator2.f();
    }
  }
  return false;
};

// JSXAttribute > Literal
export var lintJSXLiteralForColor = function lintJSXLiteralForColor(node, context, config) {
  // To force the correct node type
  if (node.type !== 'Literal') {
    return;
  }

  // Changed this condition to properly handle both direct literals and expression containers
  var parent = isNodeOfType(node.parent, 'JSXExpressionContainer') ? node.parent.parent : node.parent;
  if (!isNodeOfType(parent, 'JSXAttribute')) {
    return;
  }
  if (isDecendantOfSvgElement(parent)) {
    return;
  }

  // Box backgroundColor prop accepts token names directly - don't lint against this
  if (isDecendantOfPrimitive(parent, context)) {
    return;
  }
  if (['alt', 'src', 'label', 'key', 'appearance'].includes(typeof parent.name.name === 'string' ? parent.name.name : parent.name.name.name)) {
    return;
  }
  var isException = getIsException(config.exceptions);
  if (isException(parent)) {
    return;
  }

  // Bypass Tag component color prop from @atlaskit/tag
  if (isTagComponentColorProp(parent, context)) {
    return;
  }

  // We only care about hex values
  if (typeof node.value !== 'string') {
    return;
  }
  if (isHardCodedColor(node.value) || includesHardCodedColor(node.value)) {
    context.report({
      messageId: 'hardCodedColor',
      node: node,
      suggest: getTokenSuggestion(node, node.value, config)
    });
    return;
  }
};