Better style-prop errors, relax numericStyleValue to only warn on <length-percentage> properties. Fixes #15.

Author: joshwilsonvu

README.md

@@ -94,7 +94,7 @@ would like to use.
 | ✔ | 🔧 | [solid/prefer-for](docs/prefer-for.md) | Enforce using Solid's `<For />` component for mapping an array to JSX elements. |
 | ✔ | 🔧 | [solid/prefer-show](docs/prefer-show.md) | Enforce using Solid's `<Show />` component for conditionally showing content. |
 | ✔ |  | [solid/reactivity](docs/reactivity.md) | Enforce that reactive expressions (props, signals, memos, etc.) are only used in tracked scopes; otherwise, they won't update the view as expected. |
-| ✔ | 🔧 | [solid/style-prop](docs/style-prop.md) | Require CSS properties in the `style` prop to be valid and kebab-cased (ex. 'font-size'), not camel-cased (ex. 'fontSize') like in React, and that property values are strings, not numbers with implicit 'px' units. |
+| ✔ | 🔧 | [solid/style-prop](docs/style-prop.md) | Require CSS properties in the `style` prop to be valid and kebab-cased (ex. 'font-size'), not camel-cased (ex. 'fontSize') like in React, and that property values with dimensions are strings, not numbers with implicit 'px' units. |
 <!-- AUTO-GENERATED-CONTENT:END -->
 
 ## Versioning

docs/style-prop.md

@@ -1,6 +1,6 @@
 <!-- AUTO-GENERATED-CONTENT:START (HEADER) -->
 # solid/style-prop
-Require CSS properties in the `style` prop to be valid and kebab-cased (ex. 'font-size'), not camel-cased (ex. 'fontSize') like in React, and that property values are strings, not numbers with implicit 'px' units.
+Require CSS properties in the `style` prop to be valid and kebab-cased (ex. 'font-size'), not camel-cased (ex. 'fontSize') like in React, and that property values with dimensions are strings, not numbers with implicit 'px' units.
 This rule is **a warning** by default.
 
 [View source](../src/rules/style-prop.ts) · [View tests](../test/rules/style-prop.test.ts)
@@ -30,9 +30,9 @@ let el = <div style={{ fontSize: "10px" }}>Hello, world!</div>;
 // after eslint --fix:
 let el = <div style={{ "font-size": "10px" }}>Hello, world!</div>;
 
-let el = <div style={{ backgroundColor: "10px" }}>Hello, world!</div>;
+let el = <div style={{ backgroundColor: "red" }}>Hello, world!</div>;
 // after eslint --fix:
-let el = <div style={{ "background-color": "10px" }}>Hello, world!</div>;
+let el = <div style={{ "background-color": "red" }}>Hello, world!</div>;
 
 let el = <div style={{ "-webkitAlignContent": "center" }}>Hello, world!</div>;
 // after eslint --fix:
@@ -72,10 +72,6 @@ let el = <div style={{ "font-size": 10 }}>Hello, world!</div>;
 
 let el = <div style={{ "margin-top": -10 }}>Hello, world!</div>;
 
-let el = <div style={{ padding: 0 }}>Hello, world!</div>;
-// after eslint --fix:
-let el = <div style={{ padding: "0" }}>Hello, world!</div>;
- 
 ```
 
 ### Valid Examples
@@ -99,8 +95,14 @@ let el = <div style={{ "font-size": "10px" }}>Hello, world!</div>;
 
 let el = <div style={{ "font-size": "0" }}>Hello, world!</div>;
 
+let el = <div style={{ "font-size": 0 }}>Hello, world!</div>;
+
 let el = <div STYLE={{ fontSize: 10 }}>Hello, world!</div>;
 
+let el = <div style={{ "flex-grow": 1 }}>Hello, world!</div>;
+
+let el = <div style={{ "--custom-width": 1 }}>Hello, world!</div>;
+
 /* eslint solid/style-prop: ["error", { "allowString": true }] */
 let el = <div style="color: red;" />;
 

src/rules/style-prop.ts

@@ -6,8 +6,10 @@ import { propName } from "jsx-ast-utils";
 
 const { getPropertyName, getStaticValue } = ASTUtils;
 
+const lengthPercentageRegex = /\b(?:width|height|margin|padding|border-width|font-size)\b/i;
+
 const rule: TSESLint.RuleModule<
-  "invalidStyleProp" | "numericStyleValue" | "zeroStyleValue" | "stringStyle",
+  "kebabStyleProp" | "invalidStyleProp" | "numericStyleValue" | "stringStyle",
   [{ styleProps?: [string, ...Array<string>]; allowString?: boolean }?]
 > = {
   meta: {
@@ -16,7 +18,7 @@ const rule: TSESLint.RuleModule<
       recommended: "warn",
       description:
         "Require CSS properties in the `style` prop to be valid and kebab-cased (ex. 'font-size'), not camel-cased (ex. 'fontSize') like in React, " +
-        "and that property values are strings, not numbers with implicit 'px' units.",
+        "and that property values with dimensions are strings, not numbers with implicit 'px' units.",
       url: "https://github.com/joshwilsonvu/eslint-plugin-solid/blob/main/docs/style-prop.md",
     },
     fixable: "code",
@@ -44,10 +46,10 @@ const rule: TSESLint.RuleModule<
       },
     ],
     messages: {
+      kebabStyleProp: "Use {{ kebabName }} instead of {{ name }}.",
       invalidStyleProp: "{{ name }} is not a valid CSS property.",
       numericStyleValue:
-        'CSS property values should be strings only, but {{ value }} is a number; convert to string and add a unit like "px" if appropriate.',
-      zeroStyleValue: 'A CSS property value of 0 should be passed as the string "0".',
+        'This CSS property value should be a string with a unit; Solid does not automatically append a "px" unit.',
       stringStyle: "Use an object for the style prop instead of a string.",
     },
   },
@@ -94,26 +96,26 @@ const rule: TSESLint.RuleModule<
             const name: string | null = getPropertyName(prop, context.getScope());
             if (name && !name.startsWith("--") && !allCssPropertiesSet.has(name)) {
               const kebabName: string = kebabCase(name);
-              context.report({
-                node: prop.key,
-                messageId: "invalidStyleProp",
-                data: { name },
+              if (allCssPropertiesSet.has(kebabName)) {
                 // if it's not valid simply because it's camelCased instead of kebab-cased, provide a fix
-                fix: allCssPropertiesSet.has(kebabName)
-                  ? (fixer) => fixer.replaceText(prop.key, `"${kebabName}"`) // wrap kebab name in quotes to be a valid object key
-                  : undefined,
-              });
-            }
-            // catches numeric values (ex. { "font-size": 12 }) and suggests quoting or appending 'px'
-            const value: unknown = getStaticValue(prop.value)?.value;
-            if (typeof value === "number") {
-              if (value === 0) {
                 context.report({
-                  node: prop.value,
-                  messageId: "zeroStyleValue",
-                  fix: (fixer) => fixer.replaceText(prop.value, '"0"'),
+                  node: prop.key,
+                  messageId: "kebabStyleProp",
+                  data: { name, kebabName },
+                  fix: (fixer) => fixer.replaceText(prop.key, `"${kebabName}"`), // wrap kebab name in quotes to be a valid object key
                 });
               } else {
+                context.report({
+                  node: prop.key,
+                  messageId: "invalidStyleProp",
+                  data: { name },
+                });
+              }
+            } else if (!name || (!name.startsWith("--") && lengthPercentageRegex.test(name))) {
+              // catches numeric values (ex. { "font-size": 12 }) for common <length-percentage> peroperties
+              // and suggests quoting or appending 'px'
+              const value: unknown = getStaticValue(prop.value)?.value;
+              if (typeof value === "number" && value !== 0) {
                 context.report({
                   node: prop.value,
                   messageId: "numericStyleValue",

test/rules/style-prop.test.ts

@@ -9,7 +9,10 @@ export const cases = run("style-prop", rule, {
     `let el = <div style={{ "-webkit-align-content": "center" }}>Hello, world!</div>`,
     `let el = <div style={{ "font-size": "10px" }}>Hello, world!</div>`,
     `let el = <div style={{ "font-size": "0" }}>Hello, world!</div>`,
+    `let el = <div style={{ "font-size": 0 }}>Hello, world!</div>`,
     `let el = <div STYLE={{ fontSize: 10 }}>Hello, world!</div>`,
+    `let el = <div style={{ "flex-grow": 1 }}>Hello, world!</div>`,
+    `let el = <div style={{ "--custom-width": 1 }}>Hello, world!</div>`,
     {
       code: `let el = <div style="color: red;" />`,
       options: [{ allowString: true }],
@@ -30,17 +33,22 @@ export const cases = run("style-prop", rule, {
   invalid: [
     {
       code: `let el = <div style={{ fontSize: '10px' }}>Hello, world!</div>`,
-      errors: [{ messageId: "invalidStyleProp", data: { name: "fontSize" } }],
+      errors: [{ messageId: "kebabStyleProp", data: { name: "fontSize", kebabName: "font-size" } }],
       output: `let el = <div style={{ "font-size": '10px' }}>Hello, world!</div>`,
     },
     {
-      code: `let el = <div style={{ backgroundColor: '10px' }}>Hello, world!</div>`,
-      errors: [{ messageId: "invalidStyleProp", data: { name: "backgroundColor" } }],
-      output: `let el = <div style={{ "background-color": '10px' }}>Hello, world!</div>`,
+      code: `let el = <div style={{ backgroundColor: 'red' }}>Hello, world!</div>`,
+      errors: [
+        {
+          messageId: "kebabStyleProp",
+          data: { name: "backgroundColor", kebabName: "background-color" },
+        },
+      ],
+      output: `let el = <div style={{ "background-color": 'red' }}>Hello, world!</div>`,
     },
     {
       code: `let el = <div style={{ "-webkitAlignContent": "center" }}>Hello, world!</div>`,
-      errors: [{ messageId: "invalidStyleProp" }],
+      errors: [{ messageId: "kebabStyleProp" }],
       output: `let el = <div style={{ "-webkit-align-content": "center" }}>Hello, world!</div>`,
     },
     {
@@ -54,13 +62,13 @@ export const cases = run("style-prop", rule, {
     {
       code: `let el = <div css={{ fontSize: '10px' }}>Hello, world!</div>`,
       options: [{ styleProps: ["style", "css"] }],
-      errors: [{ messageId: "invalidStyleProp", data: { name: "fontSize" } }],
+      errors: [{ messageId: "kebabStyleProp", data: { name: "fontSize", kebabName: "font-size" } }],
       output: `let el = <div css={{ "font-size": '10px' }}>Hello, world!</div>`,
     },
     {
       code: `let el = <div css={{ fontSize: '10px' }}>Hello, world!</div>`,
       options: [{ styleProps: ["css"] }],
-      errors: [{ messageId: "invalidStyleProp", data: { name: "fontSize" } }],
+      errors: [{ messageId: "kebabStyleProp", data: { name: "fontSize", kebabName: "font-size" } }],
       output: `let el = <div css={{ "font-size": '10px' }}>Hello, world!</div>`,
     },
     {
@@ -94,10 +102,5 @@ export const cases = run("style-prop", rule, {
       code: `let el = <div style={{ 'margin-top': -10 }}>Hello, world!</div>`,
       errors: [{ messageId: "numericStyleValue" }],
     },
-    {
-      code: `let el = <div style={{ padding: 0 }}>Hello, world!</div>`,
-      errors: [{ messageId: "zeroStyleValue" }],
-      output: `let el = <div style={{ padding: "0" }}>Hello, world!</div>`,
-    },
   ],
 });