From e25a0c62c15ff587a8bbfe2d1bd8474a78198681 Mon Sep 17 00:00:00 2001 From: saberzero1 Date: Mon, 8 Jun 2026 17:29:16 +0200 Subject: [PATCH 1/2] feat: split no-static-styles-assignment messages --- lib/rules/noStaticStylesAssignment.ts | 22 ++++++++++++++-------- tests/noStaticStylesAssignment.test.ts | 20 +++++++++++++------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/lib/rules/noStaticStylesAssignment.ts b/lib/rules/noStaticStylesAssignment.ts index 326ae42..a13d698 100644 --- a/lib/rules/noStaticStylesAssignment.ts +++ b/lib/rules/noStaticStylesAssignment.ts @@ -11,11 +11,15 @@ 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) +// - element.setCssStyles({ '--my-var': 'blue' }) (custom property key in setCssStyles) // // 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 +45,11 @@ 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.", + avoidCustomPropertyInSetCssStyles: + "`setCssStyles` should only be used for standard CSS properties. Use `setCssProps` for CSS custom properties (prefixed with `--`).", }, }, defaultOptions: [], @@ -113,7 +121,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,24 +129,22 @@ 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' })` + // Case 4: `el.setCssStyles({ '--my-var': 'blue' })` — custom properties (--*) belong in setCssProps 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('--')) { + 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" }, + messageId: "avoidCustomPropertyInSetCssStyles", }); break; } diff --git a/tests/noStaticStylesAssignment.test.ts b/tests/noStaticStylesAssignment.test.ts index 538aee7..f23411b 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,22 +98,20 @@ 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' });", + name: "setCssStyles with custom property key is forbidden", + code: "el.setCssStyles({ '--my-var': 'blue' });", errors: [ { - messageId: "avoidStyleAssignment", - data: { property: "el.setCssStyles" }, + messageId: "avoidCustomPropertyInSetCssStyles", } ] } From df0041b20f8af91aaa9c4b37c93cb8ddf81507ec Mon Sep 17 00:00:00 2001 From: saberzero1 Date: Mon, 15 Jun 2026 15:55:28 +0200 Subject: [PATCH 2/2] fix: removed redundant check on setCssStyles() --- lib/rules/noStaticStylesAssignment.ts | 19 ++----------------- tests/noStaticStylesAssignment.test.ts | 10 +--------- 2 files changed, 3 insertions(+), 26 deletions(-) diff --git a/lib/rules/noStaticStylesAssignment.ts b/lib/rules/noStaticStylesAssignment.ts index a13d698..0b5cc4e 100644 --- a/lib/rules/noStaticStylesAssignment.ts +++ b/lib/rules/noStaticStylesAssignment.ts @@ -12,7 +12,6 @@ const ruleCreator = ESLintUtils.RuleCreator( // - element.style.cssText = 'color: red;' // - element.setAttribute('style', 'color: red;') // - element.setCssProps({ 'color': 'blue' }) (non-custom-property key in setCssProps) -// - element.setCssStyles({ '--my-var': 'blue' }) (custom property key in setCssStyles) // // This rule will not flag: // @@ -48,8 +47,7 @@ export default ruleCreator({ "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.", - avoidCustomPropertyInSetCssStyles: - "`setCssStyles` should only be used for standard CSS properties. Use `setCssProps` for CSS custom properties (prefixed with `--`).", + }, }, defaultOptions: [], @@ -136,20 +134,7 @@ export default ruleCreator({ } } - // Case 4: `el.setCssStyles({ '--my-var': 'blue' })` — custom properties (--*) belong in setCssProps - 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: "avoidCustomPropertyInSetCssStyles", - }); - break; - } - } - } + }, }; }, diff --git a/tests/noStaticStylesAssignment.test.ts b/tests/noStaticStylesAssignment.test.ts index f23411b..87f6553 100644 --- a/tests/noStaticStylesAssignment.test.ts +++ b/tests/noStaticStylesAssignment.test.ts @@ -106,14 +106,6 @@ ruleTester.run("no-static-styles-assignment", noInlineStylesRule, { } ] }, - { - name: "setCssStyles with custom property key is forbidden", - code: "el.setCssStyles({ '--my-var': 'blue' });", - errors: [ - { - messageId: "avoidCustomPropertyInSetCssStyles", - } - ] - } + ], });