npm - @atlaskit/eslint-plugin-design-system - Versions diffs - 6.0.1 → 6.2.0 - Mend

@atlaskit/eslint-plugin-design-system 6.0.1 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
+## 6.2.0
+### Minor Changes
+- [`373b6b701ca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/373b6b701ca) - Linters will now error when deprecated theme color mixins are imported
+## 6.1.0
+### Minor Changes
+- [`99d5309f42b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/99d5309f42b) - The ensure-design-token-usage-spacing rule will now lint against inline style objects
 ## 6.0.1
 ### Patch Changes

package/configs/deprecated.json CHANGED Viewed

@@ -93,6 +93,30 @@
         "@atlaskit/item": {
             "message": "item is deprecated. Please use '@atlaskit/menu' instead."
         },
+        "@atlaskit/theme/elevation": {
+            "importSpecifiers": [
+                {
+                    "importName": "e100",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                },
+                {
+                    "importName": "e200",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                },
+                {
+                    "importName": "e300",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                },
+                {
+                    "importName": "e400",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                },
+                {
+                    "importName": "e500",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                }
+            ]
+        },
         "@atlaskit/theme/constants": {
             "importSpecifiers": [
                 {
@@ -113,6 +137,34 @@
                 }
             ]
         },
+        "@atlaskit/theme/colors": {
+            "importSpecifiers": [
+                { "importName": "background", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "backgroundActive", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "backgroundHover", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "backgroundOnLayer", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "text", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "textHover", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "textActive", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "subtleText", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "placeholderText", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "heading", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "subtleHeading", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "codeBlock", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "link", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "linkHover", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "linkActive", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "linkOutline", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "primary", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "blue", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "teal", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "purple", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "red", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "yellow", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "green", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "skeleton", "message": "Named color utils are deprecated in favor of design tokens." }
+            ]
+        },
         "@atlaskit/theme": {
             "importSpecifiers": [
                 {
@@ -130,6 +182,10 @@
                 {
                     "importName": "gridSize",
                     "message": "The gridSize mixin is deprecated. Please use space tokens via `@atlaskit/tokens` instead."
+                },
+                {
+                    "importName": "elevation",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
                 }
             ]
         },

package/dist/cjs/rules/ensure-design-token-usage/index.js CHANGED Viewed

@@ -55,6 +55,7 @@ var rule = (0, _createRule.createLintRule)({
     var config = context.options[0] || defaultConfig;
     var isException = (0, _getIsException.getIsException)(config.exceptions);
     return {
+      // For expressions within template literals (e.g. `color: ${red}`)
       'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
         if (node.type !== 'Identifier') {
           return;
@@ -87,6 +88,7 @@ var rule = (0, _createRule.createLintRule)({
           return;
         }
       },
+      // For css/styled template literals (not handling expressions) (e.g. css`color: red`)
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
         if (node.type !== 'TaggedTemplateExpression') {
           return;
@@ -113,6 +115,7 @@ var rule = (0, _createRule.createLintRule)({
           }
         });
       },
+      // For style objects with identifiers as values (expressions) (e.g. { color: red })
       'ObjectExpression > Property > Identifier, ObjectExpression > Property > MemberExpression': function ObjectExpressionPropertyIdentifierObjectExpressionPropertyMemberExpression(node) {
         if ((0, _isNode.isDecendantOfGlobalToken)(node)) {
           return;
@@ -160,6 +163,7 @@ var rule = (0, _createRule.createLintRule)({
           return;
         }
       },
+      // For style objects with literals as values (strings/numbers) (e.g. { color: "red" })
       'ObjectExpression > Property > Literal': function ObjectExpressionPropertyLiteral(node) {
         var _node$value;
         if (node.type !== 'Literal') {
@@ -180,6 +184,7 @@ var rule = (0, _createRule.createLintRule)({
           });
         }
       },
+      // For style objects with function calls as values (e.g. { color: red() })
       'ObjectExpression > Property > CallExpression': function ObjectExpressionPropertyCallExpression(node) {
         if (node.type !== 'CallExpression') {
           return;
@@ -202,6 +207,7 @@ var rule = (0, _createRule.createLintRule)({
           suggest: getTokenSuggestion(node, "".concat(node.callee.name, "()"), config)
         });
       },
+      // For inline JSX styles - literals (e.g. <Test color="red"/>)
       'JSXAttribute > Literal': function JSXAttributeLiteral(node) {
         if (node.type !== 'Literal') {
           return;
@@ -232,6 +238,7 @@ var rule = (0, _createRule.createLintRule)({
           return;
         }
       },
+      // For inline JSX styles - members (e.g. <Test color={color.red}/>)
       'JSXExpressionContainer > MemberExpression': function JSXExpressionContainerMemberExpression(node) {
         if (node.type !== 'MemberExpression') {
           return;
@@ -247,6 +254,7 @@ var rule = (0, _createRule.createLintRule)({
           });
         }
       },
+      // For inline JSX styles - identifiers (e.g. <Test color={red}/>)
       'JSXExpressionContainer > Identifier': function JSXExpressionContainerIdentifier(node) {
         if (node.type !== 'Identifier') {
           return;

package/dist/cjs/rules/ensure-design-token-usage-spacing/index.js CHANGED Viewed

@@ -69,25 +69,23 @@ var rule = (0, _createRule.createRule)({
       },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
-      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression, CallExpression[callee.object.name=styled2] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpressionCallExpressionCalleeObjectNameStyledObjectExpressionCallExpressionCalleeObjectNameStyled2ObjectExpression(parentNode) {
+      ObjectExpression: function ObjectExpression(parentNode) {
         if (!(0, _eslintCodemodUtils.isNodeOfType)(parentNode, 'ObjectExpression')) {
           return;
         }
+        // Return for nested objects - these get handled automatically so without returning we'd be doubling up
+        if (parentNode.parent.type === 'Property') {
+          return;
+        }
+        if (!(0, _isNode.isDecendantOfStyleBlock)(parentNode) && !(0, _isNode.isDecendantOfType)(parentNode, 'JSXExpressionContainer')) {
+          return;
+        }
         /**
          * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
          */
-        var fontSizeNode = parentNode.properties.find(function (node) {
-          if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
-            return;
-          }
-          if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
-            return;
-          }
-          return node.key.name === 'fontSize';
-        });
-        var fontSizeValue = (0, _eslintCodemodUtils.isNodeOfType)(fontSizeNode, 'Property') ? (0, _utils.getValue)(fontSizeNode.value, context) : null;
-        var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
+        var fontSize = (0, _utils.getFontSizeFromNode)(parentNode, context);
         function findObjectStyles(node) {
           if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
             return;
@@ -126,7 +124,7 @@ var rule = (0, _createRule.createRule)({
           var isFontFamily = /fontFamily/.test(propertyName);
           var value = (0, _utils.getValue)(node.value, context);
-          // value is either NaN or it can't be resolved eg, em, 100% etc...
+          // value is either NaN or it can't be resolved (e.g. em, 100% etc...)
           if (!(value && (0, _utils.isValidSpacingValue)(value, fontSize))) {
             return context.report({
               node: node,
@@ -136,13 +134,15 @@ var rule = (0, _createRule.createRule)({
               }
             });
           }
-          var values = Array.isArray(value) ? value : [value];
+          // The corresponding values for a single CSS property (e.g. padding: '8px 16px 2px' => [8, 16, 2])
+          var valuesForProperty = Array.isArray(value) ? value : [value];
           // value is a single value so we can apply a more robust approach to our fix
           // treat fontFamily as having one value
-          if (values.length === 1 || isFontFamily) {
-            var _values = (0, _slicedToArray2.default)(values, 1),
-              _value = _values[0];
+          if (valuesForProperty.length === 1 || isFontFamily) {
+            var _valuesForProperty = (0, _slicedToArray2.default)(valuesForProperty, 1),
+              _value = _valuesForProperty[0];
             // Do not report or suggest a token to replace 0 or auto
             if ((0, _utils.isZero)(_value) || (0, _utils.isAuto)(_value)) {
@@ -164,7 +164,7 @@ var rule = (0, _createRule.createRule)({
                 if (!replacementNode) {
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.insertTextBefore(node, "// TODO Delete this comment after verifying spacing token -> previous value `".concat((0, _eslintCodemodUtils.node)(node.value), "`\n").concat(' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0))), fixer.replaceText(node, (0, _eslintCodemodUtils.property)(_objectSpread(_objectSpread({}, node), {}, {
+                return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.insertTextBefore(node, "".concat(_utils.replacementComment, " `").concat((0, _eslintCodemodUtils.node)(node.value), "`\n").concat(' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0))), fixer.replaceText(node, (0, _eslintCodemodUtils.property)(_objectSpread(_objectSpread({}, node), {}, {
                   value: replacementNode
                 })).toString())]);
               }
@@ -178,7 +178,7 @@ var rule = (0, _createRule.createRule)({
            * @example
            * { padding: '8px 0px' }
            */
-          values.forEach(function (val) {
+          valuesForProperty.forEach(function (val) {
             var pixelValue = (0, _utils.emToPixels)(val, fontSize);
             // Do not report or suggest a token to replace 0 or auto
@@ -192,13 +192,13 @@ var rule = (0, _createRule.createRule)({
                 payload: "".concat(propertyName, ":").concat(pixelValue)
               },
               fix: function fix(fixer) {
-                var allResolvableValues = values.every(function (value) {
+                var allResolvableValues = valuesForProperty.every(function (value) {
                   return !Number.isNaN((0, _utils.emToPixels)(value, fontSize));
                 });
                 if (!allResolvableValues) {
                   return null;
                 }
-                var valuesWithTokenReplacement = values.filter(function (value) {
+                var valuesWithTokenReplacement = valuesForProperty.filter(function (value) {
                   return (0, _utils.findTokenNameByPropertyValue)(propertyName, value);
                 }).filter(function (value) {
                   return value !== 0;
@@ -219,11 +219,11 @@ var rule = (0, _createRule.createRule)({
                  * given they're part of the substring of the current node
                  */
                 var originalValues = (0, _utils.splitShorthandValues)(originalCssString.replace(/`|'|"/g, ''));
-                if (originalValues.length !== values.length) {
+                if (originalValues.length !== valuesForProperty.length) {
                   // we bail just in case original values don't correspond to the replaced values
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value, index) {
+                return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(valuesForProperty.map(function (value, index) {
                   if ((0, _utils.isZero)(value)) {
                     return originalValues[index];
                   }
@@ -319,11 +319,11 @@ var rule = (0, _createRule.createRule)({
             });
             // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
-            var replacementTokenNode = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
-            if (!replacementTokenNode) {
+            var replacementNode = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
+            if (!replacementNode) {
               return originalValue;
             }
-            var replacementToken = '${' + replacementTokenNode.toString() + '}';
+            var replacementToken = '${' + replacementNode.toString() + '}';
             replacedValuesPerProperty.push(isFontFamily ? numericOrNanValue.trim() : pxValue);
             return replacementToken;
           }).join(' ');
@@ -341,13 +341,13 @@ var rule = (0, _createRule.createRule)({
           return replacedCssLine;
         }, textForSource);
         if (completeSource !== textForSource) {
-          // means we found some replacement values, well give the option to fix them
+          // means we found some replacement values, we'll give the option to fix them
           var replacementComments = "".concat(allReplacedValues.map(function (replacedProperties) {
             var _replacedProperties = (0, _slicedToArray2.default)(replacedProperties, 1),
               propertyName = _replacedProperties[0];
             var replacedValues = replacedProperties.slice(1).join(' ');
-            return "// TODO Delete this comment after verifying spacing token -> previous value `".concat(propertyName, ": ").concat(replacedValues, "`");
+            return "".concat(_utils.replacementComment, " `").concat(propertyName, ": ").concat(replacedValues, "`");
           }).join('\n'), "\n");
           context.report({
             node: node,

package/dist/cjs/rules/ensure-design-token-usage-spacing/utils.js CHANGED Viewed

@@ -9,6 +9,7 @@ exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findIdentifierInParentScope = findIdentifierInParentScope;
 exports.findParentNodeForLine = void 0;
 exports.findTokenNameByPropertyValue = findTokenNameByPropertyValue;
+exports.getFontSizeFromNode = getFontSizeFromNode;
 exports.getFontSizeValueInScope = getFontSizeValueInScope;
 exports.getRawExpression = void 0;
 exports.getTokenNodeForValue = getTokenNodeForValue;
@@ -20,7 +21,7 @@ exports.isTokenValueString = isTokenValueString;
 exports.isZero = exports.isValidSpacingValue = void 0;
 exports.normaliseValue = normaliseValue;
 exports.processCssNode = processCssNode;
-exports.removePixelSuffix = void 0;
+exports.replacementComment = exports.removePixelSuffix = void 0;
 exports.shouldAnalyzeProperty = shouldAnalyzeProperty;
 exports.splitCssProperties = splitCssProperties;
 exports.splitShorthandValues = void 0;
@@ -29,6 +30,8 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
 var _shape = require("./shape");
 var _typography = require("./typography");
+var replacementComment = '// TODO Delete this comment after verifying space token -> previous value';
+exports.replacementComment = replacementComment;
 var 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'];
 var spacingValueToToken = Object.fromEntries(_tokensRaw.spacing.map(function (token) {
   return [token.value, token.name];
@@ -398,7 +401,7 @@ function processCssNode(node, context) {
   var cssProperties = splitCssProperties(cleanComments(combinedString));
   var unalteredCssProperties = splitCssProperties(cleanComments(rawString));
   if (cssProperties.length !== unalteredCssProperties.length) {
-    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    // this means something went wrong with the parsing, the original lines can't be reconciled with the processed lines
     return undefined;
   }
   return cssProperties.map(function (cssProperty, index) {
@@ -527,4 +530,18 @@ function getTokenReplacement(propertyName, value) {
   }
   var fallbackValue = normaliseValue(propertyName, value);
   return getTokenNodeForValue(propertyName, fallbackValue);
+}
+function getFontSizeFromNode(parentNode, context) {
+  var fontSizeNode = parentNode.properties.find(function (node) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+      return;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
+      return;
+    }
+    return node.key.name === 'fontSize';
+  });
+  var fontSizeValue = (0, _eslintCodemodUtils.isNodeOfType)(fontSizeNode, 'Property') ? getValue(fontSizeNode.value, context) : null;
+  var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
+  return fontSize;
 }

package/dist/cjs/rules/use-visually-hidden/index.js CHANGED Viewed

@@ -62,7 +62,7 @@ var rule = (0, _createRule.createLintRule)({
               });
               // this is either a styled usage OR mixin usage in a styled usage
             } else if (idNode.parent.type === 'CallExpression') {
-              if ((0, _isNode.isStyledObjectNode)(idNode.parent) || (0, _isNode.isStyledTemplateNode)(idNode.parent)) {
+              if ((0, _isNode.isCssInJsObjectNode)(idNode.parent) || (0, _isNode.isCssInJsTemplateNode)(idNode.parent)) {
                 context.report({
                   node: idNode.parent,
                   messageId: 'noDeprecatedUsage',
@@ -104,7 +104,7 @@ var rule = (0, _createRule.createLintRule)({
         if (!(node.callee.type === 'MemberExpression' || node.callee.type === 'Identifier')) {
           return;
         }
-        var isStyled = (0, _isNode.isStyledObjectNode)(node);
+        var isStyled = (0, _isNode.isCssInJsObjectNode)(node);
         if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name !== 'styled') {
           return;
         }

package/dist/cjs/rules/utils/is-node.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isStyledTemplateNode = exports.isStyledObjectNode = exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isChildOfType = void 0;
+exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isCssInJsTemplateNode = exports.isCssInJsObjectNode = exports.isCssInJsCallNode = exports.isChildOfType = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var isDecendantOfGlobalToken = function isDecendantOfGlobalToken(node) {
   if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'token' || node.callee.name === 'getTokenValue')) {
@@ -44,14 +44,19 @@ var isDecendantOfStyleJsxAttribute = function isDecendantOfStyleJsxAttribute(nod
   return false;
 };
 exports.isDecendantOfStyleJsxAttribute = isDecendantOfStyleJsxAttribute;
-var isStyledTemplateNode = function isStyledTemplateNode(node) {
+var cssInJsCallees = ['css', 'styled', 'styled2'];
+var isCssInJsTemplateNode = function isCssInJsTemplateNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
 };
-exports.isStyledTemplateNode = isStyledTemplateNode;
-var isStyledObjectNode = function isStyledObjectNode(node) {
-  return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name === 'styled';
+exports.isCssInJsTemplateNode = isCssInJsTemplateNode;
+var isCssInJsCallNode = function isCssInJsCallNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'Identifier' && cssInJsCallees.includes(node.callee.name);
 };
-exports.isStyledObjectNode = isStyledObjectNode;
+exports.isCssInJsCallNode = isCssInJsCallNode;
+var isCssInJsObjectNode = function isCssInJsObjectNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && cssInJsCallees.includes(node.callee.object.name);
+};
+exports.isCssInJsObjectNode = isCssInJsObjectNode;
 var isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
   if (node.type === 'VariableDeclarator') {
     if (node.id.type !== 'Identifier') {
@@ -80,10 +85,7 @@ var isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
       return varName.includes(el);
     });
   }
-  if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'css') {
-    return true;
-  }
-  if (isStyledTemplateNode(node)) {
+  if (isCssInJsCallNode(node) || isCssInJsObjectNode(node) || isCssInJsTemplateNode(node)) {
     return true;
   }
   if (node.type === 'TaggedTemplateExpression' && node.tag.type === 'Identifier' && node.tag.name === 'css') {

package/dist/cjs/version.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "6.0.1",
+	"version": "6.2.0",
 	"sideEffects": false
 }

package/dist/configs/deprecated.json CHANGED Viewed

@@ -93,6 +93,30 @@
         "@atlaskit/item": {
             "message": "item is deprecated. Please use '@atlaskit/menu' instead."
         },
+        "@atlaskit/theme/elevation": {
+            "importSpecifiers": [
+                {
+                    "importName": "e100",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                },
+                {
+                    "importName": "e200",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                },
+                {
+                    "importName": "e300",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                },
+                {
+                    "importName": "e400",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                },
+                {
+                    "importName": "e500",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
+                }
+            ]
+        },
         "@atlaskit/theme/constants": {
             "importSpecifiers": [
                 {
@@ -113,6 +137,34 @@
                 }
             ]
         },
+        "@atlaskit/theme/colors": {
+            "importSpecifiers": [
+                { "importName": "background", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "backgroundActive", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "backgroundHover", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "backgroundOnLayer", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "text", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "textHover", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "textActive", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "subtleText", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "placeholderText", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "heading", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "subtleHeading", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "codeBlock", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "link", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "linkHover", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "linkActive", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "linkOutline", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "primary", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "blue", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "teal", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "purple", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "red", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "yellow", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "green", "message": "Named color utils are deprecated in favor of design tokens." },
+                { "importName": "skeleton", "message": "Named color utils are deprecated in favor of design tokens." }
+            ]
+        },
         "@atlaskit/theme": {
             "importSpecifiers": [
                 {
@@ -130,6 +182,10 @@
                 {
                     "importName": "gridSize",
                     "message": "The gridSize mixin is deprecated. Please use space tokens via `@atlaskit/tokens` instead."
+                },
+                {
+                    "importName": "elevation",
+                    "message": "Elevation mixin is deprecated. Please use design tokens instead."
                 }
             ]
         },

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

@@ -40,6 +40,7 @@ const rule = createLintRule({
     const config = context.options[0] || defaultConfig;
     const isException = getIsException(config.exceptions);
     return {
+      // For expressions within template literals (e.g. `color: ${red}`)
       'TemplateLiteral > Identifier': node => {
         if (node.type !== 'Identifier') {
           return;
@@ -80,6 +81,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           return;
         }
       },
+      // For css/styled template literals (not handling expressions) (e.g. css`color: red`)
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': node => {
         if (node.type !== 'TaggedTemplateExpression') {
           return;
@@ -102,6 +104,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           }
         });
       },
+      // For style objects with identifiers as values (expressions) (e.g. { color: red })
       'ObjectExpression > Property > Identifier, ObjectExpression > Property > MemberExpression': node => {
         if (isDecendantOfGlobalToken(node)) {
           return;
@@ -149,6 +152,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           return;
         }
       },
+      // For style objects with literals as values (strings/numbers) (e.g. { color: "red" })
       'ObjectExpression > Property > Literal': node => {
         var _node$value;
         if (node.type !== 'Literal') {
@@ -169,6 +173,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           });
         }
       },
+      // For style objects with function calls as values (e.g. { color: red() })
       'ObjectExpression > Property > CallExpression': node => {
         if (node.type !== 'CallExpression') {
           return;
@@ -191,6 +196,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           suggest: getTokenSuggestion(node, `${node.callee.name}()`, config)
         });
       },
+      // For inline JSX styles - literals (e.g. <Test color="red"/>)
       'JSXAttribute > Literal': node => {
         if (node.type !== 'Literal') {
           return;
@@ -221,6 +227,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           return;
         }
       },
+      // For inline JSX styles - members (e.g. <Test color={color.red}/>)
       'JSXExpressionContainer > MemberExpression': node => {
         if (node.type !== 'MemberExpression') {
           return;
@@ -236,6 +243,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           });
         }
       },
+      // For inline JSX styles - identifiers (e.g. <Test color={red}/>)
       'JSXExpressionContainer > Identifier': node => {
         if (node.type !== 'Identifier') {
           return;

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

@@ -2,8 +2,8 @@
 import { isNodeOfType, node as nodeFn, property } from 'eslint-codemod-utils';
 import { createRule } from '../utils/create-rule';
-import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, findTokenNameByPropertyValue, getFontSizeValueInScope, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, shouldAnalyzeProperty, splitShorthandValues } from './utils';
+import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../utils/is-node';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, findTokenNameByPropertyValue, getFontSizeFromNode, getFontSizeValueInScope, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, replacementComment, shouldAnalyzeProperty, splitShorthandValues } from './utils';
 const rule = createRule({
   defaultOptions: [{
     addons: ['spacing'],
@@ -60,25 +60,23 @@ const rule = createRule({
       },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
-      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression, CallExpression[callee.object.name=styled2] > ObjectExpression': parentNode => {
+      ObjectExpression: parentNode => {
         if (!isNodeOfType(parentNode, 'ObjectExpression')) {
           return;
         }
+        // Return for nested objects - these get handled automatically so without returning we'd be doubling up
+        if (parentNode.parent.type === 'Property') {
+          return;
+        }
+        if (!isDecendantOfStyleBlock(parentNode) && !isDecendantOfType(parentNode, 'JSXExpressionContainer')) {
+          return;
+        }
         /**
          * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
          */
-        const fontSizeNode = parentNode.properties.find(node => {
-          if (!isNodeOfType(node, 'Property')) {
-            return;
-          }
-          if (!isNodeOfType(node.key, 'Identifier')) {
-            return;
-          }
-          return node.key.name === 'fontSize';
-        });
-        const fontSizeValue = isNodeOfType(fontSizeNode, 'Property') ? getValue(fontSizeNode.value, context) : null;
-        const fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
+        const fontSize = getFontSizeFromNode(parentNode, context);
         function findObjectStyles(node) {
           if (!isNodeOfType(node, 'Property')) {
             return;
@@ -117,7 +115,7 @@ const rule = createRule({
           const isFontFamily = /fontFamily/.test(propertyName);
           const value = getValue(node.value, context);
-          // value is either NaN or it can't be resolved eg, em, 100% etc...
+          // value is either NaN or it can't be resolved (e.g. em, 100% etc...)
           if (!(value && isValidSpacingValue(value, fontSize))) {
             return context.report({
               node,
@@ -127,12 +125,14 @@ const rule = createRule({
               }
             });
           }
-          const values = Array.isArray(value) ? value : [value];
+          // The corresponding values for a single CSS property (e.g. padding: '8px 16px 2px' => [8, 16, 2])
+          const valuesForProperty = Array.isArray(value) ? value : [value];
           // value is a single value so we can apply a more robust approach to our fix
           // treat fontFamily as having one value
-          if (values.length === 1 || isFontFamily) {
-            const [value] = values;
+          if (valuesForProperty.length === 1 || isFontFamily) {
+            const [value] = valuesForProperty;
             // Do not report or suggest a token to replace 0 or auto
             if (isZero(value) || isAuto(value)) {
@@ -154,7 +154,7 @@ const rule = createRule({
                 if (!replacementNode) {
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.insertTextBefore(node, `// TODO Delete this comment after verifying spacing token -> previous value \`${nodeFn(node.value)}\`\n${' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0)}`), fixer.replaceText(node, property({
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.insertTextBefore(node, `${replacementComment} \`${nodeFn(node.value)}\`\n${' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0)}`), fixer.replaceText(node, property({
                   ...node,
                   value: replacementNode
                 }).toString())]);
@@ -169,7 +169,7 @@ const rule = createRule({
            * @example
            * { padding: '8px 0px' }
            */
-          values.forEach(val => {
+          valuesForProperty.forEach(val => {
             const pixelValue = emToPixels(val, fontSize);
             // Do not report or suggest a token to replace 0 or auto
@@ -183,11 +183,11 @@ const rule = createRule({
                 payload: `${propertyName}:${pixelValue}`
               },
               fix: fixer => {
-                const allResolvableValues = values.every(value => !Number.isNaN(emToPixels(value, fontSize)));
+                const allResolvableValues = valuesForProperty.every(value => !Number.isNaN(emToPixels(value, fontSize)));
                 if (!allResolvableValues) {
                   return null;
                 }
-                const valuesWithTokenReplacement = values.filter(value => findTokenNameByPropertyValue(propertyName, value)).filter(value => value !== 0);
+                const valuesWithTokenReplacement = valuesForProperty.filter(value => findTokenNameByPropertyValue(propertyName, value)).filter(value => value !== 0);
                 if (valuesWithTokenReplacement.length === 0) {
                   // all values could be replaceable but that just means they're numeric
                   // if none of the values have token replacement we bail
@@ -204,11 +204,11 @@ const rule = createRule({
                  * given they're part of the substring of the current node
                  */
                 const originalValues = splitShorthandValues(originalCssString.replace(/`|'|"/g, ''));
-                if (originalValues.length !== values.length) {
+                if (originalValues.length !== valuesForProperty.length) {
                   // we bail just in case original values don't correspond to the replaced values
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, `\`${values.map((value, index) => {
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, `\`${valuesForProperty.map((value, index) => {
                   if (isZero(value)) {
                     return originalValues[index];
                   }
@@ -289,11 +289,11 @@ const rule = createRule({
             });
             // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
-            const replacementTokenNode = getTokenReplacement(propertyName, numericOrNanValue);
-            if (!replacementTokenNode) {
+            const replacementNode = getTokenReplacement(propertyName, numericOrNanValue);
+            if (!replacementNode) {
               return originalValue;
             }
-            const replacementToken = '${' + replacementTokenNode.toString() + '}';
+            const replacementToken = '${' + replacementNode.toString() + '}';
             replacedValuesPerProperty.push(isFontFamily ? numericOrNanValue.trim() : pxValue);
             return replacementToken;
           }).join(' ');
@@ -312,12 +312,12 @@ const rule = createRule({
           return replacedCssLine;
         }, textForSource);
         if (completeSource !== textForSource) {
-          // means we found some replacement values, well give the option to fix them
+          // means we found some replacement values, we'll give the option to fix them
           const replacementComments = `${allReplacedValues.map(replacedProperties => {
             const [propertyName] = replacedProperties;
             const replacedValues = replacedProperties.slice(1).join(' ');
-            return `// TODO Delete this comment after verifying spacing token -> previous value \`${propertyName}: ${replacedValues}\``;
+            return `${replacementComment} \`${propertyName}: ${replacedValues}\``;
           }).join('\n')}\n`;
           context.report({
             node,

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

@@ -2,6 +2,7 @@ import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaratio
 import { spacing as spacingScale } from '@atlaskit/tokens/tokens-raw';
 import { borderWidthValueToToken, isBorderRadius, isBorderSizeProperty, isShapeProperty, radiusValueToToken } from './shape';
 import { isCodeFontFamily, isFontFamily, isFontSize, isFontSizeSmall, isTypographyProperty, typographyValueToToken } from './typography';
+export const replacementComment = '// TODO Delete this comment after verifying space token -> previous value';
 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'];
 const spacingValueToToken = Object.fromEntries(spacingScale.map(token => [token.value, token.name]));
 export function findIdentifierInParentScope({
@@ -349,7 +350,7 @@ export function processCssNode(node, context) {
   const cssProperties = splitCssProperties(cleanComments(combinedString));
   const unalteredCssProperties = splitCssProperties(cleanComments(rawString));
   if (cssProperties.length !== unalteredCssProperties.length) {
-    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    // 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]]);
@@ -458,4 +459,18 @@ export function getTokenReplacement(propertyName, value) {
   }
   const fallbackValue = normaliseValue(propertyName, value);
   return getTokenNodeForValue(propertyName, fallbackValue);
+}
+export function getFontSizeFromNode(parentNode, context) {
+  const fontSizeNode = parentNode.properties.find(node => {
+    if (!isNodeOfType(node, 'Property')) {
+      return;
+    }
+    if (!isNodeOfType(node.key, 'Identifier')) {
+      return;
+    }
+    return node.key.name === 'fontSize';
+  });
+  const fontSizeValue = isNodeOfType(fontSizeNode, 'Property') ? getValue(fontSizeNode.value, context) : null;
+  const fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
+  return fontSize;
 }

package/dist/es2019/rules/use-visually-hidden/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { closestOfType, hasImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
-import { isStyledObjectNode, isStyledTemplateNode } from '../utils/is-node';
+import { isCssInJsObjectNode, isCssInJsTemplateNode } from '../utils/is-node';
 import fixJsx from './fix-jsx';
 import fixVanilla from './fix-vanilla';
 import { countMatchingKeyValues, getObjectLikeness, makeTemplateLiteralIntoEntries } from './utils';
@@ -48,7 +48,7 @@ const rule = createLintRule({
               });
               // this is either a styled usage OR mixin usage in a styled usage
             } else if (idNode.parent.type === 'CallExpression') {
-              if (isStyledObjectNode(idNode.parent) || isStyledTemplateNode(idNode.parent)) {
+              if (isCssInJsObjectNode(idNode.parent) || isCssInJsTemplateNode(idNode.parent)) {
                 context.report({
                   node: idNode.parent,
                   messageId: 'noDeprecatedUsage',
@@ -90,7 +90,7 @@ const rule = createLintRule({
         if (!(node.callee.type === 'MemberExpression' || node.callee.type === 'Identifier')) {
           return;
         }
-        const isStyled = isStyledObjectNode(node);
+        const isStyled = isCssInJsObjectNode(node);
         if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name !== 'styled') {
           return;
         }

package/dist/es2019/rules/utils/is-node.js CHANGED Viewed

@@ -33,8 +33,10 @@ export const isDecendantOfStyleJsxAttribute = node => {
   }
   return false;
 };
-export const isStyledTemplateNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
-export const isStyledObjectNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name === 'styled';
+const cssInJsCallees = ['css', 'styled', 'styled2'];
+export const isCssInJsTemplateNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
+export const isCssInJsCallNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'Identifier' && cssInJsCallees.includes(node.callee.name);
+export const isCssInJsObjectNode = node => (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && cssInJsCallees.includes(node.callee.object.name);
 export const isDecendantOfStyleBlock = node => {
   if (node.type === 'VariableDeclarator') {
     if (node.id.type !== 'Identifier') {
@@ -59,10 +61,7 @@ export const isDecendantOfStyleBlock = node => {
     const varName = node.id.name.toLowerCase();
     return ['style', 'css', 'theme'].some(el => varName.includes(el));
   }
-  if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'css') {
-    return true;
-  }
-  if (isStyledTemplateNode(node)) {
+  if (isCssInJsCallNode(node) || isCssInJsObjectNode(node) || isCssInJsTemplateNode(node)) {
     return true;
   }
   if (node.type === 'TaggedTemplateExpression' && node.tag.type === 'Identifier' && node.tag.name === 'css') {

package/dist/es2019/version.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "6.0.1",
+	"version": "6.2.0",
 	"sideEffects": false
 }

package/dist/esm/rules/ensure-design-token-usage/index.js CHANGED Viewed

@@ -49,6 +49,7 @@ var rule = createLintRule({
     var config = context.options[0] || defaultConfig;
     var isException = getIsException(config.exceptions);
     return {
+      // For expressions within template literals (e.g. `color: ${red}`)
       'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
         if (node.type !== 'Identifier') {
           return;
@@ -81,6 +82,7 @@ var rule = createLintRule({
           return;
         }
       },
+      // For css/styled template literals (not handling expressions) (e.g. css`color: red`)
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
         if (node.type !== 'TaggedTemplateExpression') {
           return;
@@ -107,6 +109,7 @@ var rule = createLintRule({
           }
         });
       },
+      // For style objects with identifiers as values (expressions) (e.g. { color: red })
       'ObjectExpression > Property > Identifier, ObjectExpression > Property > MemberExpression': function ObjectExpressionPropertyIdentifierObjectExpressionPropertyMemberExpression(node) {
         if (isDecendantOfGlobalToken(node)) {
           return;
@@ -154,6 +157,7 @@ var rule = createLintRule({
           return;
         }
       },
+      // For style objects with literals as values (strings/numbers) (e.g. { color: "red" })
       'ObjectExpression > Property > Literal': function ObjectExpressionPropertyLiteral(node) {
         var _node$value;
         if (node.type !== 'Literal') {
@@ -174,6 +178,7 @@ var rule = createLintRule({
           });
         }
       },
+      // For style objects with function calls as values (e.g. { color: red() })
       'ObjectExpression > Property > CallExpression': function ObjectExpressionPropertyCallExpression(node) {
         if (node.type !== 'CallExpression') {
           return;
@@ -196,6 +201,7 @@ var rule = createLintRule({
           suggest: getTokenSuggestion(node, "".concat(node.callee.name, "()"), config)
         });
       },
+      // For inline JSX styles - literals (e.g. <Test color="red"/>)
       'JSXAttribute > Literal': function JSXAttributeLiteral(node) {
         if (node.type !== 'Literal') {
           return;
@@ -226,6 +232,7 @@ var rule = createLintRule({
           return;
         }
       },
+      // For inline JSX styles - members (e.g. <Test color={color.red}/>)
       'JSXExpressionContainer > MemberExpression': function JSXExpressionContainerMemberExpression(node) {
         if (node.type !== 'MemberExpression') {
           return;
@@ -241,6 +248,7 @@ var rule = createLintRule({
           });
         }
       },
+      // For inline JSX styles - identifiers (e.g. <Test color={red}/>)
       'JSXExpressionContainer > Identifier': function JSXExpressionContainerIdentifier(node) {
         if (node.type !== 'Identifier') {
           return;

package/dist/esm/rules/ensure-design-token-usage-spacing/index.js CHANGED Viewed

@@ -7,8 +7,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { isNodeOfType, node as nodeFn, property } from 'eslint-codemod-utils';
 import { createRule } from '../utils/create-rule';
-import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, findTokenNameByPropertyValue, getFontSizeValueInScope, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, shouldAnalyzeProperty, splitShorthandValues } from './utils';
+import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../utils/is-node';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, findTokenNameByPropertyValue, getFontSizeFromNode, getFontSizeValueInScope, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, replacementComment, shouldAnalyzeProperty, splitShorthandValues } from './utils';
 var rule = createRule({
   defaultOptions: [{
     addons: ['spacing'],
@@ -64,25 +64,23 @@ var rule = createRule({
       },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
-      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression, CallExpression[callee.object.name=styled2] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpressionCallExpressionCalleeObjectNameStyledObjectExpressionCallExpressionCalleeObjectNameStyled2ObjectExpression(parentNode) {
+      ObjectExpression: function ObjectExpression(parentNode) {
         if (!isNodeOfType(parentNode, 'ObjectExpression')) {
           return;
         }
+        // Return for nested objects - these get handled automatically so without returning we'd be doubling up
+        if (parentNode.parent.type === 'Property') {
+          return;
+        }
+        if (!isDecendantOfStyleBlock(parentNode) && !isDecendantOfType(parentNode, 'JSXExpressionContainer')) {
+          return;
+        }
         /**
          * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
          */
-        var fontSizeNode = parentNode.properties.find(function (node) {
-          if (!isNodeOfType(node, 'Property')) {
-            return;
-          }
-          if (!isNodeOfType(node.key, 'Identifier')) {
-            return;
-          }
-          return node.key.name === 'fontSize';
-        });
-        var fontSizeValue = isNodeOfType(fontSizeNode, 'Property') ? getValue(fontSizeNode.value, context) : null;
-        var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
+        var fontSize = getFontSizeFromNode(parentNode, context);
         function findObjectStyles(node) {
           if (!isNodeOfType(node, 'Property')) {
             return;
@@ -121,7 +119,7 @@ var rule = createRule({
           var isFontFamily = /fontFamily/.test(propertyName);
           var value = getValue(node.value, context);
-          // value is either NaN or it can't be resolved eg, em, 100% etc...
+          // value is either NaN or it can't be resolved (e.g. em, 100% etc...)
           if (!(value && isValidSpacingValue(value, fontSize))) {
             return context.report({
               node: node,
@@ -131,13 +129,15 @@ var rule = createRule({
               }
             });
           }
-          var values = Array.isArray(value) ? value : [value];
+          // The corresponding values for a single CSS property (e.g. padding: '8px 16px 2px' => [8, 16, 2])
+          var valuesForProperty = Array.isArray(value) ? value : [value];
           // value is a single value so we can apply a more robust approach to our fix
           // treat fontFamily as having one value
-          if (values.length === 1 || isFontFamily) {
-            var _values = _slicedToArray(values, 1),
-              _value = _values[0];
+          if (valuesForProperty.length === 1 || isFontFamily) {
+            var _valuesForProperty = _slicedToArray(valuesForProperty, 1),
+              _value = _valuesForProperty[0];
             // Do not report or suggest a token to replace 0 or auto
             if (isZero(_value) || isAuto(_value)) {
@@ -159,7 +159,7 @@ var rule = createRule({
                 if (!replacementNode) {
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.insertTextBefore(node, "// TODO Delete this comment after verifying spacing token -> previous value `".concat(nodeFn(node.value), "`\n").concat(' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0))), fixer.replaceText(node, property(_objectSpread(_objectSpread({}, node), {}, {
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.insertTextBefore(node, "".concat(replacementComment, " `").concat(nodeFn(node.value), "`\n").concat(' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0))), fixer.replaceText(node, property(_objectSpread(_objectSpread({}, node), {}, {
                   value: replacementNode
                 })).toString())]);
               }
@@ -173,7 +173,7 @@ var rule = createRule({
            * @example
            * { padding: '8px 0px' }
            */
-          values.forEach(function (val) {
+          valuesForProperty.forEach(function (val) {
             var pixelValue = emToPixels(val, fontSize);
             // Do not report or suggest a token to replace 0 or auto
@@ -187,13 +187,13 @@ var rule = createRule({
                 payload: "".concat(propertyName, ":").concat(pixelValue)
               },
               fix: function fix(fixer) {
-                var allResolvableValues = values.every(function (value) {
+                var allResolvableValues = valuesForProperty.every(function (value) {
                   return !Number.isNaN(emToPixels(value, fontSize));
                 });
                 if (!allResolvableValues) {
                   return null;
                 }
-                var valuesWithTokenReplacement = values.filter(function (value) {
+                var valuesWithTokenReplacement = valuesForProperty.filter(function (value) {
                   return findTokenNameByPropertyValue(propertyName, value);
                 }).filter(function (value) {
                   return value !== 0;
@@ -214,11 +214,11 @@ var rule = createRule({
                  * given they're part of the substring of the current node
                  */
                 var originalValues = splitShorthandValues(originalCssString.replace(/`|'|"/g, ''));
-                if (originalValues.length !== values.length) {
+                if (originalValues.length !== valuesForProperty.length) {
                   // we bail just in case original values don't correspond to the replaced values
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value, index) {
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(valuesForProperty.map(function (value, index) {
                   if (isZero(value)) {
                     return originalValues[index];
                   }
@@ -314,11 +314,11 @@ var rule = createRule({
             });
             // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
-            var replacementTokenNode = getTokenReplacement(propertyName, numericOrNanValue);
-            if (!replacementTokenNode) {
+            var replacementNode = getTokenReplacement(propertyName, numericOrNanValue);
+            if (!replacementNode) {
               return originalValue;
             }
-            var replacementToken = '${' + replacementTokenNode.toString() + '}';
+            var replacementToken = '${' + replacementNode.toString() + '}';
             replacedValuesPerProperty.push(isFontFamily ? numericOrNanValue.trim() : pxValue);
             return replacementToken;
           }).join(' ');
@@ -336,13 +336,13 @@ var rule = createRule({
           return replacedCssLine;
         }, textForSource);
         if (completeSource !== textForSource) {
-          // means we found some replacement values, well give the option to fix them
+          // means we found some replacement values, we'll give the option to fix them
           var replacementComments = "".concat(allReplacedValues.map(function (replacedProperties) {
             var _replacedProperties = _slicedToArray(replacedProperties, 1),
               propertyName = _replacedProperties[0];
             var replacedValues = replacedProperties.slice(1).join(' ');
-            return "// TODO Delete this comment after verifying spacing token -> previous value `".concat(propertyName, ": ").concat(replacedValues, "`");
+            return "".concat(replacementComment, " `").concat(propertyName, ": ").concat(replacedValues, "`");
           }).join('\n'), "\n");
           context.report({
             node: node,

package/dist/esm/rules/ensure-design-token-usage-spacing/utils.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaratio
 import { spacing as spacingScale } from '@atlaskit/tokens/tokens-raw';
 import { borderWidthValueToToken, isBorderRadius, isBorderSizeProperty, isShapeProperty, radiusValueToToken } from './shape';
 import { isCodeFontFamily, isFontFamily, isFontSize, isFontSizeSmall, isTypographyProperty, typographyValueToToken } from './typography';
+export var replacementComment = '// TODO Delete this comment after verifying space token -> previous value';
 var 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'];
 var spacingValueToToken = Object.fromEntries(spacingScale.map(function (token) {
   return [token.value, token.name];
@@ -359,7 +360,7 @@ export function processCssNode(node, context) {
   var cssProperties = splitCssProperties(cleanComments(combinedString));
   var unalteredCssProperties = splitCssProperties(cleanComments(rawString));
   if (cssProperties.length !== unalteredCssProperties.length) {
-    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    // this means something went wrong with the parsing, the original lines can't be reconciled with the processed lines
     return undefined;
   }
   return cssProperties.map(function (cssProperty, index) {
@@ -488,4 +489,18 @@ export function getTokenReplacement(propertyName, value) {
   }
   var fallbackValue = normaliseValue(propertyName, value);
   return getTokenNodeForValue(propertyName, fallbackValue);
+}
+export function getFontSizeFromNode(parentNode, context) {
+  var fontSizeNode = parentNode.properties.find(function (node) {
+    if (!isNodeOfType(node, 'Property')) {
+      return;
+    }
+    if (!isNodeOfType(node.key, 'Identifier')) {
+      return;
+    }
+    return node.key.name === 'fontSize';
+  });
+  var fontSizeValue = isNodeOfType(fontSizeNode, 'Property') ? getValue(fontSizeNode.value, context) : null;
+  var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
+  return fontSize;
 }

package/dist/esm/rules/use-visually-hidden/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { closestOfType, hasImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
-import { isStyledObjectNode, isStyledTemplateNode } from '../utils/is-node';
+import { isCssInJsObjectNode, isCssInJsTemplateNode } from '../utils/is-node';
 import fixJsx from './fix-jsx';
 import fixVanilla from './fix-vanilla';
 import { countMatchingKeyValues, getObjectLikeness, makeTemplateLiteralIntoEntries } from './utils';
@@ -55,7 +55,7 @@ var rule = createLintRule({
               });
               // this is either a styled usage OR mixin usage in a styled usage
             } else if (idNode.parent.type === 'CallExpression') {
-              if (isStyledObjectNode(idNode.parent) || isStyledTemplateNode(idNode.parent)) {
+              if (isCssInJsObjectNode(idNode.parent) || isCssInJsTemplateNode(idNode.parent)) {
                 context.report({
                   node: idNode.parent,
                   messageId: 'noDeprecatedUsage',
@@ -97,7 +97,7 @@ var rule = createLintRule({
         if (!(node.callee.type === 'MemberExpression' || node.callee.type === 'Identifier')) {
           return;
         }
-        var isStyled = isStyledObjectNode(node);
+        var isStyled = isCssInJsObjectNode(node);
         if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name !== 'styled') {
           return;
         }

package/dist/esm/rules/utils/is-node.js CHANGED Viewed

@@ -34,11 +34,15 @@ export var isDecendantOfStyleJsxAttribute = function isDecendantOfStyleJsxAttrib
   }
   return false;
 };
-export var isStyledTemplateNode = function isStyledTemplateNode(node) {
+var cssInJsCallees = ['css', 'styled', 'styled2'];
+export var isCssInJsTemplateNode = function isCssInJsTemplateNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
 };
-export var isStyledObjectNode = function isStyledObjectNode(node) {
-  return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name === 'styled';
+export var isCssInJsCallNode = function isCssInJsCallNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'Identifier' && cssInJsCallees.includes(node.callee.name);
+};
+export var isCssInJsObjectNode = function isCssInJsObjectNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && cssInJsCallees.includes(node.callee.object.name);
 };
 export var isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
   if (node.type === 'VariableDeclarator') {
@@ -68,10 +72,7 @@ export var isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
       return varName.includes(el);
     });
   }
-  if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'css') {
-    return true;
-  }
-  if (isStyledTemplateNode(node)) {
+  if (isCssInJsCallNode(node) || isCssInJsObjectNode(node) || isCssInJsTemplateNode(node)) {
     return true;
   }
   if (node.type === 'TaggedTemplateExpression' && node.tag.type === 'Identifier' && node.tag.name === 'css') {

package/dist/esm/version.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "6.0.1",
+	"version": "6.2.0",
 	"sideEffects": false
 }

package/dist/types/rules/ensure-design-token-usage-spacing/utils.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { Rule, Scope } from 'eslint';
-import { EslintNode, TaggedTemplateExpression } from 'eslint-codemod-utils';
+import { EslintNode, ObjectExpression, TaggedTemplateExpression } from 'eslint-codemod-utils';
+export declare const replacementComment = "// TODO Delete this comment after verifying space token -> previous value";
 export type ProcessedCSSLines = [string, string][];
 export type TargetOptions = ('spacing' | 'typography' | 'shape')[];
 export declare function findIdentifierInParentScope({ scope, identifierName, }: {
@@ -106,3 +107,4 @@ export declare function findTokenNameByPropertyValue(propertyName: string, value
  * @param value the computed value e.g '8px' -> '8'
  */
 export declare function getTokenReplacement(propertyName: string, value: string): import("eslint-codemod-utils").StringableASTNode<import("estree").SimpleCallExpression> | undefined;
+export declare function getFontSizeFromNode(parentNode: ObjectExpression & Rule.NodeParentExtension, context: Rule.RuleContext): any;

package/dist/types/rules/utils/is-node.d.ts CHANGED Viewed

@@ -4,7 +4,8 @@ export declare const isDecendantOfGlobalToken: (node: EslintNode) => boolean;
 export declare const isDecendantOfType: (node: Rule.Node, type: Rule.Node['type'], skipNode?: boolean) => boolean;
 export declare const isPropertyKey: (node: Rule.Node) => boolean;
 export declare const isDecendantOfStyleJsxAttribute: (node: Rule.Node) => boolean;
-export declare const isStyledTemplateNode: (node?: Expression | null) => node is TaggedTemplateExpression;
-export declare const isStyledObjectNode: (node?: Expression | null) => node is CallExpression;
+export declare const isCssInJsTemplateNode: (node?: Expression | null) => node is TaggedTemplateExpression;
+export declare const isCssInJsCallNode: (node?: Expression | null) => node is CallExpression;
+export declare const isCssInJsObjectNode: (node?: Expression | null) => node is CallExpression;
 export declare const isDecendantOfStyleBlock: (node: Rule.Node) => boolean;
 export declare const isChildOfType: (node: Rule.Node, type: Rule.Node['type']) => boolean;

package/dist/types-ts4.5/rules/ensure-design-token-usage-spacing/utils.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { Rule, Scope } from 'eslint';
-import { EslintNode, TaggedTemplateExpression } from 'eslint-codemod-utils';
+import { EslintNode, ObjectExpression, TaggedTemplateExpression } from 'eslint-codemod-utils';
+export declare const replacementComment = "// TODO Delete this comment after verifying space token -> previous value";
 export type ProcessedCSSLines = [
     string,
     string
@@ -109,3 +110,4 @@ export declare function findTokenNameByPropertyValue(propertyName: string, value
  * @param value the computed value e.g '8px' -> '8'
  */
 export declare function getTokenReplacement(propertyName: string, value: string): import("eslint-codemod-utils").StringableASTNode<import("estree").SimpleCallExpression> | undefined;
+export declare function getFontSizeFromNode(parentNode: ObjectExpression & Rule.NodeParentExtension, context: Rule.RuleContext): any;

package/dist/types-ts4.5/rules/utils/is-node.d.ts CHANGED Viewed

@@ -4,7 +4,8 @@ export declare const isDecendantOfGlobalToken: (node: EslintNode) => boolean;
 export declare const isDecendantOfType: (node: Rule.Node, type: Rule.Node['type'], skipNode?: boolean) => boolean;
 export declare const isPropertyKey: (node: Rule.Node) => boolean;
 export declare const isDecendantOfStyleJsxAttribute: (node: Rule.Node) => boolean;
-export declare const isStyledTemplateNode: (node?: Expression | null) => node is TaggedTemplateExpression;
-export declare const isStyledObjectNode: (node?: Expression | null) => node is CallExpression;
+export declare const isCssInJsTemplateNode: (node?: Expression | null) => node is TaggedTemplateExpression;
+export declare const isCssInJsCallNode: (node?: Expression | null) => node is CallExpression;
+export declare const isCssInJsObjectNode: (node?: Expression | null) => node is CallExpression;
 export declare const isDecendantOfStyleBlock: (node: Rule.Node) => boolean;
 export declare const isChildOfType: (node: Rule.Node, type: Rule.Node['type']) => boolean;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "6.0.1",
+  "version": "6.2.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.8.0",
     "@babel/runtime": "^7.0.0",
     "@typescript-eslint/utils": "^5.48.1",
     "ajv": "^6.12.6",