Skip to content

Commit e943ad3

Browse files
ota-meshiota-meshi
authored
Rename no-non-optimized-style-attributes to require-optimized-style-attribute (#130)
1 parent 718dc03 commit e943ad3

16 files changed

+301
-163
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,9 +268,9 @@ These rules relate to better ways of doing things to help you avoid problems:
268268
|:--------|:------------|:---|
269269
| [@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 | |
270270
| [@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: |
271-
| [@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 | |
272271
| [@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: |
273272
| [@ota-meshi/svelte/no-useless-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :wrench: |
273+
| [@ota-meshi/svelte/require-optimized-style-attribute](https://ota-meshi.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/) | require style attributes that can be optimized | |
274274

275275
## Stylistic Issues
276276

@@ -314,6 +314,7 @@ These rules relate to this plugin works:
314314
| Rule ID | Replaced by |
315315
|:--------|:------------|
316316
| [@ota-meshi/svelte/dollar-prefixed-store-uses-vars](https://ota-meshi.github.io/eslint-plugin-svelte/rules/dollar-prefixed-store-uses-vars/) | (no replacement) |
317+
| [@ota-meshi/svelte/no-non-optimized-style-attributes](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-non-optimized-style-attributes/) | [@ota-meshi/svelte/require-optimized-style-attribute](https://ota-meshi.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/.md) |
317318

318319
<!--RULES_TABLE_END-->
319320
<!--RULES_SECTION_END-->

‎docs/rules.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ These rules relate to better ways of doing things to help you avoid problems:
4141
|:--------|:------------|:---|
4242
| [@ota-meshi/svelte/button-has-type](./rules/button-has-type.md) | disallow usage of button without an explicit type attribute | |
4343
| [@ota-meshi/svelte/no-at-debug-tags](./rules/no-at-debug-tags.md) | disallow the use of `{@debug}` | :star: |
44-
| [@ota-meshi/svelte/no-non-optimized-style-attributes](./rules/no-non-optimized-style-attributes.md) | disallow style attributes that cannot be optimized | |
4544
| [@ota-meshi/svelte/no-unused-svelte-ignore](./rules/no-unused-svelte-ignore.md) | disallow unused svelte-ignore comments | :star: |
4645
| [@ota-meshi/svelte/no-useless-mustaches](./rules/no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: |
46+
| [@ota-meshi/svelte/require-optimized-style-attribute](./rules/require-optimized-style-attribute.md) | require style attributes that can be optimized | |
4747

4848
## Stylistic Issues
4949

@@ -87,3 +87,4 @@ These rules relate to this plugin works:
8787
| Rule ID | Replaced by |
8888
|:--------|:------------|
8989
| [@ota-meshi/svelte/dollar-prefixed-store-uses-vars](./rules/dollar-prefixed-store-uses-vars.md) | (no replacement) |
90+
| [@ota-meshi/svelte/no-non-optimized-style-attributes](./rules/no-non-optimized-style-attributes.md) | [@ota-meshi/svelte/require-optimized-style-attribute](./rules/require-optimized-style-attribute.md.md) |

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

Lines changed: 3 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,106 +2,15 @@
22
pageClass: "rule-details"
33
sidebarDepth: 0
44
title: "@ota-meshi/svelte/no-non-optimized-style-attributes"
5-
description: "disallow style attributes that cannot be optimized"
5+
description: "require style attributes that can be optimized"
66
since: "v0.31.0"
77
---
88

99
# @ota-meshi/svelte/no-non-optimized-style-attributes
1010

11-
> disallow style attributes that cannot be optimized
11+
> require style attributes that can be optimized
1212
13-
## :book: Rule Details
14-
15-
This rule reports `style` attributes written in a format that cannot be optimized.
16-
17-
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))
18-
If Svelte can be successfully optimized, Svelte can minimize the number of re-renders.
19-
20-
e.g.
21-
22-
template:
23-
24-
```html
25-
<div
26-
style="
27-
font-size: 12px;
28-
color: {color};
29-
transform: translate({x}px, {y}px);
30-
"
31-
/>
32-
```
33-
34-
compiled:
35-
36-
```js
37-
div.style.setProperty("font-size", "12px") // font-size style is not updated once it is initially set.
38-
div.style.setProperty("color", color) // color style is updated only when color variable is updated.
39-
div.style.setProperty("transform", `translate(${x}px, ${y}px)`) // transform style is updated only when x, or y variables are updated.
40-
```
41-
42-
However, if the optimization fails, it will be re-rendered triggered by the update of all variables described in the style attribute.
43-
44-
e.g.
45-
46-
template:
47-
48-
```html
49-
<script>
50-
$: transformStyle = `transform: translate(${x}px, ${y}px)`
51-
</script>
52-
53-
<div
54-
style="
55-
font-size: 12px;
56-
color: {color};
57-
{transformStyle}
58-
"
59-
/>
60-
```
61-
62-
compiled:
63-
64-
```js
65-
// If any of variables color, x, or y are updated, all styles will be updated.
66-
div.setAttribute(
67-
"style",
68-
`font-size: 12px; color: ${color}; ${/* transformStyle */ ctx[0]}`,
69-
)
70-
```
71-
72-
Examples:
73-
74-
<ESLintCodeBlock>
75-
76-
<!--eslint-skip-->
77-
78-
```svelte
79-
<script>
80-
/* eslint @ota-meshi/svelte/no-non-optimized-style-attributes: "error" */
81-
let color = "blue"
82-
let x = 12,
83-
y = 12
84-
</script>
85-
86-
<!-- ✓ GOOD -->
87-
<div
88-
style="font-size: 12px; color: {color}; transform: translate({x}px, {y}px);"
89-
/>
90-
<div style:pointer-events={pointerEvents ? null : "none"} />
91-
92-
<!-- ✗ BAD -->
93-
<div style="font-size: 12px; color: {color}; {transformStyle}" />
94-
<div style={pointerEvents === false ? "pointer-events:none;" : ""} />
95-
96-
<div style="font-size: 12px; /* comment */ color: {color};" />
97-
<div style="font-size: 12px; {key}: red;" />
98-
```
99-
100-
</ESLintCodeBlock>
101-
102-
## :wrench: Options
103-
104-
Nothing.
13+
- :warning: This rule was **deprecated** and replaced by [@ota-meshi/svelte/require-optimized-style-attribute](require-optimized-style-attribute.md) rule.
10514

10615
## :rocket: Version
10716

‎docs/rules/require-optimized-style-attribute.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
pageClass: "rule-details"
3+
sidebarDepth: 0
4+
title: "@ota-meshi/svelte/require-optimized-style-attribute"
5+
description: "require style attributes that can be optimized"
6+
---
7+
8+
# @ota-meshi/svelte/require-optimized-style-attribute
9+
10+
> require style attributes that can be optimized
11+
12+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
13+
14+
## :book: Rule Details
15+
16+
This rule reports `style` attributes written in a format that cannot be optimized.
17+
18+
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))
19+
If Svelte can be successfully optimized, Svelte can minimize the number of re-renders.
20+
21+
e.g.
22+
23+
template:
24+
25+
```html
26+
<div
27+
style="
28+
font-size: 12px;
29+
color: {color};
30+
transform: translate({x}px, {y}px);
31+
"
32+
/>
33+
```
34+
35+
compiled:
36+
37+
```js
38+
div.style.setProperty("font-size", "12px") // font-size style is not updated once it is initially set.
39+
div.style.setProperty("color", color) // color style is updated only when color variable is updated.
40+
div.style.setProperty("transform", `translate(${x}px, ${y}px)`) // transform style is updated only when x, or y variables are updated.
41+
```
42+
43+
However, if the optimization fails, it will be re-rendered triggered by the update of all variables described in the style attribute.
44+
45+
e.g.
46+
47+
template:
48+
49+
```html
50+
<script>
51+
$: transformStyle = `transform: translate(${x}px, ${y}px)`
52+
</script>
53+
54+
<div
55+
style="
56+
font-size: 12px;
57+
color: {color};
58+
{transformStyle}
59+
"
60+
/>
61+
```
62+
63+
compiled:
64+
65+
```js
66+
// If any of variables color, x, or y are updated, all styles will be updated.
67+
div.setAttribute(
68+
"style",
69+
`font-size: 12px; color: ${color}; ${/* transformStyle */ ctx[0]}`,
70+
)
71+
```
72+
73+
Examples:
74+
75+
<ESLintCodeBlock>
76+
77+
<!--eslint-skip-->
78+
79+
```svelte
80+
<script>
81+
/* eslint @ota-meshi/svelte/no-non-optimized-style-attributes: "error" */
82+
let color = "blue"
83+
let x = 12,
84+
y = 12
85+
</script>
86+
87+
<!-- ✓ GOOD -->
88+
<div
89+
style="font-size: 12px; color: {color}; transform: translate({x}px, {y}px);"
90+
/>
91+
<div style:pointer-events={pointerEvents ? null : "none"} />
92+
93+
<!-- ✗ BAD -->
94+
<div style="font-size: 12px; color: {color}; {transformStyle}" />
95+
<div style={pointerEvents === false ? "pointer-events:none;" : ""} />
96+
97+
<div style="font-size: 12px; /* comment */ color: {color};" />
98+
<div style="font-size: 12px; {key}: red;" />
99+
```
100+
101+
</ESLintCodeBlock>
102+
103+
## :wrench: Options
104+
105+
Nothing.
106+
107+
## :mag: Implementation
108+
109+
- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/require-optimized-style-attribute.ts)
110+
- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/require-optimized-style-attribute.ts)

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

Lines changed: 8 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,17 @@
11
import { createRule } from "../utils"
2-
import { parseStyleAttributeValue } from "../utils/css-utils"
2+
import rule from "./require-optimized-style-attribute"
33

44
export default createRule("no-non-optimized-style-attributes", {
55
meta: {
66
docs: {
7-
description: "disallow style attributes that cannot be optimized",
8-
category: "Best Practices",
7+
...rule.meta.docs,
98
recommended: false,
109
},
11-
schema: [],
12-
messages: {
13-
shorthand:
14-
"It cannot be optimized because style attribute is specified using shorthand.",
15-
comment: "It cannot be optimized because contains comments.",
16-
interpolationKey:
17-
"It cannot be optimized because property of style declaration contain interpolation.",
18-
complex: "It cannot be optimized because too complex.",
19-
},
20-
type: "suggestion",
21-
},
22-
create(context) {
23-
return {
24-
SvelteShorthandAttribute(node) {
25-
if (node.key.name !== "style") {
26-
return
27-
}
28-
29-
context.report({
30-
node,
31-
messageId: "shorthand",
32-
})
33-
},
34-
SvelteAttribute(node) {
35-
if (node.key.name !== "style") {
36-
return
37-
}
38-
const root = parseStyleAttributeValue(node, context)
39-
if (!root) {
40-
return
41-
}
42-
43-
for (const child of root.nodes) {
44-
if (child.type === "decl") {
45-
if (child.unsafe) {
46-
context.report({
47-
node,
48-
loc: child.loc,
49-
messageId: "complex",
50-
})
51-
} else if (child.prop.name.includes("{")) {
52-
context.report({
53-
node,
54-
loc: child.prop.loc,
55-
messageId: "interpolationKey",
56-
})
57-
}
58-
} else if (child.type === "comment") {
59-
context.report({
60-
node,
61-
loc: child.loc,
62-
messageId: "comment",
63-
})
64-
} else {
65-
context.report({
66-
node,
67-
loc: child.loc,
68-
messageId: "complex",
69-
})
70-
}
71-
}
72-
},
73-
}
10+
schema: rule.meta.schema,
11+
messages: rule.meta.messages,
12+
type: rule.meta.type,
13+
deprecated: true,
14+
replacedBy: ["require-optimized-style-attribute"],
7415
},
16+
create: rule.create,
7517
})

0 commit comments

Comments
 (0)