@atlaskit/eslint-plugin-design-system 14.2.0 → 14.3.0

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

@@ -0,0 +1,129 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getScope } from '@atlaskit/eslint-utils/context-compat';
+import { findIdentifierInParentScope } from '../utils/find-in-parent';
+import { getValueFromShorthand } from './get-value-from-shorthand';
+import { getValueFromTemplateLiteralRaw } from './get-value-from-template-literal-raw';
+import { isBorderRadius } from './is-border-radius';
+import { removePixelSuffix } from './remove-pixel-suffix';
+const isGridSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'gridSize' || node.callee.name === 'getGridSize') &&
+// If there are arguments we know it's a custom gridSize function and cannot be certain what it returns
+node.arguments.length === 0;
+const isToken = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'token';
+const getRawExpressionForToken = (node, context) => {
+  const args = node.arguments;
+  const call = `\${token(${args.map(argNode => {
+    if (isNodeOfType(argNode, 'Literal')) {
+      return argNode.raw;
+    }
+    if (isNodeOfType(argNode, 'Identifier')) {
+      return argNode.name;
+    }
+    if (isNodeOfType(argNode, 'MemberExpression')) {
+      return getValue(argNode, context);
+    }
+  }).join(', ')})}`;
+  return call;
+};
+const isFontSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
+const isFontSizeSmall = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
+const getValueFromCallExpression = (node, context) => {
+  if (!isNodeOfType(node, 'CallExpression')) {
+    return null;
+  }
+  if (isGridSize(node)) {
+    return 8;
+  }
+  if (isBorderRadius(node)) {
+    return 3;
+  }
+  if (isFontSize(node)) {
+    return 14;
+  }
+  if (isFontSizeSmall(node)) {
+    return 11;
+  }
+  if (isToken(node)) {
+    return getRawExpressionForToken(node, context);
+  }
+  return null;
+};
+const getValueFromUnaryExpression = (node, context) => {
+  if (!isNodeOfType(node, 'UnaryExpression')) {
+    return null;
+  }
+  const value = getValue(node.argument, context);
+  if (!value) {
+    return null;
+  }
+
+  // eslint-disable-next-line no-eval
+  return eval(`${node.operator}(${value})`);
+};
+const getValueFromBinaryExpression = (node, context) => {
+  if (!isNodeOfType(node, 'BinaryExpression')) {
+    return null;
+  }
+  const {
+    left,
+    right,
+    operator
+  } = node;
+  const leftValue = getValue(left, context);
+  const rightValue = getValue(right, context);
+  const final = rightValue && leftValue ?
+  // eslint-disable-next-line no-eval
+  eval(`${leftValue}${operator}${rightValue}`) : null;
+  return final;
+};
+const getValueFromIdentifier = (node, context) => {
+  if (!isNodeOfType(node, 'Identifier')) {
+    return null;
+  }
+  if (node.name === 'gridSize') {
+    return 8;
+  }
+  const scope = getScope(context, node);
+  const variable = findIdentifierInParentScope({
+    scope,
+    identifierName: node.name
+  });
+  if (!variable) {
+    return null;
+  }
+  const definition = variable.defs[0];
+  if (isNodeOfType(definition.node, 'ImportSpecifier') && isNodeOfType(definition.node.parent, 'ImportDeclaration') && definition.node.parent.source.value === '@atlassian/jira-common-styles/src/main.tsx') {
+    return definition.node.imported.type === 'Identifier' && definition.node.imported.name === 'gridSize' ? 8 : null;
+  }
+  if (!isNodeOfType(definition.node, 'VariableDeclarator')) {
+    return null;
+  }
+  if (!definition.node.init) {
+    return null;
+  }
+  return getValue(definition.node.init, context);
+};
+const getValueFromTemplateLiteral = (node, context) => {
+  const value = getValueFromTemplateLiteralRaw(node, context);
+  return Array.isArray(value) ? value.map(removePixelSuffix) : value;
+};
+export const getValue = (node, context) => {
+  if (isNodeOfType(node, 'Literal')) {
+    return getValueFromShorthand(node.value);
+  }
+  if (isNodeOfType(node, 'BinaryExpression')) {
+    return getValueFromBinaryExpression(node, context);
+  }
+  if (isNodeOfType(node, 'UnaryExpression')) {
+    return getValueFromUnaryExpression(node, context);
+  }
+  if (isNodeOfType(node, 'CallExpression')) {
+    return getValueFromCallExpression(node, context);
+  }
+  if (isNodeOfType(node, 'Identifier')) {
+    return getValueFromIdentifier(node, context);
+  }
+  if (isNodeOfType(node, 'TemplateLiteral')) {
+    return getValueFromTemplateLiteral(node, context);
+  }
+  return null;
+};

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

@@ -1,31 +1,45 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { getImportSources } from '@atlaskit/eslint-utils/is-supported-import';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { errorBoundary } from '../utils/error-boundary';
-import { includesHardCodedColor } from '../utils/is-color';
+import { includesHardCodedColor } from '../utils/includes-hard-coded-color';
 import { isDecendantOfGlobalToken } from '../utils/is-decendant-of-global-token';
+import { isDecendantOfStyleBlock } from '../utils/is-decendant-of-style-block';
 import { isDecendantOfType } from '../utils/is-decendant-of-type';
 import { isDecendantOfXcssBlock } from '../utils/is-decendant-of-xcss-block';
-import { isDecendantOfStyleBlock } from '../utils/is-node';
-import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
 import { convertHyphenatedNameToCamelCase } from './convert-hyphenated-name-to-camel-case';
+import { emToPixels } from './em-to-pixels';
+import { getDomainsForProperty } from './get-domains-for-property';
+import { getFontSizeValueInScope } from './get-font-size-value-in-scope';
+import { getPropertyNodeFromParent } from './get-property-node-from-parent';
+import { getTokenReplacement } from './get-token-replacement';
+import { getValueForPropertyNode } from './get-value-for-property-node';
+import { getValueFromShorthand } from './get-value-from-shorthand';
+import { getValueFromTemplateLiteralRaw } from './get-value-from-template-literal-raw';
 import { includesTokenString } from './includes-token-string';
 import { insertTokensImport } from './insert-tokens-import';
 import { isAuto } from './is-auto';
+import { isCalc } from './is-calc';
 import { isTokenValueString } from './is-token-value-string';
+import { isValidSpacingValue } from './is-valid-spacing-value';
 import { isZero } from './is-zero';
+import { lintJSXIdentifierForColor } from './lint-jsx-identifier-for-color';
+import { lintJSXLiteralForColor } from './lint-jsx-literal-for-color';
+import { lintJSXMemberForColor } from './lint-jsx-member-for-color';
+import { lintObjectForColor } from './lint-object-for-color';
+import { lintTemplateIdentifierForColor } from './lint-template-identifier-for-color';
+import { processCssNode } from './process-css-node';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
 import { splitShorthandValues } from './split-shorthand-values';
-import { emToPixels, getDomainsForProperty, getFontSizeValueInScope, getPropertyNodeFromParent, getTokenReplacement, getValueForPropertyNode, getValueFromShorthand, getValueFromTemplateLiteralRaw, isCalc, isValidSpacingValue, processCssNode } from './utils';
 const defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
   shouldEnforceFallbacks: false,
   failSilently: false
 };
-const createWithConfig = initialConfig => context => {
+export const createWithConfig = initialConfig => context => {
   // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
   const userConfig = context.options[0];
   // merge configs
@@ -288,5 +302,4 @@ const rule = createLintRule({
   meta: ruleMeta,
   create: createWithConfig(defaultConfig)
 });
-export default rule;
-export { createWithConfig };
+export default rule;

package/dist/es2019/rules/ensure-design-token-usage/is-border-size-property.js

@@ -0,0 +1,4 @@
+const borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
+export function isBorderSizeProperty(propertyName) {
+  return borderSizeProperties.includes(propertyName);
+}

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

@@ -0,0 +1,9 @@
+const calcRegex = /(^calc)/;
+export const isCalc = value => {
+  if (typeof value === 'string') {
+    if (calcRegex.test(value)) {
+      return true;
+    }
+  }
+  return false;
+};

package/dist/es2019/rules/ensure-design-token-usage/is-radius-property.js

@@ -0,0 +1,4 @@
+const shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius', 'borderStartStartRadius', 'borderStartEndRadius', 'borderEndStartRadius', 'borderEndEndRadius'];
+export function isRadiusProperty(propertyName) {
+  return shapeProperties.includes(propertyName);
+}

package/dist/es2019/rules/ensure-design-token-usage/is-shape-property.js

@@ -0,0 +1,5 @@
+import { isBorderSizeProperty } from './is-border-size-property';
+import { isRadiusProperty } from './is-radius-property';
+export function isShapeProperty(propertyName) {
+  return isRadiusProperty(propertyName) || isBorderSizeProperty(propertyName);
+}

package/dist/es2019/rules/ensure-design-token-usage/is-spacing-property.js

@@ -0,0 +1,4 @@
+const properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap', 'top', 'left', 'right', 'bottom', 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd', 'outline-offset'];
+export const isSpacingProperty = propertyName => {
+  return properties.includes(propertyName);
+};

package/dist/es2019/rules/ensure-design-token-usage/is-valid-spacing-value.js

@@ -0,0 +1,20 @@
+const emRegex = /(.*\d+)em$/;
+const invalidSpacingUnitRegex = /(\d+rem$)|(vw$)|(vh$)/;
+export const isValidSpacingValue = (value, fontSize) => {
+  if (typeof value === 'string') {
+    if (invalidSpacingUnitRegex.test(value)) {
+      return false;
+    }
+  } else if (Array.isArray(value)) {
+    // could be array due to shorthand
+    for (const val in value) {
+      if (invalidSpacingUnitRegex.test(val)) {
+        return false;
+      }
+    }
+  }
+  if (emRegex.test(value) && typeof fontSize !== 'number') {
+    return false;
+  }
+  return true;
+};

package/dist/es2019/rules/ensure-design-token-usage/lint-jsx-identifier-for-color.js

@@ -0,0 +1,23 @@
+import { getIsException } from '../utils/get-is-exception';
+import { includesHardCodedColor } from '../utils/includes-hard-coded-color';
+import { isLegacyColor } from '../utils/is-legacy-color';
+import { getTokenSuggestion } from './get-token-suggestion';
+// JSXExpressionContainer > Identifier
+export const lintJSXIdentifierForColor = (node, context, config) => {
+  // To force the correct node type
+  if (node.type !== 'Identifier') {
+    return;
+  }
+  const isException = getIsException(config.exceptions);
+  if (isException(node)) {
+    return;
+  }
+  if (isLegacyColor(node.name) || includesHardCodedColor(node.name)) {
+    context.report({
+      messageId: 'hardCodedColor',
+      node,
+      suggest: getTokenSuggestion(node, node.name, config)
+    });
+    return;
+  }
+};

package/dist/es2019/rules/ensure-design-token-usage/lint-jsx-literal-for-color.js

@@ -0,0 +1,123 @@
+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
+ */
+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;
+};
+
+// JSXAttribute > Literal
+export const 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
+  const 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;
+  }
+  const 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,
+      suggest: getTokenSuggestion(node, node.value, config)
+    });
+    return;
+  }
+};

package/dist/es2019/rules/ensure-design-token-usage/lint-jsx-member-for-color.js

@@ -0,0 +1,22 @@
+import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
+import { isLegacyColor } from '../utils/is-legacy-color';
+import { isLegacyNamedColor } from '../utils/is-legacy-named-color';
+import { getTokenSuggestion } from './get-token-suggestion';
+// JSXExpressionContainer > MemberExpression
+export const lintJSXMemberForColor = (node, context, config) => {
+  // To force the correct node type
+  if (node.type !== 'MemberExpression') {
+    return;
+  }
+  if (!isNodeOfType(node.property, 'Identifier')) {
+    return;
+  }
+  if (isLegacyColor(node.property.name) || isNodeOfType(node.object, 'Identifier') && node.object.name === 'colors' && isLegacyNamedColor(node.property.name)) {
+    context.report({
+      messageId: 'hardCodedColor',
+      node,
+      suggest: getTokenSuggestion(node, generate(node).toString(), config)
+    });
+    return;
+  }
+};

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

@@ -0,0 +1,88 @@
+import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
+import { getIsException } from '../utils/get-is-exception';
+import { includesHardCodedColor } from '../utils/includes-hard-coded-color';
+import { isHardCodedColor } from '../utils/is-hard-coded-color';
+import { isLegacyColor } from '../utils/is-legacy-color';
+import { isLegacyNamedColor } from '../utils/is-legacy-named-color';
+import { getTokenSuggestion } from './get-token-suggestion';
+// ObjectExpression
+export const lintObjectForColor = (propertyNode, context, config) => {
+  var _identifierNode;
+  let propertyKey = '';
+  if (propertyNode.key.type === 'Identifier') {
+    propertyKey = propertyNode.key.name.toString();
+  }
+  const node = propertyNode.value;
+
+  // ObjectExpression > Property > Literal
+  if (node.type === 'Literal') {
+    var _node$value;
+    const nodeVal = ((_node$value = node.value) === null || _node$value === void 0 ? void 0 : _node$value.toString()) || '';
+    const isException = getIsException(config.exceptions);
+    if ((isHardCodedColor(nodeVal) || includesHardCodedColor(nodeVal)) && !isException(node)) {
+      context.report({
+        messageId: 'hardCodedColor',
+        node,
+        suggest: getTokenSuggestion(node, `'${nodeVal}'`, config)
+      });
+    }
+    return;
+  }
+  const isException = getIsException(config.exceptions);
+
+  // ObjectExpression > Property > CallExpression
+  if (node.type === 'CallExpression') {
+    if (!isNodeOfType(node.callee, 'Identifier')) {
+      return;
+    }
+    if (!isLegacyNamedColor(node.callee.name) || isException(node)) {
+      return;
+    }
+    context.report({
+      messageId: 'hardCodedColor',
+      node: node,
+      suggest: getTokenSuggestion(node, `${node.callee.name}()`, config)
+    });
+    return;
+  }
+
+  // Template literals are already handled by 'TemplateLiteral > Identifier' in the main file
+  if (node.type === 'TemplateLiteral') {
+    return;
+  }
+  let identifierNode = null;
+
+  // ObjectExpression > Property > MemberExpression
+  if (node.type === 'MemberExpression') {
+    if (node.property.type !== 'Identifier') {
+      context.report({
+        messageId: 'hardCodedColor',
+        node: node,
+        suggest: getTokenSuggestion(node, generate(node).toString(), config)
+      });
+      return;
+    }
+    identifierNode = node.property;
+  }
+  if (node.type === 'Identifier') {
+    // identifier is the key and not the value
+    if (node.name === propertyKey) {
+      return;
+    }
+    identifierNode = node;
+  }
+
+  // ObjectExpression > Property > MemberExpression > Identifier
+  // ObjectExpression > Property > Identifier
+  if (((_identifierNode = identifierNode) === null || _identifierNode === void 0 ? void 0 : _identifierNode.type) === 'Identifier') {
+    if ((isHardCodedColor(identifierNode.name) || includesHardCodedColor(identifierNode.name) || isLegacyColor(identifierNode.name)) && !isException(identifierNode)) {
+      context.report({
+        messageId: 'hardCodedColor',
+        node: identifierNode,
+        suggest: getTokenSuggestion(identifierNode, identifierNode.name, config)
+      });
+      return;
+    }
+  }
+  return;
+};

package/dist/es2019/rules/ensure-design-token-usage/lint-template-identifier-for-color.js

@@ -0,0 +1,46 @@
+import { getIsException } from '../utils/get-is-exception';
+import { isChildOfType } from '../utils/is-child-of-type';
+import { isDecendantOfGlobalToken } from '../utils/is-decendant-of-global-token';
+import { isDecendantOfStyleBlock } from '../utils/is-decendant-of-style-block';
+import { isLegacyElevation } from '../utils/is-elevation';
+import { isLegacyColor } from '../utils/is-legacy-color';
+import { isLegacyNamedColor } from '../utils/is-legacy-named-color';
+import { getElevationTokenExample } from './get-elevation-token-example';
+import { getTokenSuggestion } from './get-token-suggestion';
+const getNodeColumn = node => node.loc ? node.loc.start.column : 0;
+
+// TemplateLiteral > Identifier
+export const lintTemplateIdentifierForColor = (node, context, config) => {
+  if (node.type !== 'Identifier') {
+    return;
+  }
+  if (isDecendantOfGlobalToken(node) || !isDecendantOfStyleBlock(node)) {
+    return;
+  }
+  const elevation = isLegacyElevation(node.name);
+  if (elevation) {
+    context.report({
+      messageId: 'legacyElevation',
+      node,
+      data: {
+        example: getElevationTokenExample(elevation)
+      },
+      fix: fixer => {
+        if (isChildOfType(node, 'TemplateLiteral') && node.range) {
+          return fixer.replaceTextRange([node.range[0] - 2, node.range[1] + 1], `background-color: \${token('${elevation.background}')};
+${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}')}`);
+        }
+        return null;
+      }
+    });
+  }
+  const isException = getIsException(config.exceptions);
+  if (isLegacyColor(node.name) || isLegacyNamedColor(node.name) && !isException(node)) {
+    context.report({
+      messageId: 'hardCodedColor',
+      node,
+      suggest: getTokenSuggestion(node, node.name, config)
+    });
+    return;
+  }
+};

package/dist/es2019/rules/ensure-design-token-usage/process-css-node.js

@@ -0,0 +1,31 @@
+import { cleanComments } from './clean-comments';
+import { getRawExpression } from './get-raw-expression';
+import { getValue } from './get-value';
+import { splitCssProperties } from './split-css-properties';
+/**
+ * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
+ * Each element of the array is a tuple `[string, string]`,
+ * where the first element is the processed css line with computed values
+ * and the second element of the tuple is the original css line from source.
+ * @param node TaggedTemplateExpression node.
+ * @param context Rule.RuleContext.
+ * @example
+ * ```
+ * `[['padding: 8', 'padding: ${gridSize()}'], ['margin: 6', 'margin: 6px' ]]`
+ * ```
+ */
+export function processCssNode(node, context) {
+  const combinedString = node.quasi.quasis.map((q, i) => {
+    return `${q.value.raw}${node.quasi.expressions[i] ? getValue(node.quasi.expressions[i], context) : ''}`;
+  }).join('');
+  const rawString = node.quasi.quasis.map((q, i) => {
+    return `${q.value.raw}${node.quasi.expressions[i] ? getRawExpression(node.quasi.expressions[i], context) ? `\${${getRawExpression(node.quasi.expressions[i], context)}}` : null : ''}`;
+  }).join('');
+  const cssProperties = splitCssProperties(cleanComments(combinedString));
+  const unalteredCssProperties = splitCssProperties(cleanComments(rawString));
+  if (cssProperties.length !== unalteredCssProperties.length) {
+    // this means something went wrong with the parsing, the original lines can't be reconciled with the processed lines
+    return undefined;
+  }
+  return cssProperties.map((cssProperty, index) => [cssProperty, unalteredCssProperties[index]]);
+}

package/dist/es2019/rules/ensure-design-token-usage/remove-pixel-suffix.js

@@ -0,0 +1,8 @@
+import { isCalc } from './is-calc';
+const percentageOrEmOrAuto = /(%$)|(\d+em$)|(auto$)/;
+export const removePixelSuffix = value => {
+  if (typeof value === 'string' && (percentageOrEmOrAuto.test(value) || isCalc(value))) {
+    return value;
+  }
+  return Number(typeof value === 'string' ? value.replace('px', '') : value);
+};

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

@@ -1,10 +1,16 @@
 import { isNodeOfType, property } from 'eslint-codemod-utils';
+import { emToPixels } from './em-to-pixels';
+import { findTokenNameByPropertyValue } from './find-token-name-by-property-value';
 import { getRawExpression } from './get-raw-expression';
+import { getTokenNodeForValue } from './get-token-node-for-value';
+import { getTokenReplacement } from './get-token-replacement';
+import { getValue } from './get-value';
 import { insertTokensImport } from './insert-tokens-import';
 import { isAuto } from './is-auto';
+import { isCalc } from './is-calc';
+import { isValidSpacingValue } from './is-valid-spacing-value';
 import { isZero } from './is-zero';
 import { splitShorthandValues } from './split-shorthand-values';
-import { emToPixels, findTokenNameByPropertyValue, getTokenNodeForValue, getTokenReplacement, getValue, isCalc, isValidSpacingValue } from './utils';
 export const lintObjectForSpacing = (node, context, ruleConfig, fontSize, tokenNode) => {
   if (isNodeOfType(node.value, 'Literal') && !isValidSpacingValue(node.value.value, fontSize)) {
     context.report({

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

@@ -1,5 +1,5 @@
 import ruleMeta from '../ensure-design-token-usage/rule-meta';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 const rule = createLintRule({
   meta: {
     ...ruleMeta,

package/dist/es2019/rules/ensure-icon-color/index.js

@@ -1,6 +1,6 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createIsFromImportSourceFor } from '../../common/is-from-import-source';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { errorBoundary } from '../utils/error-boundary';
 
 /**

package/dist/es2019/rules/ensure-proper-xcss-usage/index.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { errorBoundary } from '../utils/error-boundary';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/icon-label/index.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { findProp } from '../utils/find-prop';
 const elements = ['AkButton', 'AKButton', 'Button', 'IconButton', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
 const elementsIconProps = ['iconBefore', 'iconAfter', 'icon'];

package/dist/es2019/rules/lozenge-badge-tag-labelling-system-migration/index.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 const rule = createLintRule({
   meta: {
     name: 'lozenge-badge-tag-labelling-system-migration',