diff --git a/lib/rules/noStaticStylesAssignment.ts b/lib/rules/noStaticStylesAssignment.ts index 326ae42..0b5cc4e 100644 --- a/lib/rules/noStaticStylesAssignment.ts +++ b/lib/rules/noStaticStylesAssignment.ts @@ -11,11 +11,14 @@ const ruleCreator = ESLintUtils.RuleCreator( // - element.style.setProperty('color', 'red') // - element.style.cssText = 'color: red;' // - element.setAttribute('style', 'color: red;') +// - element.setCssProps({ 'color': 'blue' }) (non-custom-property key in setCssProps) // // This rule will not flag: // // - element.style.width = myWidth; (assignment from a variable) // - element.style.transform = `translateX(${offset}px)`; (assignment from a template literal with expressions) +// - element.setCssProps({ '--my-var': 'blue' }) (custom property in setCssProps is correct usage) +// - element.setCssStyles({ 'color': 'blue' }) (standard property in setCssStyles is correct usage) // Checks if a node is a MemberExpression accessing the 'style' property. // e.g., `el.style` or `this.containerEl.style` @@ -41,7 +44,10 @@ export default ruleCreator({ schema: [], messages: { avoidStyleAssignment: - "Avoid setting styles directly via `{{property}}`. Use CSS classes for better theming and maintainability. Use the `setCssProps` function if the CSS properties need to change dynamically.", + "Avoid setting styles directly via `{{property}}`. Use CSS classes for better theming and maintainability. Use `setCssProps` for dynamic CSS custom properties or `setCssStyles` for dynamic standard properties.", + avoidNonCustomPropertyInSetCssProps: + "`setCssProps` should only be used for CSS custom properties (prefixed with `--`). Use `setCssStyles` for standard CSS properties, or CSS classes for static styles.", + }, }, defaultOptions: [], @@ -113,7 +119,7 @@ export default ruleCreator({ } } - // Case 3: `el.style.setCssProps({ 'color': 'blue' })` + // Case 3: `el.setCssProps({ 'color': 'blue' })` — only custom properties (--*) belong here if ( propertyName === "setCssProps" && node.arguments[0].type === TSESTree.AST_NODE_TYPES.ObjectExpression ) { @@ -121,29 +127,14 @@ export default ruleCreator({ if (property.type === TSESTree.AST_NODE_TYPES.Property && property.key.type === TSESTree.AST_NODE_TYPES.Literal && typeof property.key.value === 'string' && !property.key.value.startsWith('--')) { context.report({ node, - messageId: "avoidStyleAssignment", - data: { property: "el.setCssProps" }, + messageId: "avoidNonCustomPropertyInSetCssProps", }); break; } } } - // Case 4: `el.style.setCssStyles({ 'color': 'blue' })` - if ( - propertyName === "setCssStyles" && node.arguments[0].type === TSESTree.AST_NODE_TYPES.ObjectExpression - ) { - for (const property of node.arguments[0].properties) { - if (property.type === TSESTree.AST_NODE_TYPES.Property && property.key.type === TSESTree.AST_NODE_TYPES.Literal && typeof property.key.value === 'string' && !property.key.value.startsWith('--')) { - context.report({ - node, - messageId: "avoidStyleAssignment", - data: { property: "el.setCssStyles" }, - }); - break; - } - } - } + }, }; }, diff --git a/tests/noStaticStylesAssignment.test.ts b/tests/noStaticStylesAssignment.test.ts index 538aee7..87f6553 100644 --- a/tests/noStaticStylesAssignment.test.ts +++ b/tests/noStaticStylesAssignment.test.ts @@ -37,6 +37,14 @@ ruleTester.run("no-static-styles-assignment", noInlineStylesRule, { name: "setCssProps with computed key is allowed", code: "el.setCssProps({ [someKey]: someValue });", }, + { + name: "setCssStyles with standard property is allowed", + code: "el.setCssStyles({ 'color': 'blue' });", + }, + { + name: "setCssStyles with computed key is allowed", + code: "el.setCssStyles({ [someKey]: someValue });", + }, ], invalid: [ { @@ -90,24 +98,14 @@ ruleTester.run("no-static-styles-assignment", noInlineStylesRule, { ], }, { - name: "setCssProps with non-variable property is forbidden", + name: "setCssProps with non-custom-property key is forbidden", code: "el.setCssProps({ 'color': 'blue' });", errors: [ { - messageId: "avoidStyleAssignment", - data: { property: "el.setCssProps" }, + messageId: "avoidNonCustomPropertyInSetCssProps", } ] }, - { - name: "setCssStyles with non-variable property is forbidden", - code: "el.setCssStyles({ 'color': 'blue' });", - errors: [ - { - messageId: "avoidStyleAssignment", - data: { property: "el.setCssStyles" }, - } - ] - } + ], });