Add no-non-optimized-style-attributes rule

README.md

@@ -268,6 +268,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/button-has-type](https://ota-meshi.github.io/eslint-plugin-svelte/rules/button-has-type/) | disallow usage of button without an explicit type attribute |  |
 | [@ota-meshi/svelte/no-at-debug-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/) | disallow the use of `{@debug}` | :star: |
+| [@ota-meshi/svelte/no-non-optimized-style-attributes](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-non-optimized-style-attributes/) | disallow style attributes that cannot be optimized |  |
 | [@ota-meshi/svelte/no-unused-svelte-ignore](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/) | disallow unused svelte-ignore comments | :star: |
 | [@ota-meshi/svelte/no-useless-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :wrench: |
 

docs/rules.md

@@ -41,6 +41,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/button-has-type](./rules/button-has-type.md) | disallow usage of button without an explicit type attribute |  |
 | [@ota-meshi/svelte/no-at-debug-tags](./rules/no-at-debug-tags.md) | disallow the use of `{@debug}` | :star: |
+| [@ota-meshi/svelte/no-non-optimized-style-attributes](./rules/no-non-optimized-style-attributes.md) | disallow style attributes that cannot be optimized |  |
 | [@ota-meshi/svelte/no-unused-svelte-ignore](./rules/no-unused-svelte-ignore.md) | disallow unused svelte-ignore comments | :star: |
 | [@ota-meshi/svelte/no-useless-mustaches](./rules/no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: |
 

docs/rules/no-non-optimized-style-attributes.md

@@ -0,0 +1,110 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "@ota-meshi/svelte/no-non-optimized-style-attributes"
+description: "disallow style attributes that cannot be optimized"
+---
+
+# @ota-meshi/svelte/no-non-optimized-style-attributes
+
+> disallow style attributes that cannot be optimized
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+This rule reports `style` attributes written in a format that cannot be optimized.
+
+Svelte parses the content written in the style attribute and tries to optimize it. (See [https://github.com/sveltejs/svelte/pull/810](https://github.com/sveltejs/svelte/pull/810))  
+If Svelte can be successfully optimized, Svelte can minimize the number of re-renders.
+
+e.g.
+
+template:
+
+```html
+<div
+  style="
+    font-size: 12px;
+    color: {color};
+    transform: translate({x}px, {y}px);
+  "
+/>
+```
+
+compiled:
+
+```js
+div.style.setProperty("font-size", "12px") // font-size style is not updated once it is initially set.
+div.style.setProperty("color", color) // color style is updated only when color variable is updated.
+div.style.setProperty("transform", `translate(${x}px, ${y}px)`) // transform style is updated only when x, or y variables is updated.
+```
+
+However, if the optimization fails, it will be re-rendered triggered by the update of all variables described in the style attribute.
+
+e.g.
+
+template:
+
+```html
+<script>
+  $: transformStyle = `transform: translate(${x}px, ${y}px)`
+</script>
+
+<div
+  style="
+    font-size: 12px;
+    color: {color};
+    {transformStyle}
+  "
+/>
+```
+
+compiled:
+
+```js
+// If any of variables color, x, or y are updated, all styles will be updated.
+div.setAttribute(
+  "style",
+  `font-size: 12px; color: ${color}; ${/* transformStyle */ ctx[0]}`,
+)
+```
+
+Examples:
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint @ota-meshi/svelte/no-non-optimized-style-attributes: "error" */
+  let color = "blue"
+  let x = 12,
+    y = 12
+</script>
+
+<!-- ✓ GOOD -->
+<div
+  style="font-size: 12px; color: {color}; transform: translate({x}px, {y}px);"
+/>
+<div style={pointerEvents === false ? "pointer-events:none;" : ""} />
+
+<!-- ✗ BAD -->
+<div style="font-size: 12px; color: {color}; {transformStyle}" />
+<div style:pointer-events={pointerEvents ? null : "none"} />
+
+<div style="font-size: 12px; /* comment */ color: {color};" />
+<div style="font-size: 12px; {key}: red;" />
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/no-non-optimized-style-attributes.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/no-non-optimized-style-attributes.ts)

src/rules/no-non-optimized-style-attributes.ts

@@ -0,0 +1,75 @@
+import { createRule } from "../utils"
+import { parseStyleAttributeValue } from "../utils/css-utils"
+
+export default createRule("no-non-optimized-style-attributes", {
+  meta: {
+    docs: {
+      description: "disallow style attributes that cannot be optimized",
+      category: "Best Practices",
+      recommended: false,
+    },
+    schema: [],
+    messages: {
+      shorthand:
+        "It cannot be optimized because style attribute is specified using shorthand.",
+      comment: "It cannot be optimized because contains comments.",
+      interpolationKey:
+        "It cannot be optimized because property of style declaration contain interpolation.",
+      complex: "It cannot be optimized because too complex.",
+    },
+    type: "suggestion",
+  },
+  create(context) {
+    return {
+      SvelteShorthandAttribute(node) {
+        if (node.key.name !== "style") {
+          return
+        }
+
+        context.report({
+          node,
+          messageId: "shorthand",
+        })
+      },
+      SvelteAttribute(node) {
+        if (node.key.name !== "style") {
+          return
+        }
+        const root = parseStyleAttributeValue(node, context)
+        if (!root) {
+          return
+        }
+
+        for (const child of root.nodes) {
+          if (child.type === "decl") {
+            if (child.unsafe) {
+              context.report({
+                node,
+                loc: child.loc,
+                messageId: "complex",
+              })
+            } else if (child.prop.name.includes("{")) {
+              context.report({
+                node,
+                loc: child.prop.loc,
+                messageId: "interpolationKey",
+              })
+            }
+          } else if (child.type === "comment") {
+            context.report({
+              node,
+              loc: child.loc,
+              messageId: "comment",
+            })
+          } else {
+            context.report({
+              node,
+              loc: child.loc,
+              messageId: "complex",
+            })
+          }
+        }
+      },
+    }
+  },
+})

src/utils/rules.ts

@@ -13,6 +13,7 @@ import noDupeElseIfBlocks from "../rules/no-dupe-else-if-blocks"
 import noDupeStyleProperties from "../rules/no-dupe-style-properties"
 import noDynamicSlotName from "../rules/no-dynamic-slot-name"
 import noInnerDeclarations from "../rules/no-inner-declarations"
+import noNonOptimizedStyleAttributes from "../rules/no-non-optimized-style-attributes"
 import noNotFunctionHandler from "../rules/no-not-function-handler"
 import noObjectInTextMustaches from "../rules/no-object-in-text-mustaches"
 import noShorthandStylePropertyOverrides from "../rules/no-shorthand-style-property-overrides"
@@ -43,6 +44,7 @@ export const rules = [
   noDupeStyleProperties,
   noDynamicSlotName,
   noInnerDeclarations,
+  noNonOptimizedStyleAttributes,
   noNotFunctionHandler,
   noObjectInTextMustaches,
   noShorthandStylePropertyOverrides,

tests/fixtures/rules/no-non-optimized-style-attributes/invalid/comment01-errors.json

@@ -0,0 +1,7 @@
+[
+  {
+    "message": "It cannot be optimized because contains comments.",
+    "line": 5,
+    "column": 30
+  }
+]

tests/fixtures/rules/no-non-optimized-style-attributes/invalid/comment01-input.svelte

@@ -0,0 +1,5 @@
+<script>
+  let color = "blue"
+</script>
+
+<div style="font-size: 12px; /* comment */ color: {color};" />

tests/fixtures/rules/no-non-optimized-style-attributes/invalid/key01-errors.json

@@ -0,0 +1,7 @@
+[
+  {
+    "message": "It cannot be optimized because property of style declaration contain interpolation.",
+    "line": 6,
+    "column": 30
+  }
+]

tests/fixtures/rules/no-non-optimized-style-attributes/invalid/key01-input.svelte

@@ -0,0 +1,6 @@
+<script>
+  let color = "blue"
+  let key = "color"
+</script>
+
+<div style="font-size: 12px; {key}: {color};" />

tests/fixtures/rules/no-non-optimized-style-attributes/invalid/test01-errors.json

@@ -0,0 +1,22 @@
+[
+  {
+    "message": "It cannot be optimized because too complex.",
+    "line": 14,
+    "column": 12
+  },
+  {
+    "message": "It cannot be optimized because too complex.",
+    "line": 17,
+    "column": 46
+  },
+  {
+    "message": "It cannot be optimized because contains comments.",
+    "line": 20,
+    "column": 30
+  },
+  {
+    "message": "It cannot be optimized because property of style declaration contain interpolation.",
+    "line": 21,
+    "column": 30
+  }
+]

tests/fixtures/rules/no-non-optimized-style-attributes/invalid/test01-input.svelte

@@ -0,0 +1,21 @@
+<script>
+  let color = "blue"
+  let x = 12,
+    y = 12
+  $: transformStyle = `transform: translate(${x}px, ${y}px)`
+  let pointerEvents = false
+  let key = "color"
+</script>
+
+<!-- ✓ GOOD -->
+<div
+  style="font-size: 12px; color: {color}; transform: translate({x}px, {y}px);"
+/>
+<div style={pointerEvents === false ? "pointer-events:none;" : ""} />
+
+<!-- ✗ BAD -->
+<div style="font-size: 12px; color: {color}; {transformStyle}" />
+<div style:pointer-events={pointerEvents ? null : "none"} />
+
+<div style="font-size: 12px; /* comment */ color: {color};" />
+<div style="font-size: 12px; {key}: red;" />

tests/fixtures/rules/no-non-optimized-style-attributes/valid/test01-input.svelte

@@ -0,0 +1,14 @@
+<script>
+  let color = "blue"
+  let x = 12,
+    y = 12
+  $: transformStyle = `transform: translate(${x}px, ${y}px)`
+</script>
+
+<!-- ✓ GOOD -->
+<div
+  style="font-size: 12px; color: {color}; transform: translate({x}px, {y}px);"
+/>
+
+<!-- ✗ BAD -->
+<div not-style="font-size: 12px; color: {color}; {transformStyle}" />

tests/src/rules/no-non-optimized-style-attributes.ts

@@ -0,0 +1,16 @@
+import { RuleTester } from "eslint"
+import rule from "../../../src/rules/no-non-optimized-style-attributes"
+import { loadTestCases } from "../../utils/utils"
+
+const tester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+})
+
+tester.run(
+  "no-non-optimized-style-attributes",
+  rule as any,
+  loadTestCases("no-non-optimized-style-attributes"),
+)