@compiled/eslint-plugin - npm Package Compare versions

Comparing version 0.8.1 to 0.9.0

dist/configs/recommended.d.ts

@@ -10,3 +10,4 @@ export declare const recommended: {
         '@compiled/no-css-prop-without-css-function': string;
+        '@compiled/no-invalid-css-map': string;
     };
 };

dist/configs/recommended.js

@@ -13,4 +13,5 @@ "use strict";
         '@compiled/no-css-prop-without-css-function': 'error',
+        '@compiled/no-invalid-css-map': 'error',
     },
 };
 //# sourceMappingURL=recommended.js.map

dist/index.d.ts

@@ -10,2 +10,3 @@ export declare const rules: {
     '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;
 };
@@ -22,4 +23,5 @@ export declare const configs: {
             '@compiled/no-css-prop-without-css-function': string;
+            '@compiled/no-invalid-css-map': string;
         };
     };
 };

dist/index.js

@@ -11,2 +11,3 @@ "use strict";
 const no_exported_keyframes_1 = require("./rules/no-exported-keyframes");
+const no_invalid_css_map_1 = require("./rules/no-invalid-css-map");
 const no_keyframes_tagged_template_expression_1 = require("./rules/no-keyframes-tagged-template-expression");
@@ -23,2 +24,3 @@ const no_styled_tagged_template_expression_1 = require("./rules/no-styled-tagged-template-expression");
     'no-css-prop-without-css-function': no_css_prop_without_css_function_1.noCssPropWithoutCssFunctionRule,
+    'no-invalid-css-map': no_invalid_css_map_1.noInvalidCssMapRule,
 };
@@ -25,0 +27,0 @@ exports.configs = {

dist/rules/no-css-prop-without-css-function/index.js

@@ -62,7 +62,11 @@ "use strict";
         const source = context.getSourceCode();
+        // The string that `css` from `@compiled/css` is imported as
+        const cssImportName = (0, ast_to_string_1.getImportedName)(compiledImports, 'css');
         if (compiledImports.length > 0) {
-            // Import found, add the specifier to it
-            const [firstCompiledImport] = compiledImports;
-            const specifiersString = (0, ast_to_string_1.addImportToDeclaration)(firstCompiledImport, ['css']);
-            yield fixer.replaceText(firstCompiledImport, specifiersString);
+            if (!cssImportName) {
+                // Import found, add the specifier to it
+                const [firstCompiledImport] = compiledImports;
+                const specifiersString = (0, ast_to_string_1.addImportToDeclaration)(firstCompiledImport, ['css']);
+                yield fixer.replaceText(firstCompiledImport, specifiersString);
+            }
         }
@@ -73,9 +77,10 @@ else {
         }
+        const cssFunctionName = cssImportName !== null && cssImportName !== void 0 ? 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, ')');
@@ -85,3 +90,3 @@ }
         else {
-            yield fixer.insertTextBefore(node, 'css');
+            yield fixer.insertTextBefore(node, cssFunctionName);
         }
@@ -88,0 +93,0 @@ }

dist/utils/ast-to-string.d.ts

@@ -31,1 +31,14 @@ import type { ImportSpecifier, ImportDeclaration, ImportDefaultSpecifier, ImportNamespaceSpecifier } from 'estree';
 export declare const buildNamedImport: (node: ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier) => string;
+/**
+ * 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 declare const getImportedName: (declarations: ImportDeclaration[], importName: string) => string | undefined;

dist/utils/ast-to-string.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildNamedImport = exports.removeImportFromDeclaration = exports.addImportToDeclaration = exports.buildImportDeclaration = void 0;
+exports.getImportedName = exports.buildNamedImport = exports.removeImportFromDeclaration = exports.addImportToDeclaration = exports.buildImportDeclaration = void 0;
 /**
@@ -56,2 +56,25 @@ * Builds a string representation of an import declaration.
 exports.buildNamedImport = buildNamedImport;
+/**
+ * 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
+ */
+const getImportedName = (declarations, importName) => {
+    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;
+};
+exports.getImportedName = getImportedName;
 //# sourceMappingURL=ast-to-string.js.map

dist/utils/create-no-exported-rule/index.js

@@ -5,3 +5,3 @@ "use strict";
 const constants_1 = require("../constants");
-const validate_definition_1 = require("./validate-definition");
+const check_if_compiled_export_1 = require("./check-if-compiled-export");
 const createNoExportedRule = (isUsage, messageId) => (context) => {
@@ -18,4 +18,4 @@ const { text } = context.getSourceCode();
             }
-            const state = (0, validate_definition_1.validateDefinition)(context, node);
-            if (state.type === 'valid') {
+            const state = (0, check_if_compiled_export_1.checkIfCompiledExport)(context, node);
+            if (!state.isExport) {
                 return;
@@ -33,4 +33,4 @@ }
             }
-            const state = (0, validate_definition_1.validateDefinition)(context, node);
-            if (state.type === 'valid') {
+            const state = (0, check_if_compiled_export_1.checkIfCompiledExport)(context, node);
+            if (!state.isExport) {
                 return;
@@ -37,0 +37,0 @@ }

dist/utils/index.d.ts

 export { createNoExportedRule } from './create-no-exported-rule';
+export { checkIfCompiledExport as validateDefinition } from './create-no-exported-rule/check-if-compiled-export';
 export { createNoTaggedTemplateExpressionRule } from './create-no-tagged-template-expression-rule';
-export { isCss } from './is-css';
-export { isKeyframes } from './is-keyframes';
+export { CssMapObjectChecker, getCssMapObject } from './css-map';
+export { isCss, isCssMap, isKeyframes } from './is-compiled-import';

dist/utils/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isKeyframes = exports.isCss = exports.createNoTaggedTemplateExpressionRule = exports.createNoExportedRule = void 0;
+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");
 Object.defineProperty(exports, "createNoExportedRule", { enumerable: true, get: function () { return create_no_exported_rule_1.createNoExportedRule; } });
+var check_if_compiled_export_1 = require("./create-no-exported-rule/check-if-compiled-export");
+Object.defineProperty(exports, "validateDefinition", { enumerable: true, get: function () { return check_if_compiled_export_1.checkIfCompiledExport; } });
 var create_no_tagged_template_expression_rule_1 = require("./create-no-tagged-template-expression-rule");
 Object.defineProperty(exports, "createNoTaggedTemplateExpressionRule", { enumerable: true, get: function () { return create_no_tagged_template_expression_rule_1.createNoTaggedTemplateExpressionRule; } });
-var is_css_1 = require("./is-css");
-Object.defineProperty(exports, "isCss", { enumerable: true, get: function () { return is_css_1.isCss; } });
-var is_keyframes_1 = require("./is-keyframes");
-Object.defineProperty(exports, "isKeyframes", { enumerable: true, get: function () { return is_keyframes_1.isKeyframes; } });
+var css_map_1 = require("./css-map");
+Object.defineProperty(exports, "CssMapObjectChecker", { enumerable: true, get: function () { return css_map_1.CssMapObjectChecker; } });
+Object.defineProperty(exports, "getCssMapObject", { enumerable: true, get: function () { return css_map_1.getCssMapObject; } });
+var is_compiled_import_1 = require("./is-compiled-import");
+Object.defineProperty(exports, "isCss", { enumerable: true, get: function () { return is_compiled_import_1.isCss; } });
+Object.defineProperty(exports, "isCssMap", { enumerable: true, get: function () { return is_compiled_import_1.isCssMap; } });
+Object.defineProperty(exports, "isKeyframes", { enumerable: true, get: function () { return is_compiled_import_1.isKeyframes; } });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@compiled/eslint-plugin",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
@@ -5,0 +5,0 @@ "homepage": "https://compiledcssinjs.com/docs/pkg-eslint-plugin",

src/configs/recommended.ts

@@ -10,3 +10,4 @@ export const recommended = {
     '@compiled/no-css-prop-without-css-function': 'error',
+    '@compiled/no-invalid-css-map': 'error',
   },
 };

src/index.ts

@@ -8,2 +8,3 @@ import { recommended } from './configs/recommended';
 import { noExportedKeyframesRule } from './rules/no-exported-keyframes';
+import { noInvalidCssMapRule } from './rules/no-invalid-css-map';
 import { noKeyframesTaggedTemplateExpressionRule } from './rules/no-keyframes-tagged-template-expression';
@@ -21,2 +22,3 @@ import { noStyledTaggedTemplateExpressionRule } from './rules/no-styled-tagged-template-expression';
   'no-css-prop-without-css-function': noCssPropWithoutCssFunctionRule,
+  'no-invalid-css-map': noInvalidCssMapRule,
 };
@@ -23,0 +25,0 @@

src/rules/no-css-prop-without-css-function/__tests__/rule.test.ts

@@ -157,2 +157,4 @@ import { outdent } from 'outdent';
       {
+        // Inline object expression without function
+        // with existing css import
         errors: [
@@ -164,2 +166,48 @@ {
         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: [
+          {
+            messageId: 'noCssFunction',
+          },
+        ],
+        code: outdent`
           import React from 'react';
@@ -166,0 +214,0 @@

src/rules/no-css-prop-without-css-function/index.ts

@@ -8,3 +8,7 @@ import type { TSESTree, TSESLint } from '@typescript-eslint/utils';
 } from '../../utils/ast';
-import { addImportToDeclaration, buildImportDeclaration } from '../../utils/ast-to-string';
+import {
+  addImportToDeclaration,
+  buildImportDeclaration,
+  getImportedName,
+} from '../../utils/ast-to-string';
 
@@ -94,8 +98,13 @@ type Q<T> = T extends TSESLint.Scope.Definition
 
+    // 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 {
@@ -109,12 +118,14 @@ // Import not found, add a new one
 
+    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);
     }
@@ -121,0 +132,0 @@ }

src/utils/ast-to-string.ts

@@ -65,1 +65,27 @@ import type {
 };
+
+/**
+ * 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;
+};

src/utils/create-no-exported-rule/index.ts

@@ -5,3 +5,3 @@ import type { Rule, Scope } from 'eslint';
 
-import { validateDefinition } from './validate-definition';
+import { checkIfCompiledExport } from './check-if-compiled-export';
 
@@ -30,4 +30,4 @@ type Node = Rule.Node;
 
-        const state = validateDefinition(context, node);
-        if (state.type === 'valid') {
+        const state = checkIfCompiledExport(context, node);
+        if (!state.isExport) {
           return;
@@ -47,4 +47,4 @@ }
 
-        const state = validateDefinition(context, node);
-        if (state.type === 'valid') {
+        const state = checkIfCompiledExport(context, node);
+        if (!state.isExport) {
           return;
@@ -51,0 +51,0 @@ }

src/utils/index.ts

 export { createNoExportedRule } from './create-no-exported-rule';
+export { checkIfCompiledExport as validateDefinition } from './create-no-exported-rule/check-if-compiled-export';
 export { createNoTaggedTemplateExpressionRule } from './create-no-tagged-template-expression-rule';
-export { isCss } from './is-css';
-export { isKeyframes } from './is-keyframes';
+export { CssMapObjectChecker, getCssMapObject } from './css-map';
+export { isCss, isCssMap, isKeyframes } from './is-compiled-import';

No alert changes

Improved metrics

Total package byte prevSize

330793

increased by18.52%

Number of package files

128

increased by4.92%

Lines of code

8099

increased by17.72%

No dependency changes