Update jsx-pragma rule to ensure it exists when using xcss prop (#1550)

* feat: update jsx-pragma rule to ensure it exists when using xcss prop

* chore: changeset

* chore: apply fixer

* fix: use test over exec

Author: itsdouges

.changeset/flat-forks-live.md

@@ -0,0 +1,5 @@
+---
+'@compiled/eslint-plugin': patch
+---
+
+Update jsx-pragma lint rule to enforce the pragma is in scope when passing the `className` prop on host elements an output of xcss prop.

packages/babel-plugin/src/babel-plugin.ts

@@ -91,7 +91,7 @@ export default declare<State>((api) => {
             }
           }
 
-          if (!state.compiledImports && /(x|X)css={/.exec(file.code)) {
+          if (!state.compiledImports && /(x|X)css={/.test(file.code)) {
             // xcss prop was found turn on Compiled
             state.compiledImports = {};
           }

packages/eslint-plugin/src/rules/jsx-pragma/__tests__/rule.test.ts

@@ -7,6 +7,20 @@ tester.run('jsx-pragma', jsxPragmaRule, {
       /** @jsxImportSource @compiled/react */
       <div css={{ display: 'block' }} />
     `,
+    `
+      <AnotherComponent className={xcss} />
+    `,
+    `
+      <div className={anythingElse} />
+    `,
+    `
+      /** @jsxImportSource @compiled/react */
+      <div className={xcss} />
+    `,
+    `
+      /** @jsxImportSource @compiled/react */
+      <div className={innerXcss} />
+    `,
     {
       code: `
       /** @jsxImportSource @compiled/react */
@@ -24,6 +38,26 @@ tester.run('jsx-pragma', jsxPragmaRule, {
     },
   ],
   invalid: [
+    {
+      code: `
+      <div className={xcss} />
+      `,
+      output: `
+      /** @jsxImportSource @compiled/react */
+<div className={xcss} />
+      `,
+      errors: [{ messageId: 'missingPragmaXCSS' }],
+    },
+    {
+      code: `
+      <div className={innerXcss} />
+    `,
+      output: `
+      /** @jsxImportSource @compiled/react */
+<div className={innerXcss} />
+    `,
+      errors: [{ messageId: 'missingPragmaXCSS' }],
+    },
     {
       code: `<div css={{ display: 'block' }} />`,
       output: `/** @jsx jsx */

packages/eslint-plugin/src/rules/jsx-pragma/index.ts

@@ -27,13 +27,58 @@ const findReactDeclarationWithDefaultImport = (
   return undefined;
 };
 
+function createFixer(context: Rule.RuleContext, source: SourceCode, options: Options) {
+  return function* fix(fixer: Rule.RuleFixer) {
+    const pragma = options.runtime === 'classic' ? '@jsx jsx' : '@jsxImportSource @compiled/react';
+    const reactImport = findReactDeclarationWithDefaultImport(source);
+    if (reactImport) {
+      const [declaration, defaultImport] = reactImport;
+      const [defaultImportVariable] = context.getDeclaredVariables(defaultImport);
+
+      if (defaultImportVariable && defaultImportVariable.references.length === 0) {
+        if (declaration.specifiers.length === 1) {
+          // Only the default specifier exists and it isn't used - remove the whole declaration!
+          yield fixer.remove(declaration);
+        } else {
+          // Multiple specifiers exist but the default one isn't used - remove the default specifier!
+          yield fixer.replaceText(declaration, removeImportFromDeclaration(declaration, []));
+        }
+      }
+    }
+
+    yield fixer.insertTextBefore(source.ast.body[0], `/** ${pragma} */\n`);
+
+    const compiledImports = findCompiledImportDeclarations(context);
+
+    if (options.runtime === 'classic' && !findDeclarationWithImport(compiledImports, 'jsx')) {
+      // jsx import is missing time to add one
+      if (compiledImports.length === 0) {
+        // No import exists, add a new one!
+        yield fixer.insertTextBefore(
+          source.ast.body[0],
+          "import { jsx } from '@compiled/react';\n"
+        );
+      } else {
+        // An import exists with no JSX! Let's add one to the first found.
+        const [firstCompiledImport] = compiledImports;
+
+        yield fixer.replaceText(
+          firstCompiledImport,
+          addImportToDeclaration(firstCompiledImport, ['jsx'])
+        );
+      }
+    }
+  };
+}
+
 export const jsxPragmaRule: Rule.RuleModule = {
   meta: {
     docs: {
       url: 'https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/jsx-pragma',
     },
     fixable: 'code',
     messages: {
+      missingPragmaXCSS: 'Applying xcss prop to className requires the jsx pragma in scope.',
       missingPragma: 'To use the `css` prop you must set the {{ pragma }} pragma.',
       preferJsxImportSource:
         'Use of the jsxImportSource pragma (automatic runtime) is preferred over the jsx pragma (classic runtime).',
@@ -121,66 +166,38 @@ export const jsxPragmaRule: Rule.RuleModule = {
         }
       },
 
+      'JSXOpeningElement[name.name=/^[a-z]+$/] > JSXAttribute[name.name=/^className$/]': (
+        node: Rule.Node
+      ) => {
+        if (node.type !== 'JSXAttribute' || jsxPragma || jsxImportSourcePragma) {
+          return;
+        }
+
+        if (
+          node.value?.type === 'JSXExpressionContainer' &&
+          node.value.expression.type === 'Identifier' &&
+          /[Xx]css$/.test(node.value.expression.name)
+        ) {
+          context.report({
+            node,
+            messageId: 'missingPragmaXCSS',
+            fix: createFixer(context, source, options),
+          });
+        }
+      },
+
       JSXAttribute(node: any) {
         if (jsxPragma || jsxImportSourcePragma || node.name.name !== 'css') {
           return;
         }
 
-        const pragma =
-          options.runtime === 'classic' ? '@jsx jsx' : '@jsxImportSource @compiled/react';
-
         context.report({
           messageId: 'missingPragma',
           data: {
             pragma: options.runtime === 'classic' ? 'jsx' : 'jsxImportSource',
           },
           node,
-          *fix(fixer) {
-            const reactImport = findReactDeclarationWithDefaultImport(source);
-            if (reactImport) {
-              const [declaration, defaultImport] = reactImport;
-              const [defaultImportVariable] = context.getDeclaredVariables(defaultImport);
-
-              if (defaultImportVariable && defaultImportVariable.references.length === 0) {
-                if (declaration.specifiers.length === 1) {
-                  // Only the default specifier exists and it isn't used - remove the whole declaration!
-                  yield fixer.remove(declaration);
-                } else {
-                  // Multiple specifiers exist but the default one isn't used - remove the default specifier!
-                  yield fixer.replaceText(
-                    declaration,
-                    removeImportFromDeclaration(declaration, [])
-                  );
-                }
-              }
-            }
-
-            yield fixer.insertTextBefore(source.ast.body[0], `/** ${pragma} */\n`);
-
-            const compiledImports = findCompiledImportDeclarations(context);
-
-            if (
-              options.runtime === 'classic' &&
-              !findDeclarationWithImport(compiledImports, 'jsx')
-            ) {
-              // jsx import is missing time to add one
-              if (compiledImports.length === 0) {
-                // No import exists, add a new one!
-                yield fixer.insertTextBefore(
-                  source.ast.body[0],
-                  "import { jsx } from '@compiled/react';\n"
-                );
-              } else {
-                // An import exists with no JSX! Let's add one to the first found.
-                const [firstCompiledImport] = compiledImports;
-
-                yield fixer.replaceText(
-                  firstCompiledImport,
-                  addImportToDeclaration(firstCompiledImport, ['jsx'])
-                );
-              }
-            }
-          },
+          fix: createFixer(context, source, options),
         });
       },
     };

packages/eslint-plugin/src/rules/local-cx-xcss/index.ts

@@ -38,7 +38,7 @@ export const localCXXCSSRule: Rule.RuleModule = {
           const parentJSXAttribute = getParentJSXAttribute(node);
           const propName = parentJSXAttribute?.name.name.toString();
 
-          if (propName && /[xX]css$/.exec(propName)) {
+          if (propName && /[xX]css$/.test(propName)) {
             return;
           }