Fix duplicate css import in eslint plugin (#1509)

atlassian-labs · Sep 6, 2023 · 59687ab · 59687ab
1 parent 258d6d1
commit 59687ab
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 8 deletions.
diff --git a/.changeset/nice-pots-confess.md b/.changeset/nice-pots-confess.md
@@ -0,0 +1,5 @@
+---
+'@compiled/eslint-plugin': patch
+---
+
+Fix @compiled/eslint-plugin no-css-prop-without-css-function rule adding duplicate css import
diff --git a/packages/eslint-plugin/src/rules/no-css-prop-without-css-function/__tests__/rule.test.ts b/packages/eslint-plugin/src/rules/no-css-prop-without-css-function/__tests__/rule.test.ts
@@ -153,6 +153,54 @@ tester.run(
         <div css={css({ backgroundColor: 'red' })} />;
       `,
       },
+      {
+        // Inline object expression without function
+        // with existing css import
+        errors: [
+          {
+            messageId: 'noCssFunction',
+          },
+        ],
+        code: outdent`
+        import React from 'react';
+        import { css } from '@compiled/react';
+
+        <div css={{ backgroundColor: 'red' }} />;
+              `,
+        output: outdent`
+        import React from 'react';
+        import { css } from '@compiled/react';
+
+        <div css={css({ backgroundColor: 'red' })} />;
+      `,
+      },
+      {
+        // Inline object expression without function
+        // with existing css import, imported as something else
+        errors: [
+          {
+            messageId: 'noCssFunction',
+          },
+        ],
+        code: outdent`
+        import React from 'react';
+        import { css as css2 } from '@compiled/react';
+        import { css } from 'example';
+
+        css();
+
+        <div css={{ backgroundColor: 'red' }} />;
+              `,
+        output: outdent`
+        import React from 'react';
+        import { css as css2 } from '@compiled/react';
+        import { css } from 'example';
+
+        css();
+
+        <div css={css2({ backgroundColor: 'red' })} />;
+      `,
+      },
       {
         errors: [
           {

diff --git a/packages/eslint-plugin/src/rules/no-css-prop-without-css-function/index.ts b/packages/eslint-plugin/src/rules/no-css-prop-without-css-function/index.ts
@@ -5,7 +5,11 @@ import {
   isDOMElement,
   traverseUpToJSXOpeningElement,
 } from '../../utils/ast';
-import { addImportToDeclaration, buildImportDeclaration } from '../../utils/ast-to-string';
+import {
+  addImportToDeclaration,
+  buildImportDeclaration,
+  getImportedName,
+} from '../../utils/ast-to-string';
 
 type Q<T> = T extends TSESLint.Scope.Definition
   ? T['type'] extends 'Variable'
@@ -90,12 +94,17 @@ const fixWrapper = (node: CSSValue, context: Context) => {
     const compiledImports = findTSCompiledImportDeclarations(context);
     const source = context.getSourceCode();
 
+    // The string that `css` from `@compiled/css` is imported as
+    const cssImportName = getImportedName(compiledImports, 'css');
+
     if (compiledImports.length > 0) {
-      // Import found, add the specifier to it
-      const [firstCompiledImport] = compiledImports;
-      const specifiersString = addImportToDeclaration(firstCompiledImport, ['css']);
+      if (!cssImportName) {
+        // Import found, add the specifier to it
+        const [firstCompiledImport] = compiledImports;
+        const specifiersString = addImportToDeclaration(firstCompiledImport, ['css']);
 
-      yield fixer.replaceText(firstCompiledImport, specifiersString);
+        yield fixer.replaceText(firstCompiledImport, specifiersString);
+      }
     } else {
       // Import not found, add a new one
       yield fixer.insertTextAfter(
@@ -104,16 +113,18 @@ const fixWrapper = (node: CSSValue, context: Context) => {
       );
     }
 
+    const cssFunctionName = cssImportName ?? 'css';
+
     if (node.type === 'ObjectExpression') {
       const parent = node.parent;
       if (parent && parent.type === 'TSAsExpression') {
-        yield fixer.replaceText(parent, `css(${source.getText(node)})`);
+        yield fixer.replaceText(parent, `${cssFunctionName}(${source.getText(node)})`);
       } else {
-        yield fixer.insertTextBefore(node, 'css(');
+        yield fixer.insertTextBefore(node, `${cssFunctionName}(`);
         yield fixer.insertTextAfter(node, ')');
       }
     } else {
-      yield fixer.insertTextBefore(node, 'css');
+      yield fixer.insertTextBefore(node, cssFunctionName);
     }
   }
 

diff --git a/packages/eslint-plugin/src/utils/ast-to-string.ts b/packages/eslint-plugin/src/utils/ast-to-string.ts
@@ -62,3 +62,29 @@ export const buildNamedImport = (
 
   return '';
 };
+
+/**
+ * Given a list of import declarations and the name of an import,
+ * return two things:
+ *
+ * 1. Whether the import declarations import the name `importName`, and
+ * 2. What name `importName` is imported as.
+ *
+ * @param declarations
+ * @param importName
+ * @returns the name that `importName` is imported as, or `undefined`
+ *          if `importName` is not imported
+ */
+export const getImportedName = (
+  declarations: ImportDeclaration[],
+  importName: string
+): string | undefined => {
+  for (const decl of declarations) {
+    for (const specifier of decl.specifiers) {
+      if (specifier.type === 'ImportSpecifier' && importName === specifier.imported.name) {
+        return specifier.local.name;
+      }
+    }
+  }
+  return undefined;
+};