feat: add react-dom/no-string-style-prop rule, closes #1170 (#1171)

Signed-off-by: REL1CX <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: Rel1cx

apps/website/content/docs/rules/meta.json

@@ -76,6 +76,7 @@
     "dom-no-render",
     "dom-no-render-return-value",
     "dom-no-script-url",
+    "dom-no-string-style-prop",
     "dom-no-unknown-property",
     "dom-no-unsafe-iframe-sandbox",
     "dom-no-unsafe-target-blank",

apps/website/content/docs/rules/overview.mdx

@@ -108,6 +108,7 @@ The `jsx-*` rules check for issues exclusive to JSX syntax, which are absent fro
 | [`no-render`](./dom-no-render)                                                                   | 2️⃣ |   `🔄`    | Replaces usages of `ReactDom.render()` with `createRoot(node).render()`              |  >=18.0.0   |
 | [`no-render-return-value`](./dom-no-render-return-value)                                         | 2️⃣ |           | Disallow the return value of `ReactDOM.render`                                       |             |
 | [`no-script-url`](./dom-no-script-url)                                                           | 1️⃣ |           | Disallow `javascript:` URLs as attribute values                                      |             |
+| [`no-string-style-prop`](./dom-no-string-style-prop)                                             | 2️⃣ |           | Disallow string values for the `style` prop                                          |             |
 | [`no-unknown-property`](./dom-no-unknown-property)                                               | 0️⃣ | `🔧` `⚙️` | Disallow unknown `DOM` property                                                      |             |
 | [`no-unsafe-iframe-sandbox`](./dom-no-unsafe-iframe-sandbox)                                     | 1️⃣ |           | Enforces `sandbox` attribute for `iframe` elements is not set to unsafe combinations |             |
 | [`no-unsafe-target-blank`](./dom-no-unsafe-target-blank)                                         | 1️⃣ |   `🔧`    | Disallow `target="_blank"` without `rel="noreferrer noopener"`                       |             |

packages/plugins/eslint-plugin-react-dom/src/configs/recommended.ts

@@ -15,6 +15,7 @@ export const rules = {
   "react-dom/no-render": "error",
   "react-dom/no-render-return-value": "error",
   "react-dom/no-script-url": "warn",
+  "react-dom/no-string-style-prop": "error",
   "react-dom/no-unsafe-iframe-sandbox": "warn",
   "react-dom/no-unsafe-target-blank": "warn",
   "react-dom/no-use-form-state": "error",

packages/plugins/eslint-plugin-react-dom/src/plugin.ts

@@ -10,6 +10,7 @@ import noNamespace from "./rules/no-namespace";
 import noRender from "./rules/no-render";
 import noRenderReturnValue from "./rules/no-render-return-value";
 import noScriptUrl from "./rules/no-script-url";
+import noStringStyleProp from "./rules/no-string-style-prop";
 import noUnknownProperty from "./rules/no-unknown-property";
 import noUnsafeIframeSandbox from "./rules/no-unsafe-iframe-sandbox";
 import noUnsafeTargetBlank from "./rules/no-unsafe-target-blank";
@@ -33,6 +34,7 @@ export const plugin = {
     "no-render": noRender,
     "no-render-return-value": noRenderReturnValue,
     "no-script-url": noScriptUrl,
+    "no-string-style-prop": noStringStyleProp,
     "no-unknown-property": noUnknownProperty,
     "no-unsafe-iframe-sandbox": noUnsafeIframeSandbox,
     "no-unsafe-target-blank": noUnsafeTargetBlank,

packages/plugins/eslint-plugin-react-dom/src/rules/no-string-style-prop.md

@@ -0,0 +1,51 @@
+---
+title: no-string-style-prop
+---
+
+**Full Name in `eslint-plugin-react-dom`**
+
+```sh copy
+react-dom/no-string-style-prop
+```
+
+**Full Name in `@eslint-react/eslint-plugin`**
+
+```sh copy
+@eslint-react/dom/no-string-style-prop
+```
+
+**Presets**
+
+- `dom`
+- `recommended`
+
+## Description
+
+Disallow the use of string style prop in JSX. Use an object instead.
+
+## Examples
+
+### Before
+
+```tsx
+import React from "react";
+
+function MyComponent() {
+  return <div style="color: red;" />;
+}
+```
+
+### After
+
+```tsx
+import React from "react";
+
+function MyComponent() {
+  return <div style={{ color: "red" }} />;
+}
+```
+
+## Implementation
+
+- [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom/src/rules/no-string-style-prop.ts)
+- [Test source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom/src/rules/no-string-style-prop.spec.ts)

packages/plugins/eslint-plugin-react-dom/src/rules/no-string-style-prop.spec.ts

@@ -0,0 +1,58 @@
+import tsx from "dedent";
+
+import { allValid, ruleTester } from "../../../../../test";
+import rule, { RULE_NAME } from "./no-string-style-prop";
+
+ruleTester.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: tsx`
+        function Component() {
+          return <div style="color: red;" />;
+        }
+      `,
+      errors: [
+        {
+          messageId: "noStringStyleProp",
+        },
+      ],
+    },
+    {
+      code: tsx`
+        function Component() {
+          return <div style={"color: red;"} />;
+        }
+      `,
+      errors: [
+        {
+          messageId: "noStringStyleProp",
+        },
+      ],
+    },
+    {
+      code: tsx`
+        function Component() {
+          return <div style={\`color: red;\`} />;
+        }
+      `,
+      errors: [
+        {
+          messageId: "noStringStyleProp",
+        },
+      ],
+    },
+  ],
+  valid: [
+    ...allValid,
+    tsx`
+      function Component() {
+        return <div style={{ color: "red" }} />;
+      }
+    `,
+    tsx`
+      function Component() {
+        return <div style={someStyle} />;
+      }
+    `,
+  ],
+});

packages/plugins/eslint-plugin-react-dom/src/rules/no-string-style-prop.ts

@@ -0,0 +1,62 @@
+import type { RuleContext, RuleFeature } from "@eslint-react/kit";
+import type { TSESTree } from "@typescript-eslint/types";
+import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
+import type { CamelCase } from "string-ts";
+
+import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
+import { createRule } from "../utils";
+
+export const RULE_NAME = "no-string-style-prop";
+
+export const RULE_FEATURES = [] as const satisfies RuleFeature[];
+
+export type MessageID = CamelCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallows the use of string style prop.",
+      [Symbol.for("rule_features")]: RULE_FEATURES,
+    },
+    messages: {
+      noStringStyleProp: "Do not use string style prop. Use an object instead.",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create,
+  defaultOptions: [],
+});
+
+export function create(context: RuleContext<MessageID, []>): RuleListener {
+  return {
+    JSXAttribute(node) {
+      if (node.name.name !== "style") return;
+      const styleText = getAttributeValueText(context, node.value);
+      if (styleText == null) return;
+      context.report({
+        messageId: "noStringStyleProp",
+        node,
+      });
+    },
+  };
+}
+
+function getAttributeValueText(context: RuleContext, node: TSESTree.JSXAttribute["value"]) {
+  if (node == null) return null;
+  switch (true) {
+    case node.type === T.Literal
+      && typeof node.value === "string":
+      return context.sourceCode.getText(node);
+    case node.type === T.JSXExpressionContainer
+      && node.expression.type === T.Literal
+      && typeof node.expression.value === "string":
+      return context.sourceCode.getText(node.expression);
+    case node.type === T.JSXExpressionContainer
+      && node.expression.type === T.TemplateLiteral:
+      return context.sourceCode.getText(node.expression);
+    default:
+      return null;
+  }
+}

packages/plugins/eslint-plugin/src/configs/recommended-typescript.ts

@@ -6,6 +6,7 @@ export const name = "@eslint-react/recommended-typescript";
 
 export const rules = {
   ...recommended.rules,
+  "@eslint-react/dom/no-string-style-prop": "off",
   "@eslint-react/dom/no-unknown-property": "off",
   "@eslint-react/jsx-no-duplicate-props": "off",
   "@eslint-react/jsx-uses-react": "off",