@atlaskit/eslint-plugin-design-system 9.3.0 → 9.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.3.1
+
+### Patch Changes
+
+- [#88012](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88012) [`c478a4d80fc9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c478a4d80fc9) - The `no-*-tagged-template-expression` rules will no longer autofix usages with mixins in nested selectors. This is because they were producing an array syntax that is not valid in compiled or styled-components.
+
 ## 9.3.0
 
 ### Minor Changes

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

@@ -80,7 +80,7 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   return _context.abrupt("return");
                 case 11:
                   args = (0, _toArguments.toArguments)(source, quasi);
-                  if (!((0, _isSupportedImport.isStyledComponents)(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector))) {
+                  if (!args.some(hasNestedSelectorWithMultipleArguments)) {
                     _context.next = 14;
                     break;
                   }
@@ -140,19 +140,17 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
     };
   };
 };
-function hasMixinInsideNestedSelector(arg) {
+function hasNestedSelectorWithMultipleArguments(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';
-  })) {
+  if (arg.type === 'rule' && arg.declarations.length > 1) {
     return true;
   }
   if (arg.type === 'block') {
-    return arg.blocks.some(hasMixinInsideNestedSelector);
+    return arg.blocks.some(hasNestedSelectorWithMultipleArguments);
   }
   if (arg.type === 'rule') {
-    return arg.declarations.some(hasMixinInsideNestedSelector);
+    return arg.declarations.some(hasNestedSelectorWithMultipleArguments);
   }
 }

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

@@ -2,7 +2,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import esquery from 'esquery';
-import { getImportSources, isEmotion, isStyledComponents } from '@atlaskit/eslint-utils/is-supported-import';
+import { getImportSources, isEmotion } from '@atlaskit/eslint-utils/is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -60,11 +60,23 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
             return;
           }
           const args = toArguments(source, quasi);
-          if (isStyledComponents(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector)) {
+          if (args.some(hasNestedSelectorWithMultipleArguments)) {
             /**
-             * 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.
+             * We don't want to autofix if we would produce an array value, for example:
+             * ```
+             * styled.div({
+             *  ':hover': [
+             *    mixin,
+             *    {
+             *      color: 'red'
+             *    }
+             *  ]
+             * })
+             * ```
+             *
+             * This should only occur if there is a mixin in a nested selector.
+             *
+             * The array syntax is only supported by emotion.
              */
             return;
           }
@@ -136,17 +148,17 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
     }
   };
 };
-function hasMixinInsideNestedSelector(arg) {
+function hasNestedSelectorWithMultipleArguments(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')) {
+  if (arg.type === 'rule' && arg.declarations.length > 1) {
     return true;
   }
   if (arg.type === 'block') {
-    return arg.blocks.some(hasMixinInsideNestedSelector);
+    return arg.blocks.some(hasNestedSelectorWithMultipleArguments);
   }
   if (arg.type === 'rule') {
-    return arg.declarations.some(hasMixinInsideNestedSelector);
+    return arg.declarations.some(hasNestedSelectorWithMultipleArguments);
   }
 }

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

@@ -3,7 +3,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import esquery from 'esquery';
-import { getImportSources, isEmotion, isStyledComponents } from '@atlaskit/eslint-utils/is-supported-import';
+import { getImportSources, isEmotion } from '@atlaskit/eslint-utils/is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -73,7 +73,7 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   return _context.abrupt("return");
                 case 11:
                   args = toArguments(source, quasi);
-                  if (!(isStyledComponents(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector))) {
+                  if (!args.some(hasNestedSelectorWithMultipleArguments)) {
                     _context.next = 14;
                     break;
                   }
@@ -133,19 +133,17 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
     };
   };
 };
-function hasMixinInsideNestedSelector(arg) {
+function hasNestedSelectorWithMultipleArguments(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';
-  })) {
+  if (arg.type === 'rule' && arg.declarations.length > 1) {
     return true;
   }
   if (arg.type === 'block') {
-    return arg.blocks.some(hasMixinInsideNestedSelector);
+    return arg.blocks.some(hasNestedSelectorWithMultipleArguments);
   }
   if (arg.type === 'rule') {
-    return arg.declarations.some(hasMixinInsideNestedSelector);
+    return arg.declarations.some(hasNestedSelectorWithMultipleArguments);
   }
 }

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.3.0",
+  "version": "9.3.1",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {