@atlaskit/eslint-plugin-design-system 8.32.1 → 8.32.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.32.2
+
+### Patch Changes
+
+- [#77485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77485) [`887b1a3193ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/887b1a3193ce) - For `no-styled-tagged-template-expression`, do not autofix component selectors for `styled-components` implementations
+
 ## 8.32.1
 
 ### Patch Changes

package/constellation/no-styled-tagged-template-expression/usage.mdx

@@ -86,3 +86,45 @@ export const Component = styled.div``;
 ## Limitations
 
 - Comments are not fixable.
+- Component selectors are not fixable for `styled-components`.
+
+Do not migrate to this object syntax manually, it is invalid `styled-components`.
+
+```tsx
+const Button = styled.button``;
+const Wrapper = styled.div({
+  color: 'red',
+  [`${Button}`]: {
+    color: 'blue',
+  },
+});
+<Wrapper><Button /><Wrapper>
+```
+
+Instead, style the button directly—make it clear that you're styling that button.
+
+```tsx
+const buttonStyles = css({ color: 'blue' });
+const Wrapper = styled.div({
+  color: 'red',
+});
+
+<Wrapper>
+  <button css={buttonStyles} />
+</Wrapper>;
+```
+
+If that's not feasible, you can use data attributes, but these will result in failing the UI Styling Standard around nested styles, pushing the error down the road.
+
+```tsx
+const Wrapper = styled.div({
+  color: 'red',
+  '[data-component-selector="my.button"]': {
+    color: 'blue',
+  },
+});
+
+<Wrapper>
+  <button data-component-selector="my.button" />
+</Wrapper>;
+```

package/dist/cjs/rules/no-styled-tagged-template-expression/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _createNoTaggedTemplateExpressionRule = require("../utils/create-no-tagged-template-expression-rule");
 var _createRule = require("../utils/create-rule");
-var _isStyled = require("./is-styled");
+var _isSupportedImport = require("../utils/is-supported-import");
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'no-styled-tagged-template-expression',
@@ -22,6 +22,6 @@ var rule = (0, _createRule.createLintRule)({
     },
     schema: _createNoTaggedTemplateExpressionRule.noTaggedTemplateExpressionRuleSchema
   },
-  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)(_isStyled.isStyled, 'unexpectedTaggedTemplate')
+  create: (0, _createNoTaggedTemplateExpressionRule.createNoTaggedTemplateExpressionRule)(_isSupportedImport.isStyled, 'unexpectedTaggedTemplate')
 });
 var _default = exports.default = rule;

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

@@ -43,6 +43,7 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
         if (!isUsage(node.tag, references, importSources)) {
           return;
         }
+        var isSC = (0, _isSupportedImport.isStyledComponents)(node.tag, references, importSources);
         context.report({
           messageId: messageId,
           node: node,
@@ -94,12 +95,18 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   }
                   return _context.abrupt("return");
                 case 16:
-                  _context.next = 18;
-                  return fixer.insertTextBefore(node, newCode);
+                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode))) {
+                    _context.next = 18;
+                    break;
+                  }
+                  return _context.abrupt("return");
                 case 18:
                   _context.next = 20;
-                  return fixer.remove(node);
+                  return fixer.insertTextBefore(node, newCode);
                 case 20:
+                  _context.next = 22;
+                  return fixer.remove(node);
+                case 22:
                 case "end":
                   return _context.stop();
               }

package/dist/cjs/rules/utils/is-supported-import.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isStyled = exports.isKeyframes = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
+exports.isStyledComponents = exports.isStyled = exports.isKeyframes = exports.isImportedFrom = exports.isEmotion = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.isCompiled = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
@@ -23,6 +23,21 @@ var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
  * By default all known import sources are checked against.
  */
 var DEFAULT_IMPORT_SOURCES = exports.DEFAULT_IMPORT_SOURCES = Object.values(CSS_IN_JS_IMPORTS);
+var getIdentifierNode = function getIdentifierNode(node) {
+  var identifierNode = node.type === 'Identifier' ? node : undefined;
+  if (!identifierNode) {
+    // Handles styled.div`` case
+    if (node.type === 'MemberExpression' && node.object.type === 'Identifier') {
+      identifierNode = node.object;
+    }
+
+    // Handles styled(Component)`` case
+    if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
+      identifierNode = node.callee;
+    }
+  }
+  return identifierNode;
+};
 
 /**
  * Given the ESLint rule context, extract and parse the value of the importSources rule option.
@@ -43,6 +58,7 @@ var getImportSources = exports.getImportSources = function getImportSources(cont
   return DEFAULT_IMPORT_SOURCES;
 };
 var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
+  var defaultFromImportSources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var checkDefinitionHasImport = function checkDefinitionHasImport(def, importSources) {
     if (def.type !== 'ImportBinding') {
       return false;
@@ -50,12 +66,19 @@ var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
     if (!def.parent || !importSources.includes(def.parent.source.value)) {
       return false;
     }
-    return (
-      // import { functionName } from 'import-source';
-      def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName ||
-      // import functionName from 'import-source';
-      def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName
-    );
+
+    // Matches the imported name from a named import
+    // import { functionName, functioName as otherName } from 'import-source';
+    var isNamedImport = def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName;
+
+    // Must explicitly match the local name from a default import
+    // import functionName from 'import-source';
+    var isDefaultImportMatchingLocal = def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName;
+
+    // Can match any local name from a default import
+    // import anything from 'import-source'
+    var isKnownDefaultImport = def.node.type === 'ImportDefaultSpecifier' && defaultFromImportSources.includes(def.parent.source.value);
+    return isNamedImport || isDefaultImportMatchingLocal || isKnownDefaultImport;
   };
 
   /**
@@ -75,9 +98,10 @@ var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
    * @returns Whether the above conditions are true.
    */
   var isSupportedImport = function isSupportedImport(nodeToCheck, referencesInScope, importSources) {
-    return nodeToCheck.type === 'Identifier' && referencesInScope.some(function (reference) {
+    var identifierNode = getIdentifierNode(nodeToCheck);
+    return (identifierNode === null || identifierNode === void 0 ? void 0 : identifierNode.type) === 'Identifier' && referencesInScope.some(function (reference) {
       var _reference$resolved;
-      return reference.identifier === nodeToCheck && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
+      return reference.identifier === identifierNode && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
         return checkDefinitionHasImport(def, importSources);
       }));
     });
@@ -92,4 +116,34 @@ var isCss = exports.isCss = isSupportedImportWrapper('css');
 var isCxFunction = exports.isCxFunction = isSupportedImportWrapper('cx');
 var isCssMap = exports.isCssMap = isSupportedImportWrapper('cssMap');
 var isKeyframes = exports.isKeyframes = isSupportedImportWrapper('keyframes');
-var isStyled = exports.isStyled = isSupportedImportWrapper('styled');
+// `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
+var isStyled = exports.isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
+var isImportedFrom = exports.isImportedFrom = function isImportedFrom(moduleName) {
+  var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return function (nodeToCheck, referencesInScope, importSources) {
+    if (!importSources.includes(moduleName)) {
+      // Don't go through the trouble of checking the import sources does not include this
+      // We'll assume this is skipped elsewhere.
+      return false;
+    }
+    var identifierNode = getIdentifierNode(nodeToCheck);
+    return (identifierNode === null || identifierNode === void 0 ? void 0 : identifierNode.type) === 'Identifier' && referencesInScope.some(function (reference) {
+      var _reference$resolved2;
+      return reference.identifier === identifierNode && ((_reference$resolved2 = reference.resolved) === null || _reference$resolved2 === void 0 ? void 0 : _reference$resolved2.defs.some(function (def) {
+        var _def$parent, _String, _def$parent2;
+        return def.type === 'ImportBinding' && (((_def$parent = def.parent) === null || _def$parent === void 0 ? void 0 : _def$parent.source.value) === moduleName || !exactMatch && ((_String = String((_def$parent2 = def.parent) === null || _def$parent2 === void 0 ? void 0 : _def$parent2.source.value)) === null || _String === void 0 ? void 0 : _String.startsWith(moduleName)));
+      }));
+    });
+  };
+};
+
+/**
+ * Determine if this node is specifically from a `'styled-components'` import.
+ * This is because `styled-components@3.4` APIs are not consistent with Emotion and Compiled,
+ * we need to handle them differently in a few scenarios.
+ *
+ * This can be cleaned up when `'styled-components'` is no longer a valid ImportSource.
+ */
+var isStyledComponents = exports.isStyledComponents = isImportedFrom('styled-components');
+var isCompiled = exports.isCompiled = isImportedFrom('@compiled/', false);
+var isEmotion = exports.isEmotion = isImportedFrom('@emotion/', false);

package/dist/es2019/rules/no-styled-tagged-template-expression/index.js

@@ -1,6 +1,6 @@
 import { createNoTaggedTemplateExpressionRule, noTaggedTemplateExpressionRuleSchema } from '../utils/create-no-tagged-template-expression-rule';
 import { createLintRule } from '../utils/create-rule';
-import { isStyled } from './is-styled';
+import { isStyled } from '../utils/is-supported-import';
 const rule = createLintRule({
   meta: {
     name: 'no-styled-tagged-template-expression',

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

@@ -1,7 +1,7 @@
 // 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 } from '../is-supported-import';
+import { getImportSources, isStyledComponents } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -35,6 +35,7 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
       if (!isUsage(node.tag, references, importSources)) {
         return;
       }
+      const isSC = isStyledComponents(node.tag, references, importSources);
       context.report({
         messageId,
         node,
@@ -75,6 +76,30 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
           if (oldCode === newCode) {
             return;
           }
+
+          // TODO: We might want to similarly disallow `styled.div({ color: props => props.color })` for SC as it's broken too (both type and functionality)
+          // Alternatively, autofix it to `styled.div(props => ({ color: props.color }))`?
+          if (isSC && /\$\{.*:[\s]*\{/.test(newCode)) {
+            /**
+             * If we find a variable in a selector when migrating `styled-components` code, we skip it.
+             * This is because `styled-components@3.x` does not support the syntax.
+             *
+             * @example
+             * ```tsx
+             * const Component = styled.div`
+             *   & + ${Button} { color: red; }
+             * `;
+             * ```
+             * Becomes this code, which is not supported in `styled-components@3.x`:
+             * ```tsx
+             * const Component = styled.div({
+             *   [`& + ${Button}`]: {
+             *     color: 'red',
+             * });
+             * ```
+             */
+            return;
+          }
           yield fixer.insertTextBefore(node, newCode);
           yield fixer.remove(node);
         }

package/dist/es2019/rules/utils/is-supported-import.js

@@ -16,6 +16,21 @@ export const CSS_IN_JS_IMPORTS = {
  * By default all known import sources are checked against.
  */
 export const DEFAULT_IMPORT_SOURCES = Object.values(CSS_IN_JS_IMPORTS);
+const getIdentifierNode = node => {
+  let identifierNode = node.type === 'Identifier' ? node : undefined;
+  if (!identifierNode) {
+    // Handles styled.div`` case
+    if (node.type === 'MemberExpression' && node.object.type === 'Identifier') {
+      identifierNode = node.object;
+    }
+
+    // Handles styled(Component)`` case
+    if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
+      identifierNode = node.callee;
+    }
+  }
+  return identifierNode;
+};
 
 /**
  * Given the ESLint rule context, extract and parse the value of the importSources rule option.
@@ -35,7 +50,7 @@ export const getImportSources = context => {
   }
   return DEFAULT_IMPORT_SOURCES;
 };
-const isSupportedImportWrapper = functionName => {
+const isSupportedImportWrapper = (functionName, defaultFromImportSources = []) => {
   const checkDefinitionHasImport = (def, importSources) => {
     if (def.type !== 'ImportBinding') {
       return false;
@@ -43,12 +58,19 @@ const isSupportedImportWrapper = functionName => {
     if (!def.parent || !importSources.includes(def.parent.source.value)) {
       return false;
     }
-    return (
-      // import { functionName } from 'import-source';
-      def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName ||
-      // import functionName from 'import-source';
-      def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName
-    );
+
+    // Matches the imported name from a named import
+    // import { functionName, functioName as otherName } from 'import-source';
+    const isNamedImport = def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName;
+
+    // Must explicitly match the local name from a default import
+    // import functionName from 'import-source';
+    const isDefaultImportMatchingLocal = def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName;
+
+    // Can match any local name from a default import
+    // import anything from 'import-source'
+    const isKnownDefaultImport = def.node.type === 'ImportDefaultSpecifier' && defaultFromImportSources.includes(def.parent.source.value);
+    return isNamedImport || isDefaultImportMatchingLocal || isKnownDefaultImport;
   };
 
   /**
@@ -68,9 +90,10 @@ const isSupportedImportWrapper = functionName => {
    * @returns Whether the above conditions are true.
    */
   const isSupportedImport = (nodeToCheck, referencesInScope, importSources) => {
-    return nodeToCheck.type === 'Identifier' && referencesInScope.some(reference => {
+    const identifierNode = getIdentifierNode(nodeToCheck);
+    return (identifierNode === null || identifierNode === void 0 ? void 0 : identifierNode.type) === 'Identifier' && referencesInScope.some(reference => {
       var _reference$resolved;
-      return reference.identifier === nodeToCheck && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(def => checkDefinitionHasImport(def, importSources)));
+      return reference.identifier === identifierNode && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(def => checkDefinitionHasImport(def, importSources)));
     });
   };
   return isSupportedImport;
@@ -83,4 +106,31 @@ export const isCss = isSupportedImportWrapper('css');
 export const isCxFunction = isSupportedImportWrapper('cx');
 export const isCssMap = isSupportedImportWrapper('cssMap');
 export const isKeyframes = isSupportedImportWrapper('keyframes');
-export const isStyled = isSupportedImportWrapper('styled');
+// `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
+export const isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
+export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope, importSources) => {
+  if (!importSources.includes(moduleName)) {
+    // Don't go through the trouble of checking the import sources does not include this
+    // We'll assume this is skipped elsewhere.
+    return false;
+  }
+  const identifierNode = getIdentifierNode(nodeToCheck);
+  return (identifierNode === null || identifierNode === void 0 ? void 0 : identifierNode.type) === 'Identifier' && referencesInScope.some(reference => {
+    var _reference$resolved2;
+    return reference.identifier === identifierNode && ((_reference$resolved2 = reference.resolved) === null || _reference$resolved2 === void 0 ? void 0 : _reference$resolved2.defs.some(def => {
+      var _def$parent, _String, _def$parent2;
+      return def.type === 'ImportBinding' && (((_def$parent = def.parent) === null || _def$parent === void 0 ? void 0 : _def$parent.source.value) === moduleName || !exactMatch && ((_String = String((_def$parent2 = def.parent) === null || _def$parent2 === void 0 ? void 0 : _def$parent2.source.value)) === null || _String === void 0 ? void 0 : _String.startsWith(moduleName)));
+    }));
+  });
+};
+
+/**
+ * Determine if this node is specifically from a `'styled-components'` import.
+ * This is because `styled-components@3.4` APIs are not consistent with Emotion and Compiled,
+ * we need to handle them differently in a few scenarios.
+ *
+ * This can be cleaned up when `'styled-components'` is no longer a valid ImportSource.
+ */
+export const isStyledComponents = isImportedFrom('styled-components');
+export const isCompiled = isImportedFrom('@compiled/', false);
+export const isEmotion = isImportedFrom('@emotion/', false);

package/dist/esm/rules/no-styled-tagged-template-expression/index.js

@@ -1,6 +1,6 @@
 import { createNoTaggedTemplateExpressionRule, noTaggedTemplateExpressionRuleSchema } from '../utils/create-no-tagged-template-expression-rule';
 import { createLintRule } from '../utils/create-rule';
-import { isStyled } from './is-styled';
+import { isStyled } from '../utils/is-supported-import';
 var rule = createLintRule({
   meta: {
     name: 'no-styled-tagged-template-expression',

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

@@ -2,7 +2,7 @@ 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 } from '../is-supported-import';
+import { getImportSources, isStyledComponents } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -36,6 +36,7 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
         if (!isUsage(node.tag, references, importSources)) {
           return;
         }
+        var isSC = isStyledComponents(node.tag, references, importSources);
         context.report({
           messageId: messageId,
           node: node,
@@ -87,12 +88,18 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   }
                   return _context.abrupt("return");
                 case 16:
-                  _context.next = 18;
-                  return fixer.insertTextBefore(node, newCode);
+                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode))) {
+                    _context.next = 18;
+                    break;
+                  }
+                  return _context.abrupt("return");
                 case 18:
                   _context.next = 20;
-                  return fixer.remove(node);
+                  return fixer.insertTextBefore(node, newCode);
                 case 20:
+                  _context.next = 22;
+                  return fixer.remove(node);
+                case 22:
                 case "end":
                   return _context.stop();
               }

package/dist/esm/rules/utils/is-supported-import.js

@@ -16,6 +16,21 @@ export var CSS_IN_JS_IMPORTS = {
  * By default all known import sources are checked against.
  */
 export var DEFAULT_IMPORT_SOURCES = Object.values(CSS_IN_JS_IMPORTS);
+var getIdentifierNode = function getIdentifierNode(node) {
+  var identifierNode = node.type === 'Identifier' ? node : undefined;
+  if (!identifierNode) {
+    // Handles styled.div`` case
+    if (node.type === 'MemberExpression' && node.object.type === 'Identifier') {
+      identifierNode = node.object;
+    }
+
+    // Handles styled(Component)`` case
+    if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
+      identifierNode = node.callee;
+    }
+  }
+  return identifierNode;
+};
 
 /**
  * Given the ESLint rule context, extract and parse the value of the importSources rule option.
@@ -36,6 +51,7 @@ export var getImportSources = function getImportSources(context) {
   return DEFAULT_IMPORT_SOURCES;
 };
 var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
+  var defaultFromImportSources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var checkDefinitionHasImport = function checkDefinitionHasImport(def, importSources) {
     if (def.type !== 'ImportBinding') {
       return false;
@@ -43,12 +59,19 @@ var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
     if (!def.parent || !importSources.includes(def.parent.source.value)) {
       return false;
     }
-    return (
-      // import { functionName } from 'import-source';
-      def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName ||
-      // import functionName from 'import-source';
-      def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName
-    );
+
+    // Matches the imported name from a named import
+    // import { functionName, functioName as otherName } from 'import-source';
+    var isNamedImport = def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName;
+
+    // Must explicitly match the local name from a default import
+    // import functionName from 'import-source';
+    var isDefaultImportMatchingLocal = def.node.type === 'ImportDefaultSpecifier' && def.node.local.name === functionName;
+
+    // Can match any local name from a default import
+    // import anything from 'import-source'
+    var isKnownDefaultImport = def.node.type === 'ImportDefaultSpecifier' && defaultFromImportSources.includes(def.parent.source.value);
+    return isNamedImport || isDefaultImportMatchingLocal || isKnownDefaultImport;
   };
 
   /**
@@ -68,9 +91,10 @@ var isSupportedImportWrapper = function isSupportedImportWrapper(functionName) {
    * @returns Whether the above conditions are true.
    */
   var isSupportedImport = function isSupportedImport(nodeToCheck, referencesInScope, importSources) {
-    return nodeToCheck.type === 'Identifier' && referencesInScope.some(function (reference) {
+    var identifierNode = getIdentifierNode(nodeToCheck);
+    return (identifierNode === null || identifierNode === void 0 ? void 0 : identifierNode.type) === 'Identifier' && referencesInScope.some(function (reference) {
       var _reference$resolved;
-      return reference.identifier === nodeToCheck && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
+      return reference.identifier === identifierNode && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
         return checkDefinitionHasImport(def, importSources);
       }));
     });
@@ -85,4 +109,34 @@ export var isCss = isSupportedImportWrapper('css');
 export var isCxFunction = isSupportedImportWrapper('cx');
 export var isCssMap = isSupportedImportWrapper('cssMap');
 export var isKeyframes = isSupportedImportWrapper('keyframes');
-export var isStyled = isSupportedImportWrapper('styled');
+// `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
+export var isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
+export var isImportedFrom = function isImportedFrom(moduleName) {
+  var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return function (nodeToCheck, referencesInScope, importSources) {
+    if (!importSources.includes(moduleName)) {
+      // Don't go through the trouble of checking the import sources does not include this
+      // We'll assume this is skipped elsewhere.
+      return false;
+    }
+    var identifierNode = getIdentifierNode(nodeToCheck);
+    return (identifierNode === null || identifierNode === void 0 ? void 0 : identifierNode.type) === 'Identifier' && referencesInScope.some(function (reference) {
+      var _reference$resolved2;
+      return reference.identifier === identifierNode && ((_reference$resolved2 = reference.resolved) === null || _reference$resolved2 === void 0 ? void 0 : _reference$resolved2.defs.some(function (def) {
+        var _def$parent, _String, _def$parent2;
+        return def.type === 'ImportBinding' && (((_def$parent = def.parent) === null || _def$parent === void 0 ? void 0 : _def$parent.source.value) === moduleName || !exactMatch && ((_String = String((_def$parent2 = def.parent) === null || _def$parent2 === void 0 ? void 0 : _def$parent2.source.value)) === null || _String === void 0 ? void 0 : _String.startsWith(moduleName)));
+      }));
+    });
+  };
+};
+
+/**
+ * Determine if this node is specifically from a `'styled-components'` import.
+ * This is because `styled-components@3.4` APIs are not consistent with Emotion and Compiled,
+ * we need to handle them differently in a few scenarios.
+ *
+ * This can be cleaned up when `'styled-components'` is no longer a valid ImportSource.
+ */
+export var isStyledComponents = isImportedFrom('styled-components');
+export var isCompiled = isImportedFrom('@compiled/', false);
+export var isEmotion = isImportedFrom('@emotion/', false);

package/dist/types/rules/utils/is-supported-import.d.ts

@@ -31,4 +31,15 @@ export declare const isCxFunction: SupportedNameChecker;
 export declare const isCssMap: SupportedNameChecker;
 export declare const isKeyframes: SupportedNameChecker;
 export declare const isStyled: SupportedNameChecker;
+export declare const isImportedFrom: (moduleName: string, exactMatch?: boolean) => (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+/**
+ * Determine if this node is specifically from a `'styled-components'` import.
+ * This is because `styled-components@3.4` APIs are not consistent with Emotion and Compiled,
+ * we need to handle them differently in a few scenarios.
+ *
+ * This can be cleaned up when `'styled-components'` is no longer a valid ImportSource.
+ */
+export declare const isStyledComponents: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export declare const isCompiled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export declare const isEmotion: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
 export {};

package/dist/types-ts4.5/rules/utils/is-supported-import.d.ts

@@ -31,4 +31,15 @@ export declare const isCxFunction: SupportedNameChecker;
 export declare const isCssMap: SupportedNameChecker;
 export declare const isKeyframes: SupportedNameChecker;
 export declare const isStyled: SupportedNameChecker;
+export declare const isImportedFrom: (moduleName: string, exactMatch?: boolean) => (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+/**
+ * Determine if this node is specifically from a `'styled-components'` import.
+ * This is because `styled-components@3.4` APIs are not consistent with Emotion and Compiled,
+ * we need to handle them differently in a few scenarios.
+ *
+ * This can be cleaned up when `'styled-components'` is no longer a valid ImportSource.
+ */
+export declare const isStyledComponents: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export declare const isCompiled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
+export declare const isEmotion: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
 export {};

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": "8.32.1",
+  "version": "8.32.2",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/dist/cjs/rules/no-styled-tagged-template-expression/is-styled.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isStyled = void 0;
-var _isSupportedImport = require("../utils/is-supported-import");
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-var functionName = 'styled';
-var checkDefinitionHasImport = function checkDefinitionHasImport(def, importSources) {
-  if (def.type !== 'ImportBinding') {
-    return false;
-  }
-  if (!def.parent || !importSources.includes(def.parent.source.value)) {
-    return false;
-  }
-
-  // `@compiled/react` only exposes styled as a named export
-  if (importSources.includes(_isSupportedImport.CSS_IN_JS_IMPORTS.compiled) && def.parent.source.value === _isSupportedImport.CSS_IN_JS_IMPORTS.compiled) {
-    return def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName;
-  }
-
-  // `@emotion/styled` only exposes styled as a default export
-  if (importSources.includes(_isSupportedImport.CSS_IN_JS_IMPORTS.emotionStyled) && def.parent.source.value === _isSupportedImport.CSS_IN_JS_IMPORTS.emotionStyled) {
-    return def.node.type === 'ImportDefaultSpecifier';
-  }
-
-  // `styled-components` only exposes styled as a default export
-  if (importSources.includes(_isSupportedImport.CSS_IN_JS_IMPORTS.styledComponents) && def.parent.source.value === _isSupportedImport.CSS_IN_JS_IMPORTS.styledComponents) {
-    return def.node.type === 'ImportDefaultSpecifier';
-  }
-  return false;
-};
-var isStyled = exports.isStyled = function isStyled(nodeToCheck, referencesInScope, importSources) {
-  var nodeIdentifier = null;
-
-  // Handles styled.div`` case
-  if (nodeToCheck.type === 'MemberExpression' && nodeToCheck.object.type === 'Identifier') {
-    nodeIdentifier = nodeToCheck.object;
-  }
-
-  // Handles styled(Base)`` case
-  if (nodeToCheck.type === 'CallExpression' && nodeToCheck.callee.type === 'Identifier') {
-    nodeIdentifier = nodeToCheck.callee;
-  }
-  return referencesInScope.some(function (reference) {
-    var _reference$resolved;
-    return reference.identifier === nodeIdentifier && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
-      return checkDefinitionHasImport(def, importSources);
-    }));
-  });
-};

package/dist/es2019/rules/no-styled-tagged-template-expression/is-styled.js

@@ -1,45 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-import { CSS_IN_JS_IMPORTS } from '../utils/is-supported-import';
-const functionName = 'styled';
-const checkDefinitionHasImport = (def, importSources) => {
-  if (def.type !== 'ImportBinding') {
-    return false;
-  }
-  if (!def.parent || !importSources.includes(def.parent.source.value)) {
-    return false;
-  }
-
-  // `@compiled/react` only exposes styled as a named export
-  if (importSources.includes(CSS_IN_JS_IMPORTS.compiled) && def.parent.source.value === CSS_IN_JS_IMPORTS.compiled) {
-    return def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName;
-  }
-
-  // `@emotion/styled` only exposes styled as a default export
-  if (importSources.includes(CSS_IN_JS_IMPORTS.emotionStyled) && def.parent.source.value === CSS_IN_JS_IMPORTS.emotionStyled) {
-    return def.node.type === 'ImportDefaultSpecifier';
-  }
-
-  // `styled-components` only exposes styled as a default export
-  if (importSources.includes(CSS_IN_JS_IMPORTS.styledComponents) && def.parent.source.value === CSS_IN_JS_IMPORTS.styledComponents) {
-    return def.node.type === 'ImportDefaultSpecifier';
-  }
-  return false;
-};
-export const isStyled = (nodeToCheck, referencesInScope, importSources) => {
-  let nodeIdentifier = null;
-
-  // Handles styled.div`` case
-  if (nodeToCheck.type === 'MemberExpression' && nodeToCheck.object.type === 'Identifier') {
-    nodeIdentifier = nodeToCheck.object;
-  }
-
-  // Handles styled(Base)`` case
-  if (nodeToCheck.type === 'CallExpression' && nodeToCheck.callee.type === 'Identifier') {
-    nodeIdentifier = nodeToCheck.callee;
-  }
-  return referencesInScope.some(reference => {
-    var _reference$resolved;
-    return reference.identifier === nodeIdentifier && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(def => checkDefinitionHasImport(def, importSources)));
-  });
-};

package/dist/esm/rules/no-styled-tagged-template-expression/is-styled.js

@@ -1,47 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-import { CSS_IN_JS_IMPORTS } from '../utils/is-supported-import';
-var functionName = 'styled';
-var checkDefinitionHasImport = function checkDefinitionHasImport(def, importSources) {
-  if (def.type !== 'ImportBinding') {
-    return false;
-  }
-  if (!def.parent || !importSources.includes(def.parent.source.value)) {
-    return false;
-  }
-
-  // `@compiled/react` only exposes styled as a named export
-  if (importSources.includes(CSS_IN_JS_IMPORTS.compiled) && def.parent.source.value === CSS_IN_JS_IMPORTS.compiled) {
-    return def.node.type === 'ImportSpecifier' && def.node.imported.name === functionName;
-  }
-
-  // `@emotion/styled` only exposes styled as a default export
-  if (importSources.includes(CSS_IN_JS_IMPORTS.emotionStyled) && def.parent.source.value === CSS_IN_JS_IMPORTS.emotionStyled) {
-    return def.node.type === 'ImportDefaultSpecifier';
-  }
-
-  // `styled-components` only exposes styled as a default export
-  if (importSources.includes(CSS_IN_JS_IMPORTS.styledComponents) && def.parent.source.value === CSS_IN_JS_IMPORTS.styledComponents) {
-    return def.node.type === 'ImportDefaultSpecifier';
-  }
-  return false;
-};
-export var isStyled = function isStyled(nodeToCheck, referencesInScope, importSources) {
-  var nodeIdentifier = null;
-
-  // Handles styled.div`` case
-  if (nodeToCheck.type === 'MemberExpression' && nodeToCheck.object.type === 'Identifier') {
-    nodeIdentifier = nodeToCheck.object;
-  }
-
-  // Handles styled(Base)`` case
-  if (nodeToCheck.type === 'CallExpression' && nodeToCheck.callee.type === 'Identifier') {
-    nodeIdentifier = nodeToCheck.callee;
-  }
-  return referencesInScope.some(function (reference) {
-    var _reference$resolved;
-    return reference.identifier === nodeIdentifier && ((_reference$resolved = reference.resolved) === null || _reference$resolved === void 0 ? void 0 : _reference$resolved.defs.some(function (def) {
-      return checkDefinitionHasImport(def, importSources);
-    }));
-  });
-};

package/dist/types/rules/no-styled-tagged-template-expression/is-styled.d.ts

@@ -1,7 +0,0 @@
-import type { Scope } from 'eslint';
-import type { CallExpression } from 'estree';
-import { ImportSource } from '../utils/is-supported-import';
-type Callee = CallExpression['callee'];
-type Reference = Scope.Reference;
-export declare const isStyled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
-export {};

package/dist/types-ts4.5/rules/no-styled-tagged-template-expression/is-styled.d.ts

@@ -1,7 +0,0 @@
-import type { Scope } from 'eslint';
-import type { CallExpression } from 'estree';
-import { ImportSource } from '../utils/is-supported-import';
-type Callee = CallExpression['callee'];
-type Reference = Scope.Reference;
-export declare const isStyled: (nodeToCheck: Callee, referencesInScope: Reference[], importSources: ImportSource[]) => boolean;
-export {};