@compiled/eslint-plugin - npm Package Compare versions

Comparing version 0.9.3 to 0.9.4

dist/configs/recommended.d.ts

 export declare const recommended: {
     plugins: string[];
     rules: {
+        '@compiled/local-cx-xcss': string;
+        '@compiled/no-css-prop-without-css-function': string;
         '@compiled/no-css-tagged-template-expression': string;
         '@compiled/no-exported-css': string;
         '@compiled/no-exported-keyframes': string;
+        '@compiled/no-invalid-css-map': string;
+        '@compiled/no-js-xcss': string;
         '@compiled/no-keyframes-tagged-template-expression': string;
         '@compiled/no-styled-tagged-template-expression': string;
-        '@compiled/no-css-prop-without-css-function': string;
-        '@compiled/no-invalid-css-map': string;
+        '@compiled/no-suppress-xcss': string;
     };
 };

dist/configs/recommended.js

@@ -7,11 +7,14 @@ "use strict";
     rules: {
+        '@compiled/local-cx-xcss': 'error',
+        '@compiled/no-css-prop-without-css-function': 'error',
         '@compiled/no-css-tagged-template-expression': 'error',
         '@compiled/no-exported-css': 'error',
         '@compiled/no-exported-keyframes': 'error',
+        '@compiled/no-invalid-css-map': 'error',
+        '@compiled/no-js-xcss': 'error',
         '@compiled/no-keyframes-tagged-template-expression': 'error',
         '@compiled/no-styled-tagged-template-expression': 'error',
-        '@compiled/no-css-prop-without-css-function': 'error',
-        '@compiled/no-invalid-css-map': 'error',
+        '@compiled/no-suppress-xcss': 'error',
     },
 };
 //# sourceMappingURL=recommended.js.map

dist/index.d.ts

 export declare const rules: {
     'jsx-pragma': import("eslint").Rule.RuleModule;
+    'local-cx-xcss': import("eslint").Rule.RuleModule;
+    'no-css-prop-without-css-function': import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<string, [], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
     'no-css-tagged-template-expression': import("eslint").Rule.RuleModule;
+    'no-emotion-css': import("eslint").Rule.RuleModule;
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;
-    'no-emotion-css': import("eslint").Rule.RuleModule;
+    'no-invalid-css-map': import("eslint").Rule.RuleModule;
+    'no-js-xcss': import("eslint").Rule.RuleModule;
     'no-keyframes-tagged-template-expression': import("eslint").Rule.RuleModule;
     'no-styled-tagged-template-expression': import("eslint").Rule.RuleModule;
-    'no-css-prop-without-css-function': import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<string, [], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
-    'no-invalid-css-map': import("eslint").Rule.RuleModule;
+    'no-suppress-xcss': import("eslint").Rule.RuleModule;
 };
@@ -16,11 +19,14 @@ export declare const configs: {
         rules: {
+            '@compiled/local-cx-xcss': string;
+            '@compiled/no-css-prop-without-css-function': string;
             '@compiled/no-css-tagged-template-expression': string;
             '@compiled/no-exported-css': string;
             '@compiled/no-exported-keyframes': string;
+            '@compiled/no-invalid-css-map': string;
+            '@compiled/no-js-xcss': string;
             '@compiled/no-keyframes-tagged-template-expression': string;
             '@compiled/no-styled-tagged-template-expression': string;
-            '@compiled/no-css-prop-without-css-function': string;
-            '@compiled/no-invalid-css-map': string;
+            '@compiled/no-suppress-xcss': string;
         };
     };
 };

dist/index.js

@@ -6,2 +6,3 @@ "use strict";
 const jsx_pragma_1 = require("./rules/jsx-pragma");
+const local_cx_xcss_1 = require("./rules/local-cx-xcss");
 const no_css_prop_without_css_function_1 = require("./rules/no-css-prop-without-css-function");
@@ -13,14 +14,19 @@ const no_css_tagged_template_expression_1 = require("./rules/no-css-tagged-template-expression");
 const no_invalid_css_map_1 = require("./rules/no-invalid-css-map");
+const no_js_xcss_1 = require("./rules/no-js-xcss");
 const no_keyframes_tagged_template_expression_1 = require("./rules/no-keyframes-tagged-template-expression");
 const no_styled_tagged_template_expression_1 = require("./rules/no-styled-tagged-template-expression");
+const no_suppress_xcss_1 = require("./rules/no-suppress-xcss");
 exports.rules = {
     'jsx-pragma': jsx_pragma_1.jsxPragmaRule,
+    'local-cx-xcss': local_cx_xcss_1.localCXXCSSRule,
+    'no-css-prop-without-css-function': no_css_prop_without_css_function_1.noCssPropWithoutCssFunctionRule,
     'no-css-tagged-template-expression': no_css_tagged_template_expression_1.noCssTaggedTemplateExpressionRule,
+    'no-emotion-css': no_emotion_css_1.noEmotionCssRule,
     'no-exported-css': no_exported_css_1.noExportedCssRule,
     'no-exported-keyframes': no_exported_keyframes_1.noExportedKeyframesRule,
-    'no-emotion-css': no_emotion_css_1.noEmotionCssRule,
+    'no-invalid-css-map': no_invalid_css_map_1.noInvalidCssMapRule,
+    'no-js-xcss': no_js_xcss_1.noJavaScriptXCSSRule,
     'no-keyframes-tagged-template-expression': no_keyframes_tagged_template_expression_1.noKeyframesTaggedTemplateExpressionRule,
     'no-styled-tagged-template-expression': no_styled_tagged_template_expression_1.noStyledTaggedTemplateExpressionRule,
-    'no-css-prop-without-css-function': no_css_prop_without_css_function_1.noCssPropWithoutCssFunctionRule,
-    'no-invalid-css-map': no_invalid_css_map_1.noInvalidCssMapRule,
+    'no-suppress-xcss': no_suppress_xcss_1.noSuppressXCSS,
 };
@@ -27,0 +33,0 @@ exports.configs = {

dist/rules/jsx-pragma/index.js

@@ -18,2 +18,36 @@ "use strict";
 };
+function createFixer(context, source, options) {
+    return function* fix(fixer) {
+        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, (0, ast_to_string_1.removeImportFromDeclaration)(declaration, []));
+                }
+            }
+        }
+        yield fixer.insertTextBefore(source.ast.body[0], `/** ${pragma} */\n`);
+        const compiledImports = (0, ast_1.findCompiledImportDeclarations)(context);
+        if (options.runtime === 'classic' && !(0, ast_1.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, (0, ast_to_string_1.addImportToDeclaration)(firstCompiledImport, ['jsx']));
+            }
+        }
+    };
+}
 exports.jsxPragmaRule = {
@@ -26,2 +60,3 @@ meta: {
         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.',
@@ -102,2 +137,17 @@ preferJsxImportSource: 'Use of the jsxImportSource pragma (automatic runtime) is preferred over the jsx pragma (classic runtime).',
             },
+            'JSXOpeningElement[name.name=/^[a-z]+$/] > JSXAttribute[name.name=/^className$/]': (node) => {
+                var _a;
+                if (node.type !== 'JSXAttribute' || jsxPragma || jsxImportSourcePragma) {
+                    return;
+                }
+                if (((_a = node.value) === null || _a === void 0 ? void 0 : _a.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) {
@@ -107,3 +157,2 @@ if (jsxPragma || jsxImportSourcePragma || node.name.name !== 'css') {
                 }
-                const pragma = options.runtime === 'classic' ? '@jsx jsx' : '@jsxImportSource @compiled/react';
                 context.report({
@@ -115,34 +164,3 @@ messageId: 'missingPragma',
                     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, (0, ast_to_string_1.removeImportFromDeclaration)(declaration, []));
-                                }
-                            }
-                        }
-                        yield fixer.insertTextBefore(source.ast.body[0], `/** ${pragma} */\n`);
-                        const compiledImports = (0, ast_1.findCompiledImportDeclarations)(context);
-                        if (options.runtime === 'classic' &&
-                            !(0, ast_1.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, (0, ast_to_string_1.addImportToDeclaration)(firstCompiledImport, ['jsx']));
-                            }
-                        }
-                    },
+                    fix: createFixer(context, source, options),
                 });
@@ -149,0 +167,0 @@ },

dist/utils/index.d.ts

@@ -5,2 +5,2 @@ export { createNoExportedRule } from './create-no-exported-rule';
 export { CssMapObjectChecker, getCssMapObject } from './css-map';
-export { isCss, isCssMap, isKeyframes } from './is-compiled-import';
+export { isCss, isCssMap, isKeyframes, isCxFunction } from './is-compiled-import';

dist/utils/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isKeyframes = exports.isCssMap = exports.isCss = exports.getCssMapObject = exports.CssMapObjectChecker = exports.createNoTaggedTemplateExpressionRule = exports.validateDefinition = exports.createNoExportedRule = void 0;
+exports.isCxFunction = exports.isKeyframes = exports.isCssMap = exports.isCss = exports.getCssMapObject = exports.CssMapObjectChecker = exports.createNoTaggedTemplateExpressionRule = exports.validateDefinition = exports.createNoExportedRule = void 0;
 var create_no_exported_rule_1 = require("./create-no-exported-rule");
@@ -17,2 +17,3 @@ Object.defineProperty(exports, "createNoExportedRule", { enumerable: true, get: function () { return create_no_exported_rule_1.createNoExportedRule; } });
 Object.defineProperty(exports, "isKeyframes", { enumerable: true, get: function () { return is_compiled_import_1.isKeyframes; } });
+Object.defineProperty(exports, "isCxFunction", { enumerable: true, get: function () { return is_compiled_import_1.isCxFunction; } });
 //# sourceMappingURL=index.js.map

dist/utils/is-compiled-import.d.ts

@@ -6,4 +6,5 @@ import type { Rule, Scope } from 'eslint';
 export declare const isCss: CompiledNameChecker;
+export declare const isCxFunction: CompiledNameChecker;
 export declare const isCssMap: CompiledNameChecker;
 export declare const isKeyframes: CompiledNameChecker;
 export {};

dist/utils/is-compiled-import.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isKeyframes = exports.isCssMap = exports.isCss = void 0;
+exports.isKeyframes = exports.isCssMap = exports.isCxFunction = exports.isCss = void 0;
 const constants_1 = require("./constants");
@@ -21,4 +21,5 @@ const isImportSpecifierWrapper = (name) => {
 exports.isCss = isCompiledImport('css');
+exports.isCxFunction = isCompiledImport('cx');
 exports.isCssMap = isCompiledImport('cssMap');
 exports.isKeyframes = isCompiledImport('keyframes');
 //# sourceMappingURL=is-compiled-import.js.map

package.json

 {
   "name": "@compiled/eslint-plugin",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
@@ -24,4 +24,4 @@ "homepage": "https://compiledcssinjs.com/docs/pkg-eslint-plugin",
     "@babel/eslint-parser": "^7.21.8",
-    "@types/estree": "^1.0.1",
-    "@types/estree-jsx": "^1.0.0",
+    "@types/estree": "^1.0.3",
+    "@types/estree-jsx": "^1.0.2",
     "@typescript-eslint/parser": "^5.59.8",
@@ -28,0 +28,0 @@ "eslint": "^8.41.0",

src/configs/recommended.ts

 export const recommended = {
   plugins: ['@compiled'],
   rules: {
+    '@compiled/local-cx-xcss': 'error',
+    '@compiled/no-css-prop-without-css-function': 'error',
     '@compiled/no-css-tagged-template-expression': 'error',
     '@compiled/no-exported-css': 'error',
     '@compiled/no-exported-keyframes': 'error',
+    '@compiled/no-invalid-css-map': 'error',
+    '@compiled/no-js-xcss': 'error',
     '@compiled/no-keyframes-tagged-template-expression': 'error',
     '@compiled/no-styled-tagged-template-expression': 'error',
-    '@compiled/no-css-prop-without-css-function': 'error',
-    '@compiled/no-invalid-css-map': 'error',
+    '@compiled/no-suppress-xcss': 'error',
   },
 };

src/index.ts

 import { recommended } from './configs/recommended';
 import { jsxPragmaRule } from './rules/jsx-pragma';
+import { localCXXCSSRule } from './rules/local-cx-xcss';
 import { noCssPropWithoutCssFunctionRule } from './rules/no-css-prop-without-css-function';
@@ -9,15 +10,20 @@ import { noCssTaggedTemplateExpressionRule } from './rules/no-css-tagged-template-expression';
 import { noInvalidCssMapRule } from './rules/no-invalid-css-map';
+import { noJavaScriptXCSSRule } from './rules/no-js-xcss';
 import { noKeyframesTaggedTemplateExpressionRule } from './rules/no-keyframes-tagged-template-expression';
 import { noStyledTaggedTemplateExpressionRule } from './rules/no-styled-tagged-template-expression';
+import { noSuppressXCSS } from './rules/no-suppress-xcss';
 
 export const rules = {
   'jsx-pragma': jsxPragmaRule,
+  'local-cx-xcss': localCXXCSSRule,
+  'no-css-prop-without-css-function': noCssPropWithoutCssFunctionRule,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpressionRule,
+  'no-emotion-css': noEmotionCssRule,
   'no-exported-css': noExportedCssRule,
   'no-exported-keyframes': noExportedKeyframesRule,
-  'no-emotion-css': noEmotionCssRule,
+  'no-invalid-css-map': noInvalidCssMapRule,
+  'no-js-xcss': noJavaScriptXCSSRule,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpressionRule,
   'no-styled-tagged-template-expression': noStyledTaggedTemplateExpressionRule,
-  'no-css-prop-without-css-function': noCssPropWithoutCssFunctionRule,
-  'no-invalid-css-map': noInvalidCssMapRule,
+  'no-suppress-xcss': noSuppressXCSS,
 };
@@ -24,0 +30,0 @@

src/rules/jsx-pragma/__tests__/rule.test.ts

@@ -10,2 +10,16 @@ import { tester } from '../../../test-utils';
     `,
+    `
+      <AnotherComponent className={xcss} />
+    `,
+    `
+      <div className={anythingElse} />
+    `,
+    `
+      /** @jsxImportSource @compiled/react */
+      <div className={xcss} />
+    `,
+    `
+      /** @jsxImportSource @compiled/react */
+      <div className={innerXcss} />
+    `,
     {
@@ -29,2 +43,22 @@ code: `
     {
+      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' }} />`,
@@ -31,0 +65,0 @@ output: `/** @jsx jsx */

src/rules/jsx-pragma/index.ts

@@ -30,2 +30,46 @@ import type { Rule, SourceCode } from 'eslint';
 
+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 = {
@@ -38,2 +82,3 @@ meta: {
     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.',
@@ -126,2 +171,22 @@ preferJsxImportSource:
 
+      '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) {
@@ -132,5 +197,2 @@ if (jsxPragma || jsxImportSourcePragma || node.name.name !== 'css') {
 
-        const pragma =
-          options.runtime === 'classic' ? '@jsx jsx' : '@jsxImportSource @compiled/react';
-
         context.report({
@@ -142,48 +204,3 @@ messageId: 'missingPragma',
           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),
         });
@@ -190,0 +207,0 @@ },

src/utils/index.ts

@@ -5,2 +5,2 @@ export { createNoExportedRule } from './create-no-exported-rule';
 export { CssMapObjectChecker, getCssMapObject } from './css-map';
-export { isCss, isCssMap, isKeyframes } from './is-compiled-import';
+export { isCss, isCssMap, isKeyframes, isCxFunction } from './is-compiled-import';

src/utils/is-compiled-import.ts

@@ -31,3 +31,4 @@ import type { Rule, Scope } from 'eslint';
 export const isCss = isCompiledImport('css');
+export const isCxFunction = isCompiledImport('cx');
 export const isCssMap = isCompiledImport('cssMap');
 export const isKeyframes = isCompiledImport('keyframes');

No alert changes

Improved metrics

Total package byte prevSize

358091

increased by7.49%

Number of package files

146

increased by14.06%

Lines of code

8781

increased by7.68%

No dependency changes