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

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);