@atlaskit/eslint-plugin-design-system 9.2.1 → 9.2.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.2.3
+
+### Patch Changes
+
+- [#86352](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86352) [`c32535ff8734`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c32535ff8734) - Fixed an issue where the `ensure-design-token-usage` rule (and by extension `ensure-design-token-usage/preview` rule) would report on color properties even if `"color"` was not provided in the domains config.
+
+## 9.2.2
+
+### Patch Changes
+
+- [#86321](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86321) [`b353b26e22b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b353b26e22b6) - Improvements for `no-*-tagged-template-expression` rules:
+
+  - Fixed a bug that could produce syntax errors when mixins were present in nested selectors.
+  - Disabled autofixing styled components usages with mixins in nested selectors, as there is no general equivalent.
+  - Disabled autofixing function interpolations with non-expression bodies.
+
 ## 9.2.1
 
 ### Patch Changes

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

@@ -48,7 +48,10 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
       // For expressions within template literals (e.g. `color: ${red}`) - color only
       'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
         return (0, _errorBoundary.errorBoundary)(function () {
-          return (0, _color.lintTemplateIdentifierForColor)(node, context, config);
+          if (config.domains.includes('color')) {
+            return (0, _color.lintTemplateIdentifierForColor)(node, context, config);
+          }
+          return;
         }, {
           config: config
         });
@@ -281,7 +284,10 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
       // For inline JSX styles - literals (e.g. <Test color="red"/>) - color only
       'JSXAttribute > Literal': function JSXAttributeLiteral(node) {
         return (0, _errorBoundary.errorBoundary)(function () {
-          return (0, _color.lintJSXLiteralForColor)(node, context, config);
+          if (config.domains.includes('color')) {
+            return (0, _color.lintJSXLiteralForColor)(node, context, config);
+          }
+          return;
         }, {
           config: config
         });
@@ -289,7 +295,10 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
       // For inline JSX styles - members (e.g. <Test color={color.red}/>) - color only
       'JSXExpressionContainer > MemberExpression': function JSXExpressionContainerMemberExpression(node) {
         return (0, _errorBoundary.errorBoundary)(function () {
-          return (0, _color.lintJSXMemberForColor)(node, context, config);
+          if (config.domains.includes('color')) {
+            return (0, _color.lintJSXMemberForColor)(node, context, config);
+          }
+          return;
         }, {
           config: config
         });
@@ -297,7 +306,10 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
       // For inline JSX styles - identifiers (e.g. <Test color={red}/>) - color only
       'JSXExpressionContainer > Identifier': function JSXExpressionContainerIdentifier(node) {
         return (0, _errorBoundary.errorBoundary)(function () {
-          return (0, _color.lintJSXIdentifierForColor)(node, context, config);
+          if (config.domains.includes('color')) {
+            return (0, _color.lintJSXIdentifierForColor)(node, context, config);
+          }
+          return;
         }, {
           config: config
         });

package/dist/cjs/rules/utils/create-no-tagged-template-expression-rule/generate.js

@@ -83,7 +83,7 @@ var generateBlock = function generateBlock(blocks, offset, level) {
 };
 var generateArguments = function generateArguments(args, offset, level) {
   var chars = '';
-  if (level > 1 && args.length > 1) {
+  if (level >= 1 && args.length > 1) {
     chars += '[';
   }
   var _iterator2 = _createForOfIteratorHelper(args.entries()),
@@ -124,7 +124,7 @@ var generateArguments = function generateArguments(args, offset, level) {
   } finally {
     _iterator2.f();
   }
-  if (level > 1 && args.length > 1) {
+  if (level >= 1 && args.length > 1) {
     chars += '\n';
     chars += indent(offset, level);
     chars += ']';

package/dist/cjs/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.noTaggedTemplateExpressionRuleSchema = exports.createNoTaggedTemplateExpressionRule = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _esquery = _interopRequireDefault(require("esquery"));
 var _isSupportedImport = require("../is-supported-import");
 var _generate = require("./generate");
 var _getTaggedTemplateExpressionOffset = require("./get-tagged-template-expression-offset");
@@ -47,7 +48,7 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
           messageId: messageId,
           node: node,
           fix: /*#__PURE__*/_regenerator.default.mark(function fix(fixer) {
-            var quasi, source, args, oldCode, withoutQuasi, newCode, usesEmotion;
+            var quasi, source, matches, args, oldCode, withoutQuasi, newCode, usesEmotion;
             return _regenerator.default.wrap(function fix$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -62,22 +63,35 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   }
                   return _context.abrupt("return");
                 case 4:
+                  matches = (0, _esquery.default)(node, 'ArrowFunctionExpression > BlockStatement');
+                  if (!matches.length) {
+                    _context.next = 7;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 7:
                   if (!(!quasi.expressions.length && quasi.quasis.length === 1 && !quasi.quasis[0].value.raw.trim())) {
-                    _context.next = 8;
+                    _context.next = 11;
                     break;
                   }
-                  _context.next = 7;
+                  _context.next = 10;
                   return fixer.replaceText(quasi, '({})');
-                case 7:
+                case 10:
                   return _context.abrupt("return");
-                case 8:
-                  args = (0, _toArguments.toArguments)(source, quasi); // Skip invalid CSS
+                case 11:
+                  args = (0, _toArguments.toArguments)(source, quasi);
+                  if (!((0, _isSupportedImport.isStyledComponents)(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector))) {
+                    _context.next = 14;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 14:
                   if (!(args.length < 1)) {
-                    _context.next = 11;
+                    _context.next = 16;
                     break;
                   }
                   return _context.abrupt("return");
-                case 11:
+                case 16:
                   oldCode = source.getText(node); // Remove quasi:
                   // styled.div<Props>`
                   //    color: red;
@@ -89,33 +103,33 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   // Indent the arguments after the tagged template expression range
                   (0, _generate.generate)(args, (0, _getTaggedTemplateExpressionOffset.getTaggedTemplateExpressionOffset)(node));
                   if (!(oldCode === newCode)) {
-                    _context.next = 16;
+                    _context.next = 21;
                     break;
                   }
                   return _context.abrupt("return");
-                case 16:
+                case 21:
                   // For styles like `position: initial !important`,
                   // Emotion can give typechecking errors when using object syntax
                   // due to csstype being overly strict
                   usesEmotion = (0, _isSupportedImport.isEmotion)(node.tag, references, importSources);
                   if (!(usesEmotion && !!newCode.match(/!\s*important/gm))) {
-                    _context.next = 19;
+                    _context.next = 24;
                     break;
                   }
                   return _context.abrupt("return");
-                case 19:
+                case 24:
                   if (!/\$\{.*:/.test(newCode)) {
-                    _context.next = 21;
+                    _context.next = 26;
                     break;
                   }
                   return _context.abrupt("return");
-                case 21:
-                  _context.next = 23;
+                case 26:
+                  _context.next = 28;
                   return fixer.insertTextBefore(node, newCode);
-                case 23:
-                  _context.next = 25;
+                case 28:
+                  _context.next = 30;
                   return fixer.remove(node);
-                case 25:
+                case 30:
                 case "end":
                   return _context.stop();
               }
@@ -125,4 +139,20 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
       }
     };
   };
-};
+};
+function hasMixinInsideNestedSelector(arg) {
+  if (arg.type === 'literal' || arg.type === 'expression' || arg.type === 'declaration') {
+    return false;
+  }
+  if (arg.type === 'rule' && arg.declarations.length > 1 && arg.declarations.some(function (node) {
+    return node.type === 'expression';
+  })) {
+    return true;
+  }
+  if (arg.type === 'block') {
+    return arg.blocks.some(hasMixinInsideNestedSelector);
+  }
+  if (arg.type === 'rule') {
+    return arg.declarations.some(hasMixinInsideNestedSelector);
+  }
+}

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

@@ -36,7 +36,10 @@ const createWithConfig = initialConfig => context => {
     }),
     // For expressions within template literals (e.g. `color: ${red}`) - color only
     'TemplateLiteral > Identifier': node => errorBoundary(() => {
-      return lintTemplateIdentifierForColor(node, context, config);
+      if (config.domains.includes('color')) {
+        return lintTemplateIdentifierForColor(node, context, config);
+      }
+      return;
     }, {
       config
     }),
@@ -241,19 +244,28 @@ const createWithConfig = initialConfig => context => {
     }),
     // For inline JSX styles - literals (e.g. <Test color="red"/>) - color only
     'JSXAttribute > Literal': node => errorBoundary(() => {
-      return lintJSXLiteralForColor(node, context, config);
+      if (config.domains.includes('color')) {
+        return lintJSXLiteralForColor(node, context, config);
+      }
+      return;
     }, {
       config
     }),
     // For inline JSX styles - members (e.g. <Test color={color.red}/>) - color only
     'JSXExpressionContainer > MemberExpression': node => errorBoundary(() => {
-      return lintJSXMemberForColor(node, context, config);
+      if (config.domains.includes('color')) {
+        return lintJSXMemberForColor(node, context, config);
+      }
+      return;
     }, {
       config
     }),
     // For inline JSX styles - identifiers (e.g. <Test color={red}/>) - color only
     'JSXExpressionContainer > Identifier': node => errorBoundary(() => {
-      return lintJSXIdentifierForColor(node, context, config);
+      if (config.domains.includes('color')) {
+        return lintJSXIdentifierForColor(node, context, config);
+      }
+      return;
     }, {
       config
     })

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/generate.js

@@ -61,7 +61,7 @@ const generateBlock = (blocks, offset, level) => {
 };
 const generateArguments = (args, offset, level) => {
   let chars = '';
-  if (level > 1 && args.length > 1) {
+  if (level >= 1 && args.length > 1) {
     chars += '[';
   }
   for (const [i, arg] of args.entries()) {
@@ -91,7 +91,7 @@ const generateArguments = (args, offset, level) => {
       chars += ',';
     }
   }
-  if (level > 1 && args.length > 1) {
+  if (level >= 1 && args.length > 1) {
     chars += '\n';
     chars += indent(offset, level);
     chars += ']';

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -1,7 +1,8 @@
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { getImportSources, isEmotion } from '../is-supported-import';
+import esquery from 'esquery';
+import { getImportSources, isEmotion, isStyledComponents } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -49,13 +50,24 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
           if (shouldSkipMultilineComments && quasi.quasis.map(q => q.value.raw).join('').match(/\/\*[\s\S]*\*\//g)) {
             return;
           }
-
-          // Replace empty tagged template expression with the equivalent object call expression
+          const matches = esquery(node, 'ArrowFunctionExpression > BlockStatement');
+          if (matches.length) {
+            return;
+          }
           if (!quasi.expressions.length && quasi.quasis.length === 1 && !quasi.quasis[0].value.raw.trim()) {
+            // Replace empty tagged template expression with the equivalent object call expression
             yield fixer.replaceText(quasi, '({})');
             return;
           }
           const args = toArguments(source, quasi);
+          if (isStyledComponents(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector)) {
+            /**
+             * Styled components doesn't support arrays as style object values,
+             * so we cannot autofix mixins as we cannot combine them with the other
+             * properties in the object.
+             */
+            return;
+          }
 
           // Skip invalid CSS
           if (args.length < 1) {
@@ -123,4 +135,18 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
       });
     }
   };
-};
+};
+function hasMixinInsideNestedSelector(arg) {
+  if (arg.type === 'literal' || arg.type === 'expression' || arg.type === 'declaration') {
+    return false;
+  }
+  if (arg.type === 'rule' && arg.declarations.length > 1 && arg.declarations.some(node => node.type === 'expression')) {
+    return true;
+  }
+  if (arg.type === 'block') {
+    return arg.blocks.some(hasMixinInsideNestedSelector);
+  }
+  if (arg.type === 'rule') {
+    return arg.declarations.some(hasMixinInsideNestedSelector);
+  }
+}

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

@@ -41,7 +41,10 @@ var createWithConfig = function createWithConfig(initialConfig) {
       // For expressions within template literals (e.g. `color: ${red}`) - color only
       'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
         return errorBoundary(function () {
-          return lintTemplateIdentifierForColor(node, context, config);
+          if (config.domains.includes('color')) {
+            return lintTemplateIdentifierForColor(node, context, config);
+          }
+          return;
         }, {
           config: config
         });
@@ -274,7 +277,10 @@ var createWithConfig = function createWithConfig(initialConfig) {
       // For inline JSX styles - literals (e.g. <Test color="red"/>) - color only
       'JSXAttribute > Literal': function JSXAttributeLiteral(node) {
         return errorBoundary(function () {
-          return lintJSXLiteralForColor(node, context, config);
+          if (config.domains.includes('color')) {
+            return lintJSXLiteralForColor(node, context, config);
+          }
+          return;
         }, {
           config: config
         });
@@ -282,7 +288,10 @@ var createWithConfig = function createWithConfig(initialConfig) {
       // For inline JSX styles - members (e.g. <Test color={color.red}/>) - color only
       'JSXExpressionContainer > MemberExpression': function JSXExpressionContainerMemberExpression(node) {
         return errorBoundary(function () {
-          return lintJSXMemberForColor(node, context, config);
+          if (config.domains.includes('color')) {
+            return lintJSXMemberForColor(node, context, config);
+          }
+          return;
         }, {
           config: config
         });
@@ -290,7 +299,10 @@ var createWithConfig = function createWithConfig(initialConfig) {
       // For inline JSX styles - identifiers (e.g. <Test color={red}/>) - color only
       'JSXExpressionContainer > Identifier': function JSXExpressionContainerIdentifier(node) {
         return errorBoundary(function () {
-          return lintJSXIdentifierForColor(node, context, config);
+          if (config.domains.includes('color')) {
+            return lintJSXIdentifierForColor(node, context, config);
+          }
+          return;
         }, {
           config: config
         });

package/dist/esm/rules/utils/create-no-tagged-template-expression-rule/generate.js

@@ -76,7 +76,7 @@ var generateBlock = function generateBlock(blocks, offset, level) {
 };
 var generateArguments = function generateArguments(args, offset, level) {
   var chars = '';
-  if (level > 1 && args.length > 1) {
+  if (level >= 1 && args.length > 1) {
     chars += '[';
   }
   var _iterator2 = _createForOfIteratorHelper(args.entries()),
@@ -117,7 +117,7 @@ var generateArguments = function generateArguments(args, offset, level) {
   } finally {
     _iterator2.f();
   }
-  if (level > 1 && args.length > 1) {
+  if (level >= 1 && args.length > 1) {
     chars += '\n';
     chars += indent(offset, level);
     chars += ']';

package/dist/esm/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -2,7 +2,8 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { getImportSources, isEmotion } from '../is-supported-import';
+import esquery from 'esquery';
+import { getImportSources, isEmotion, isStyledComponents } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -40,7 +41,7 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
           messageId: messageId,
           node: node,
           fix: /*#__PURE__*/_regeneratorRuntime.mark(function fix(fixer) {
-            var quasi, source, args, oldCode, withoutQuasi, newCode, usesEmotion;
+            var quasi, source, matches, args, oldCode, withoutQuasi, newCode, usesEmotion;
             return _regeneratorRuntime.wrap(function fix$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -55,22 +56,35 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   }
                   return _context.abrupt("return");
                 case 4:
+                  matches = esquery(node, 'ArrowFunctionExpression > BlockStatement');
+                  if (!matches.length) {
+                    _context.next = 7;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 7:
                   if (!(!quasi.expressions.length && quasi.quasis.length === 1 && !quasi.quasis[0].value.raw.trim())) {
-                    _context.next = 8;
+                    _context.next = 11;
                     break;
                   }
-                  _context.next = 7;
+                  _context.next = 10;
                   return fixer.replaceText(quasi, '({})');
-                case 7:
+                case 10:
                   return _context.abrupt("return");
-                case 8:
-                  args = toArguments(source, quasi); // Skip invalid CSS
+                case 11:
+                  args = toArguments(source, quasi);
+                  if (!(isStyledComponents(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector))) {
+                    _context.next = 14;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 14:
                   if (!(args.length < 1)) {
-                    _context.next = 11;
+                    _context.next = 16;
                     break;
                   }
                   return _context.abrupt("return");
-                case 11:
+                case 16:
                   oldCode = source.getText(node); // Remove quasi:
                   // styled.div<Props>`
                   //    color: red;
@@ -82,33 +96,33 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   // Indent the arguments after the tagged template expression range
                   generate(args, getTaggedTemplateExpressionOffset(node));
                   if (!(oldCode === newCode)) {
-                    _context.next = 16;
+                    _context.next = 21;
                     break;
                   }
                   return _context.abrupt("return");
-                case 16:
+                case 21:
                   // For styles like `position: initial !important`,
                   // Emotion can give typechecking errors when using object syntax
                   // due to csstype being overly strict
                   usesEmotion = isEmotion(node.tag, references, importSources);
                   if (!(usesEmotion && !!newCode.match(/!\s*important/gm))) {
-                    _context.next = 19;
+                    _context.next = 24;
                     break;
                   }
                   return _context.abrupt("return");
-                case 19:
+                case 24:
                   if (!/\$\{.*:/.test(newCode)) {
-                    _context.next = 21;
+                    _context.next = 26;
                     break;
                   }
                   return _context.abrupt("return");
-                case 21:
-                  _context.next = 23;
+                case 26:
+                  _context.next = 28;
                   return fixer.insertTextBefore(node, newCode);
-                case 23:
-                  _context.next = 25;
+                case 28:
+                  _context.next = 30;
                   return fixer.remove(node);
-                case 25:
+                case 30:
                 case "end":
                   return _context.stop();
               }
@@ -118,4 +132,20 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
       }
     };
   };
-};
+};
+function hasMixinInsideNestedSelector(arg) {
+  if (arg.type === 'literal' || arg.type === 'expression' || arg.type === 'declaration') {
+    return false;
+  }
+  if (arg.type === 'rule' && arg.declarations.length > 1 && arg.declarations.some(function (node) {
+    return node.type === 'expression';
+  })) {
+    return true;
+  }
+  if (arg.type === 'block') {
+    return arg.blocks.some(hasMixinInsideNestedSelector);
+  }
+  if (arg.type === 'rule') {
+    return arg.declarations.some(hasMixinInsideNestedSelector);
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "9.2.1",
+  "version": "9.2.3",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -42,6 +42,7 @@
     "@typescript-eslint/utils": "^5.48.1",
     "ajv": "^6.12.6",
     "eslint-codemod-utils": "^1.8.6",
+    "esquery": "^1.5.0",
     "estraverse": "^5.3.0",
     "lodash": "^4.17.21",
     "semver": "^7.5.2"
@@ -55,6 +56,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",
     "@types/eslint": "^8.56.6",
+    "@types/esquery": "^1.5.3",
     "@types/estraverse": "^5.1.7",
     "eslint": "^8.49.0",
     "jscodeshift": "^0.13.0",