@griffel/eslint-plugin
Advanced tools
Comparing version
{ | ||
"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" | ||
} |
@@ -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. | ❌ | |
@@ -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 @@ }, |
"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 |
@@ -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 {}; |
"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 |
"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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
52363
9.67%39
8.33%710
9.4%53
3.92%