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

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.0",
+  "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 {};