@griffel/eslint-plugin - npm Package Compare versions

Comparing version 1.5.2 to 1.6.0

package.json

 {
   "name": "@griffel/eslint-plugin",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "ESLint plugin with lint rules for Griffel",
@@ -5,0 +5,0 @@ "license": "MIT",

src/configs/recommended.d.ts

@@ -5,2 +5,3 @@ export declare const recommendedConfig: {
         '@griffel/hook-naming': string;
+        '@griffel/no-invalid-shorthand-argument': string;
         '@griffel/no-shorthands': string;
@@ -7,0 +8,0 @@ '@griffel/pseudo-element-naming': string;

src/configs/recommended.js

@@ -5,2 +5,3 @@ export const recommendedConfig = {
         '@griffel/hook-naming': 'error',
+        '@griffel/no-invalid-shorthand-argument': 'error',
         '@griffel/no-shorthands': 'error',
@@ -7,0 +8,0 @@ '@griffel/pseudo-element-naming': 'error',

src/index.d.ts

@@ -8,2 +8,3 @@ import type { ESLintUtils } from '@typescript-eslint/utils';
                 '@griffel/hook-naming': string;
+                '@griffel/no-invalid-shorthand-argument': string;
                 '@griffel/no-shorthands': string;
@@ -10,0 +11,0 @@ '@griffel/pseudo-element-naming': string;

src/index.js

 import { recommendedConfig } from './configs/recommended';
 import { hookNamingRule } from './rules/hook-naming';
+import { noInvalidShorthandArgumentRule } from './rules/no-invalid-shorthand-argument';
 import { noShorthandsRule } from './rules/no-shorthands';
@@ -8,2 +9,3 @@ import { pseudoElementNamingRule } from './rules/pseudo-element-naming';
     'hook-naming': hookNamingRule,
+    'no-invalid-shorthand-argument': noInvalidShorthandArgumentRule,
     'no-shorthands': noShorthandsRule,
@@ -10,0 +12,0 @@ 'styles-file': stylesFileRule,

src/rules/no-shorthands.js

 import { ESLintUtils } from '@typescript-eslint/utils';
-import { isIdentifier, isLiteral, isMakeStylesCallExpression, isObjectExpression, isProperty } from '../utils/helpers';
-import { buildShorthandSplitter } from '../utils/buildShorthandSplitter';
+import { isIdentifier, isMakeStylesCallExpression, isObjectExpression, isProperty } from '../utils/helpers';
+import { UNSUPPORTED_CSS_PROPERTIES, shorthandToArguments } from '../utils/shorthandToArguments';
 import { getDocsUrl } from '../utils/getDocsUrl';
+import { getShorthandValue, joinShorthandArguments } from '../utils/getShorthandValue';
 export const RULE_NAME = 'no-shorthands';
-// This collection is a map simply for faster access when checking if a CSS property is unsupported
-// @griffel/core has the same definition, but ESLint plugin should not depend on it
-const UNSUPPORTED_CSS_PROPERTIES = {
-    all: true,
-    animation: true,
-    animationRange: true,
-    background: true,
-    backgroundPosition: true,
-    border: true,
-    borderBlock: true,
-    borderBlockEnd: true,
-    borderBlockStart: true,
-    borderBottom: true,
-    borderColor: true,
-    borderImage: true,
-    borderInline: true,
-    borderInlineEnd: true,
-    borderInlineStart: true,
-    borderLeft: true,
-    borderRadius: true,
-    borderRight: true,
-    borderStyle: true,
-    borderTop: true,
-    borderWidth: true,
-    caret: true,
-    columns: true,
-    columnRule: true,
-    containIntrinsicSize: true,
-    container: true,
-    flex: true,
-    flexFlow: true,
-    font: true,
-    gap: true,
-    grid: true,
-    gridArea: true,
-    gridColumn: true,
-    gridRow: true,
-    gridTemplate: true,
-    inset: true,
-    insetBlock: true,
-    insetInline: true,
-    lineClamp: true,
-    listStyle: true,
-    margin: true,
-    marginBlock: true,
-    marginInline: true,
-    mask: true,
-    maskBorder: true,
-    motion: true,
-    offset: true,
-    outline: true,
-    overflow: true,
-    overscrollBehavior: true,
-    padding: true,
-    paddingBlock: true,
-    paddingInline: true,
-    placeItems: true,
-    placeContent: true,
-    placeSelf: true,
-    scrollMargin: true,
-    scrollMarginBlock: true,
-    scrollMarginInline: true,
-    scrollPadding: true,
-    scrollPaddingBlock: true,
-    scrollPaddingInline: true,
-    scrollSnapMargin: true,
-    scrollTimeline: true,
-    textDecoration: true,
-    textEmphasis: true,
-    transition: true,
-    viewTimeline: true,
-};
-const pxSplitter = buildShorthandSplitter({ numberUnit: 'px' });
-// Transforms shorthand string into args for griffel shorthands.<name>() function.
-const SHORTHAND_FUNCTIONS = {
-    border: pxSplitter,
-    borderLeft: pxSplitter,
-    borderBottom: pxSplitter,
-    borderRight: pxSplitter,
-    borderTop: pxSplitter,
-    borderColor: pxSplitter,
-    borderStyle: pxSplitter,
-    borderRadius: pxSplitter,
-    borderWidth: pxSplitter,
-    // Instead of converting to pixels, convert to flex-grow value.
-    flex: buildShorthandSplitter({ numberUnit: '' }),
-    gap: pxSplitter,
-    // Split every `/` character (and trim whitespace)
-    gridArea: buildShorthandSplitter({ separator: '/' }),
-    margin: pxSplitter,
-    marginBlock: pxSplitter,
-    marginInline: pxSplitter,
-    padding: pxSplitter,
-    paddingBlock: pxSplitter,
-    paddingInline: pxSplitter,
-    overflow: pxSplitter,
-    inset: pxSplitter,
-    outline: pxSplitter,
-    textDecoration: pxSplitter,
-};
 function findShorthandProperties(node, isRoot = false, result = []) {
@@ -137,2 +38,3 @@ for (const propertyNode of node.properties) {
     create(context) {
+        const sourceCode = context.getSourceCode();
         return {
@@ -146,8 +48,12 @@ CallExpression(node) {
                             const propertyNode = shorthandProperty.parent;
-                            let autoFixArguments = null;
-                            if (isLiteral(propertyNode.value)) {
-                                const { value } = propertyNode.value;
-                                const shorthandToArguments = SHORTHAND_FUNCTIONS[shorthandProperty.name];
-                                if (shorthandToArguments !== undefined && (typeof value === 'string' || typeof value === 'number')) {
-                                    autoFixArguments = shorthandToArguments(value);
+                            const shorthandLiteral = getShorthandValue(propertyNode.value, sourceCode);
+                            // Try to create an auto-fixer for the shorthand property.
+                            let fix;
+                            if (shorthandLiteral) {
+                                const autoFixArguments = shorthandToArguments(shorthandProperty.name, shorthandLiteral.value);
+                                if (autoFixArguments != null) {
+                                    fix = fixer => {
+                                        const args = joinShorthandArguments(autoFixArguments, shorthandLiteral.quote);
+                                        return fixer.replaceText(propertyNode, `...shorthands.${shorthandProperty.name}(${args})`);
+                                    };
                                 }
@@ -158,8 +64,3 @@ }
                                 messageId: 'shorthandFound',
-                                fix: autoFixArguments != null
-                                    ? fixer => {
-                                        const args = autoFixArguments.map(arg => `'${arg}'`).join(', ');
-                                        return fixer.replaceText(propertyNode, `...shorthands.${shorthandProperty.name}(${args})`);
-                                    }
-                                    : undefined,
+                                fix,
                             });
@@ -166,0 +67,0 @@ });

src/utils/helpers.d.ts

@@ -11,2 +11,3 @@ import type { TSESTree } from '@typescript-eslint/utils';
 export declare const isProperty: IsHelper<AST_NODE_TYPES.Property>;
+export declare const isTemplateLiteral: IsHelper<AST_NODE_TYPES.TemplateLiteral>;
 export declare function isStringLiteral(node: TSESTree.Node | null | undefined): node is TSESTree.StringLiteral;
@@ -13,0 +14,0 @@ type MakeStylesName = 'makeStyles' | 'makeStaticStyles' | 'makeResetStyles';

src/utils/helpers.js

@@ -7,2 +7,3 @@ import { AST_NODE_TYPES, ASTUtils } from '@typescript-eslint/utils';
 export const isProperty = ASTUtils.isNodeOfType(AST_NODE_TYPES.Property);
+export const isTemplateLiteral = ASTUtils.isNodeOfType(AST_NODE_TYPES.TemplateLiteral);
 export function isStringLiteral(node) {
@@ -9,0 +10,0 @@ return isLiteral(node) && typeof node.value === 'string';

No alert changes

Improved metrics

Total package byte prevSize

48379

21.98%

Number of package files

36

20%

Lines of code

669

23.43%

No dependency changes