@atlaskit/eslint-plugin-design-system 13.37.0 → 13.38.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.38.1
+
+### Patch Changes
+
+- [`414f1cb19fe79`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/414f1cb19fe79) -
+  Fix ensure-design-token-usage so Tag’s color prop is allowed when scope lookup fails by adding an
+  AST fallback for imports from @atlaskit/tag.
+
+## 13.38.0
+
+### Minor Changes
+
+- [`93ff2e6c56a27`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/93ff2e6c56a27) -
+  The `ensure-design-token-usage` ESLint rule now allows `color` prop with string values (e.g.,
+  `"red"`, `"blue"`) on Tag components imported from `@atlaskit/tag` or its sub-entrypoints (e.g.,
+  `@atlaskit/tag/simple-tag`, `@atlaskit/tag/removable-tag`)
+
 ## 13.37.0
 
 ### Minor Changes

package/dist/cjs/rules/ensure-design-token-usage/color.js

@@ -5,10 +5,103 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.lintTemplateIdentifierForColor = exports.lintObjectForColor = exports.lintJSXMemberForColor = exports.lintJSXLiteralForColor = exports.lintJSXIdentifierForColor = exports.getTokenSuggestion = exports.getElevationTokenExample = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _contextCompat = require("@atlaskit/eslint-utils/context-compat");
 var _getIsException = require("../utils/get-is-exception");
 var _isColor = require("../utils/is-color");
 var _isElevation = require("../utils/is-elevation");
 var _isNode = require("../utils/is-node");
+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; }
+/**
+ * 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 (!(0, _eslintCodemodUtils.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 && !(0, _eslintCodemodUtils.isNodeOfType)(currentNode, 'JSXOpeningElement')) {
+    currentNode = currentNode.parent;
+  }
+  if (!currentNode || !(0, _eslintCodemodUtils.isNodeOfType)(currentNode, 'JSXOpeningElement')) {
+    return false;
+  }
+
+  // Get the component name
+  var elementName = (0, _eslintCodemodUtils.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 = (0, _contextCompat.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 && (0, _eslintCodemodUtils.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 = (0, _contextCompat.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 (!(0, _eslintCodemodUtils.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;
+};
+
 // TemplateLiteral > Identifier
 var lintTemplateIdentifierForColor = exports.lintTemplateIdentifierForColor = function lintTemplateIdentifierForColor(node, context, config) {
   if (node.type !== 'Identifier') {
@@ -154,6 +247,11 @@ var lintJSXLiteralForColor = exports.lintJSXLiteralForColor = function lintJSXLi
     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;
@@ -214,7 +312,7 @@ var getTokenSuggestion = exports.getTokenSuggestion = function getTokenSuggestio
     shouldReturnSuggestion: !(0, _isNode.isDecendantOfGlobalToken)(node) && config.shouldEnforceFallbacks === false,
     desc: "Convert to token",
     fix: function fix(fixer) {
-      return fixer.replaceText((0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'MemberExpression') ? node.parent : node, "token('')");
+      return fixer.replaceText((0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'MemberExpression') ? node.parent : node, (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXAttribute') ? "{token('')}" : "token('')");
     }
   }, {
     shouldReturnSuggestion: !(0, _isNode.isDecendantOfGlobalToken)(node) && config.shouldEnforceFallbacks === true,

package/dist/es2019/rules/ensure-design-token-usage/color.js

@@ -1,8 +1,78 @@
 import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
+import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { getIsException } from '../utils/get-is-exception';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
 import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfPrimitive, isDecendantOfStyleBlock, isDecendantOfSvgElement } from '../utils/is-node';
+/**
+ * Check if the JSXAttribute is a 'color' prop on a Tag component imported from @atlaskit/tag
+ */
+const isTagComponentColorProp = (jsxAttributeNode, context) => {
+  var _variable$defs;
+  if (!isNodeOfType(jsxAttributeNode, 'JSXAttribute')) {
+    return false;
+  }
+
+  // Check if the attribute name is 'color'
+  const attributeName = typeof jsxAttributeNode.name.name === 'string' ? jsxAttributeNode.name.name : jsxAttributeNode.name.name.name;
+  if (attributeName !== 'color') {
+    return false;
+  }
+
+  // Find the JSXOpeningElement
+  let currentNode = jsxAttributeNode.parent;
+  while (currentNode && !isNodeOfType(currentNode, 'JSXOpeningElement')) {
+    currentNode = currentNode.parent;
+  }
+  if (!currentNode || !isNodeOfType(currentNode, 'JSXOpeningElement')) {
+    return false;
+  }
+
+  // Get the component name
+  const 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)
+  const scope = getScope(context, jsxAttributeNode);
+  const variable = scope.variables.find(v => v.name === elementName);
+  if (variable !== null && variable !== void 0 && (_variable$defs = variable.defs) !== null && _variable$defs !== void 0 && _variable$defs.length) {
+    for (const def of variable.defs) {
+      if (def.type === 'ImportBinding' && def.parent && isNodeOfType(def.parent, 'ImportDeclaration')) {
+        const importSource = def.parent.source.value;
+        if (typeof importSource === 'string' && importSource.match(/^@atlaskit\/tag(\/|$)/)) {
+          return true;
+        }
+      }
+    }
+  }
+
+  // Fallback: scan AST for ImportDeclaration (more reliable when scope differs e.g. in some monorepo/parser setups)
+  const sourceCode = getSourceCode(context);
+  const ast = sourceCode.ast;
+  if (ast !== null && ast !== void 0 && ast.body) {
+    for (const node of ast.body) {
+      var _node$source, _node$specifiers;
+      if (!isNodeOfType(node, 'ImportDeclaration')) {
+        continue;
+      }
+      const source = (_node$source = node.source) === null || _node$source === void 0 ? void 0 : _node$source.value;
+      if (typeof source !== 'string' || !source.match(/^@atlaskit\/tag(\/|$)/)) {
+        continue;
+      }
+      const hasMatchingImport = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.some(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;
+      }
+    }
+  }
+  return false;
+};
+
 // TemplateLiteral > Identifier
 export const lintTemplateIdentifierForColor = (node, context, config) => {
   if (node.type !== 'Identifier') {
@@ -149,6 +219,11 @@ export const lintJSXLiteralForColor = (node, context, config) => {
     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;
@@ -212,7 +287,7 @@ css({
 export const getTokenSuggestion = (node, reference, config) => [{
   shouldReturnSuggestion: !isDecendantOfGlobalToken(node) && config.shouldEnforceFallbacks === false,
   desc: `Convert to token`,
-  fix: fixer => fixer.replaceText(isNodeOfType(node.parent, 'MemberExpression') ? node.parent : node, `token('')`)
+  fix: fixer => fixer.replaceText(isNodeOfType(node.parent, 'MemberExpression') ? node.parent : node, isNodeOfType(node.parent, 'JSXAttribute') ? `{token('')}` : `token('')`)
 }, {
   shouldReturnSuggestion: !isDecendantOfGlobalToken(node) && config.shouldEnforceFallbacks === true,
   desc: `Convert to token with fallback`,

package/dist/esm/rules/ensure-design-token-usage/color.js

@@ -1,8 +1,101 @@
+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 { node as generate, isNodeOfType } from 'eslint-codemod-utils';
+import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { getIsException } from '../utils/get-is-exception';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
 import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfPrimitive, isDecendantOfStyleBlock, isDecendantOfSvgElement } from '../utils/is-node';
+/**
+ * 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;
+};
+
 // TemplateLiteral > Identifier
 export var lintTemplateIdentifierForColor = function lintTemplateIdentifierForColor(node, context, config) {
   if (node.type !== 'Identifier') {
@@ -148,6 +241,11 @@ export var lintJSXLiteralForColor = function lintJSXLiteralForColor(node, contex
     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;
@@ -208,7 +306,7 @@ export var getTokenSuggestion = function getTokenSuggestion(node, reference, con
     shouldReturnSuggestion: !isDecendantOfGlobalToken(node) && config.shouldEnforceFallbacks === false,
     desc: "Convert to token",
     fix: function fix(fixer) {
-      return fixer.replaceText(isNodeOfType(node.parent, 'MemberExpression') ? node.parent : node, "token('')");
+      return fixer.replaceText(isNodeOfType(node.parent, 'MemberExpression') ? node.parent : node, isNodeOfType(node.parent, 'JSXAttribute') ? "{token('')}" : "token('')");
     }
   }, {
     shouldReturnSuggestion: !isDecendantOfGlobalToken(node) && config.shouldEnforceFallbacks === true,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "13.37.0",
+	"version": "13.38.1",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {