@griffel/eslint-plugin - npm Package Compare versions

Comparing version 1.6.4 to 1.7.0

package.json

 {
   "name": "@griffel/eslint-plugin",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "description": "ESLint plugin with lint rules for Griffel",
@@ -11,3 +11,3 @@ "license": "MIT",
   "dependencies": {
-    "@typescript-eslint/utils": "^7.9.0",
+    "@typescript-eslint/utils": "^7.18.0",
     "csstype": "^3.1.3",
@@ -20,3 +20,4 @@ "tslib": "^2.1.0"
   "main": "./src/index.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "types": "./src/index.d.ts"
 }

README.md

@@ -26,3 +26,3 @@ # ESLint plugin for Griffel
 
-This plugin exports recommended configuration that enforce good practices, but you can use only uses that are required for your use case:
+This plugin exports recommended configuration that enforce good practices, but you can choose to use only the ones that are necessary for your use case:
 
@@ -46,7 +46,9 @@ ```json
 
-| Name                                                                     | Description                                                                                                     | 🔧  |
-| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | --- |
-| [`@griffel/hook-naming`](./src/rules/hook-naming.md)                     | Ensure that hooks returned by the `makeStyles()` function start with "use"                                      | ❌  |
-| [`@griffel/no-shorthands`](./src/rules/no-shorthands.md)                 | Enforce usage of CSS longhands                                                                                  | ✅  |
-| [`@griffel/styles-file`](./src/rules/styles-file.md)                     | Ensures that all `makeStyles()` and `makeResetStyles()` calls are placed in a `.styles.js` or `.styles.ts` file | ❌  |
-| [`@griffel/pseudo-element-naming`](./src/rules/pseudo-element-naming.md) | Ensures that all Pseudo Elements start with two colons                                                          | ✅  |
+| Name                                                                                       | Description                                                                                                     | 🔧  |
+| ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | --- |
+| [`@griffel/hook-naming`](./src/rules/hook-naming.md)                                       | Ensure that hooks returned by the `makeStyles()` function start with "use"                                      | ❌  |
+| [`@griffel/no-invalid-shorthand-arguments`](./src/rules/no-invalid-shorthand-arguments.md) | All shorthands must not use space separators, and instead pass in multiple arguments                            | ✅  |
+| [`@griffel/no-shorthands`](./src/rules/no-shorthands.md)                                   | Enforce usage of CSS longhands                                                                                  | ✅  |
+| [`@griffel/styles-file`](./src/rules/styles-file.md)                                       | Ensures that all `makeStyles()` and `makeResetStyles()` calls are placed in a `.styles.js` or `.styles.ts` file | ❌  | limitations) | ❌ |
+| [`@griffel/pseudo-element-naming`](./src/rules/pseudo-element-naming.md)                   | Ensures that all Pseudo Elements start with two colons                                                          | ✅  |
+| [`@griffel/top-level-styles`](./src/rules/top-level-styles.md)                    | Ensures that all `makeStyles()`, `makeResetStyles()` and `makeStaticStyles()` calls are written in the top level of a file to discourage developer misuse.  | ❌  |

src/rules/styles-file.js

@@ -7,30 +7,6 @@ "use strict";
 const getDocsUrl_1 = require("../utils/getDocsUrl");
-const MATCHING_PACKAGES = new Set(['@fluentui/react-components', '@griffel/core', '@griffel/react']);
 const STYLES_FILE_PATTERN = /^.*\.(styles)\.[j|t]s$/;
-function isMatchingPackage(packageName) {
-    return MATCHING_PACKAGES.has(packageName);
-}
 function isStylesFile(fileName) {
     return STYLES_FILE_PATTERN.test(fileName);
 }
-/**
- * @param node - import node from AST
- * @returns true if makeStyles is imported, or if the entire library is imported. Otherwise returns false
- */
-function isMakeStylesImport(node) {
-    return (isMatchingPackage(node.source.value) &&
-        node.specifiers.filter(specifier => {
-            // import * as ... from
-            if (specifier.type === 'ImportNamespaceSpecifier') {
-                return true;
-            }
-            if ('imported' in specifier) {
-                return (specifier.imported.name === 'makeStyles' || // import { makeStyles } from
-                    specifier.imported.name === 'makeStaticStyles' || // import { makeStaticStyles } from
-                    specifier.imported.name === 'makeResetStyles' // import { makeResetStyles } from
-                );
-            }
-            return false;
-        }).length > 0);
-}
 exports.RULE_NAME = 'styles-file';
@@ -58,3 +34,3 @@ exports.stylesFileRule = utils_1.ESLintUtils.RuleCreator(getDocsUrl_1.getDocsUrl)({
                 if (!isMakeStylesImported) {
-                    isMakeStylesImported = isMakeStylesImport(node);
+                    isMakeStylesImported = (0, helpers_1.isMakeStylesImport)(node);
                 }
@@ -61,0 +37,0 @@ },

src/utils/getShorthandValue.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.joinShorthandArguments = exports.getShorthandValue = void 0;
+exports.getShorthandValue = getShorthandValue;
+exports.joinShorthandArguments = joinShorthandArguments;
 const helpers_1 = require("./helpers");
@@ -25,7 +26,5 @@ function getShorthandValue(node, sourceCode) {
 }
-exports.getShorthandValue = getShorthandValue;
 function joinShorthandArguments(args, quote) {
     return args.map(arg => quote + arg + quote).join(', ');
 }
-exports.joinShorthandArguments = joinShorthandArguments;
 //# sourceMappingURL=getShorthandValue.js.map

src/utils/helpers.d.ts

@@ -21,2 +21,8 @@ import type { TSESTree } from '@typescript-eslint/utils';
 export declare function isMakeStylesCallExpression(node: TSESTree.CallExpression, ...functionNames: [MakeStylesName, ...MakeStylesName[]]): boolean;
+export declare function getMakeStylesCallExpression(node: TSESTree.CallExpression, ...functionNames: [MakeStylesName, ...MakeStylesName[]]): string | null;
+/**
+ * @param node - import node from AST
+ * @returns true if makeStyles is imported, or if the entire library is imported. Otherwise returns false
+ */
+export declare function isMakeStylesImport(node: TSESTree.ImportDeclaration): boolean;
 export {};

src/utils/helpers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMakeStylesCallExpression = exports.isStringLiteral = exports.isTemplateLiteral = exports.isProperty = exports.isObjectExpression = exports.isMemberExpression = exports.isLiteral = exports.isIdentifier = void 0;
+exports.isTemplateLiteral = exports.isProperty = exports.isObjectExpression = exports.isMemberExpression = exports.isLiteral = exports.isIdentifier = void 0;
+exports.isStringLiteral = isStringLiteral;
+exports.isMakeStylesCallExpression = isMakeStylesCallExpression;
+exports.getMakeStylesCallExpression = getMakeStylesCallExpression;
+exports.isMakeStylesImport = isMakeStylesImport;
 const utils_1 = require("@typescript-eslint/utils");
@@ -14,3 +18,2 @@ exports.isIdentifier = utils_1.ASTUtils.isIdentifier;
 }
-exports.isStringLiteral = isStringLiteral;
 /**
@@ -23,20 +26,47 @@ * Checks if the given node is a `makeStyles` call expression.
 function isMakeStylesCallExpression(node, ...functionNames) {
+    return getMakeStylesCallExpression(node, ...functionNames) !== null;
+}
+function getMakeStylesCallExpression(node, ...functionNames) {
     const { callee } = node;
     const names = new Set(functionNames);
-    if ((0, exports.isIdentifier)(callee)) {
+    if ((0, exports.isIdentifier)(callee) && names.has(callee.name)) {
         // makeStyles({})
-        return names.has(callee.name);
+        return callee.name;
     }
     else if ((0, exports.isMemberExpression)(callee)) {
-        return (
         // something.makeStyles({})
-        ((0, exports.isIdentifier)(callee.property) && names.has(callee.property.name)) ||
-            // something['makeStyles']({})
-            (isStringLiteral(callee.property) && names.has(callee.property.value)));
+        if ((0, exports.isIdentifier)(callee.property) && names.has(callee.property.name)) {
+            return callee.property.name;
+        }
+        // something['makeStyles']({})
+        if (isStringLiteral(callee.property) && names.has(callee.property.value)) {
+            return callee.property.value;
+        }
     }
-    else {
-        return false;
-    }
+    return null;
 }
-exports.isMakeStylesCallExpression = isMakeStylesCallExpression;
+const MATCHING_PACKAGES = new Set(['@fluentui/react-components', '@griffel/core', '@griffel/react']);
+function isMatchingPackage(packageName) {
+    return MATCHING_PACKAGES.has(packageName);
+}
+/**
+ * @param node - import node from AST
+ * @returns true if makeStyles is imported, or if the entire library is imported. Otherwise returns false
+ */
+function isMakeStylesImport(node) {
+    return (isMatchingPackage(node.source.value) &&
+        node.specifiers.filter(specifier => {
+            // import * as ... from
+            if (specifier.type === 'ImportNamespaceSpecifier') {
+                return true;
+            }
+            if ('imported' in specifier) {
+                return (specifier.imported.name === 'makeStyles' || // import { makeStyles } from
+                    specifier.imported.name === 'makeStaticStyles' || // import { makeStaticStyles } from
+                    specifier.imported.name === 'makeResetStyles' // import { makeResetStyles } from
+                );
+            }
+            return false;
+        }).length > 0);
+}
 //# sourceMappingURL=helpers.js.map

src/utils/shorthandToArguments.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shorthandToArguments = exports.UNSUPPORTED_CSS_PROPERTIES = exports.buildShorthandSplitter = void 0;
+exports.UNSUPPORTED_CSS_PROPERTIES = void 0;
+exports.buildShorthandSplitter = buildShorthandSplitter;
+exports.shorthandToArguments = shorthandToArguments;
 /**
@@ -66,3 +68,2 @@ * Returns a function to split a string into an array of CSS functions and values.
 }
-exports.buildShorthandSplitter = buildShorthandSplitter;
 // This collection is a map simply for faster access when checking if a CSS property is unsupported
@@ -118,3 +119,2 @@ // @griffel/core has the same definition, but ESLint plugin should not depend on it
 }
-exports.shorthandToArguments = shorthandToArguments;
 //# sourceMappingURL=shorthandToArguments.js.map

No alert changes

Improved metrics

Total package byte prevSize

52363

9.67%

Number of package files

39

8.33%

Lines of code

710

9.4%

Number of lines in readme file

53

3.92%

Dependency changes

• Updated

  @typescript-eslint/utils@^7.18.0