Skip to content

Commit 608a102

Browse files
marekdedicmarekdedic
committed
feat(consistent-selector-style): added support for checking :global styles
1 parent 4924ba9 commit 608a102

File tree

7 files changed

+308
-3
lines changed

7 files changed

+308
-3
lines changed

‎packages/eslint-plugin-svelte/src/rule-types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,7 @@ type SvelteCommentDirective = []|[{
394394
}]
395395
// ----- svelte/consistent-selector-style -----
396396
type SvelteConsistentSelectorStyle = []|[{
397+
checkGlobal?: boolean
397398

398399
style?: []|[("class" | "id" | "type")]|[("class" | "id" | "type"), ("class" | "id" | "type")]|[("class" | "id" | "type"), ("class" | "id" | "type"), ("class" | "id" | "type")]
399400
}]

‎packages/eslint-plugin-svelte/src/rules/consistent-selector-style.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { createRule } from '../utils/index.js';
1212
import type { RuleContext, SourceCode } from '../types.js';
1313

1414
interface RuleGlobals {
15+
checkGlobal: boolean;
1516
style: string[];
1617
classSelections: Map<string, AST.SvelteHTMLElement[]>;
1718
idSelections: Map<string, AST.SvelteHTMLElement[]>;
@@ -32,7 +33,9 @@ export default createRule('consistent-selector-style', {
3233
{
3334
type: 'object',
3435
properties: {
35-
// TODO: Add option to include global selectors
36+
checkGlobal: {
37+
type: 'boolean'
38+
},
3639
style: {
3740
type: 'array',
3841
items: {
@@ -61,6 +64,7 @@ export default createRule('consistent-selector-style', {
6164
return {};
6265
}
6366

67+
const checkGlobal = context.options[0]?.checkGlobal ?? false;
6468
const style = context.options[0]?.style ?? ['type', 'id', 'class'];
6569

6670
const classSelections: Map<string, AST.SvelteHTMLElement[]> = new Map();
@@ -94,6 +98,7 @@ export default createRule('consistent-selector-style', {
9498
return;
9599
}
96100
checkSelectorsInPostCSSNode(styleContext.sourceAst, {
101+
checkGlobal,
97102
style,
98103
classSelections,
99104
idSelections,
@@ -126,7 +131,7 @@ function checkSelectorsInPostCSSNode(node: AnyNode, ruleGlobals: RuleGlobals): v
126131
}
127132
if (
128133
(node.type === 'root' ||
129-
(node.type === 'rule' && node.selector !== ':global') ||
134+
(node.type === 'rule' && (node.selector !== ':global' || ruleGlobals.checkGlobal)) ||
130135
node.type === 'atrule') &&
131136
node.nodes !== undefined
132137
) {
@@ -148,7 +153,7 @@ function checkSelector(node: SelectorNode, ruleGlobals: RuleGlobals): void {
148153
checkTypeSelector(node, ruleGlobals);
149154
}
150155
if (
151-
(node.type === 'pseudo' && node.value !== ':global') ||
156+
(node.type === 'pseudo' && (node.value !== ':global' || ruleGlobals.checkGlobal)) ||
152157
node.type === 'root' ||
153158
node.type === 'selector'
154159
) {

‎packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/invalid/global/_config.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"options": [{ "checkGlobal": true }]
3+
}

‎packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/invalid/global/should-be-id01-errors.yaml

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
- message: Selector should select by ID instead of class
2+
line: 10
3+
column: 11
4+
suggestions: null
5+
- message: Selector should select by ID instead of class
6+
line: 14
7+
column: 11
8+
suggestions: null
9+
- message: Selector should select by ID instead of class
10+
line: 18
11+
column: 11
12+
suggestions: null
13+
- message: Selector should select by ID instead of class
14+
line: 22
15+
column: 11
16+
suggestions: null
17+
- message: Selector should select by ID instead of class
18+
line: 22
19+
column: 19
20+
suggestions: null
21+
- message: Selector should select by ID instead of class
22+
line: 26
23+
column: 11
24+
suggestions: null
25+
- message: Selector should select by ID instead of class
26+
line: 30
27+
column: 11
28+
suggestions: null
29+
- message: Selector should select by ID instead of class
30+
line: 35
31+
column: 5
32+
suggestions: null
33+
- message: Selector should select by ID instead of class
34+
line: 39
35+
column: 5
36+
suggestions: null
37+
- message: Selector should select by ID instead of class
38+
line: 43
39+
column: 5
40+
suggestions: null
41+
- message: Selector should select by ID instead of class
42+
line: 47
43+
column: 5
44+
suggestions: null
45+
- message: Selector should select by ID instead of class
46+
line: 47
47+
column: 13
48+
suggestions: null
49+
- message: Selector should select by ID instead of class
50+
line: 51
51+
column: 5
52+
suggestions: null
53+
- message: Selector should select by ID instead of class
54+
line: 55
55+
column: 5
56+
suggestions: null

‎packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/invalid/global/should-be-id01-input.svelte

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<a class="link">Click me!</a>
2+
3+
<a>Click me two!</a>
4+
5+
<b class="bold">Text 1</b>
6+
7+
<b data-key="val">Text 3</b>
8+
9+
<style>
10+
:global(.link) {
11+
color: red;
12+
}
13+
14+
:global(.bold) {
15+
color: red;
16+
}
17+
18+
:global(.link:active) {
19+
color: red;
20+
}
21+
22+
:global(.link + .bold) {
23+
color: red;
24+
}
25+
26+
:global(.bold[data-key="val"]) {
27+
color: red;
28+
}
29+
30+
:global(.bold::before) {
31+
color: red;
32+
}
33+
34+
:global {
35+
.link {
36+
color: red;
37+
}
38+
39+
.bold {
40+
color: red;
41+
}
42+
43+
.link:active {
44+
color: red;
45+
}
46+
47+
.link + .bold {
48+
color: red;
49+
}
50+
51+
.bold[data-key="val"] {
52+
color: red;
53+
}
54+
55+
.bold::before {
56+
color: red;
57+
}
58+
}
59+
</style>

‎packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/invalid/global/should-be-type01-errors.yaml

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
- message: Selector should select by element type instead of class
2+
line: 12
3+
column: 11
4+
suggestions: null
5+
- message: Selector should select by element type instead of class
6+
line: 16
7+
column: 11
8+
suggestions: null
9+
- message: Selector should select by element type instead of class
10+
line: 20
11+
column: 11
12+
suggestions: null
13+
- message: Selector should select by element type instead of class
14+
line: 24
15+
column: 11
16+
suggestions: null
17+
- message: Selector should select by element type instead of class
18+
line: 24
19+
column: 28
20+
suggestions: null
21+
- message: Selector should select by element type instead of class
22+
line: 28
23+
column: 11
24+
suggestions: null
25+
- message: Selector should select by element type instead of class
26+
line: 32
27+
column: 11
28+
suggestions: null
29+
- message: Selector should select by element type instead of ID
30+
line: 36
31+
column: 11
32+
suggestions: null
33+
- message: Selector should select by element type instead of ID
34+
line: 40
35+
column: 11
36+
suggestions: null
37+
- message: Selector should select by element type instead of ID
38+
line: 44
39+
column: 15
40+
suggestions: null
41+
- message: Selector should select by element type instead of ID
42+
line: 48
43+
column: 11
44+
suggestions: null
45+
- message: Selector should select by element type instead of class
46+
line: 53
47+
column: 5
48+
suggestions: null
49+
- message: Selector should select by element type instead of class
50+
line: 57
51+
column: 5
52+
suggestions: null
53+
- message: Selector should select by element type instead of class
54+
line: 61
55+
column: 5
56+
suggestions: null
57+
- message: Selector should select by element type instead of class
58+
line: 65
59+
column: 5
60+
suggestions: null
61+
- message: Selector should select by element type instead of class
62+
line: 65
63+
column: 13
64+
suggestions: null
65+
- message: Selector should select by element type instead of class
66+
line: 69
67+
column: 5
68+
suggestions: null
69+
- message: Selector should select by element type instead of class
70+
line: 73
71+
column: 5
72+
suggestions: null
73+
- message: Selector should select by element type instead of ID
74+
line: 77
75+
column: 5
76+
suggestions: null
77+
- message: Selector should select by element type instead of ID
78+
line: 81
79+
column: 5
80+
suggestions: null
81+
- message: Selector should select by element type instead of ID
82+
line: 85
83+
column: 9
84+
suggestions: null
85+
- message: Selector should select by element type instead of ID
86+
line: 89
87+
column: 5
88+
suggestions: null

‎packages/eslint-plugin-svelte/tests/fixtures/rules/consistent-selector-style/invalid/global/should-be-type01-input.svelte

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<a class="link">Click me!</a>
2+
3+
<a class="link">Click me two!</a>
4+
5+
<b class="bold">Text 1</b>
6+
7+
<b class="bold" data-key="val">Text 2</b>
8+
9+
<i id="italic">Italic</i>
10+
11+
<style>
12+
:global(.link) {
13+
color: red;
14+
}
15+
16+
:global(.bold) {
17+
color: red;
18+
}
19+
20+
:global(.link:active) {
21+
color: red;
22+
}
23+
24+
:global(.link) + :global(.bold) {
25+
color: red;
26+
}
27+
28+
:global(.bold[data-key="val"]) {
29+
color: red;
30+
}
31+
32+
:global(.bold::before) {
33+
color: red;
34+
}
35+
36+
:global(#italic) {
37+
color: red;
38+
}
39+
40+
:global(#italic:active) {
41+
color: red;
42+
}
43+
44+
:global(b + #italic) {
45+
color: red;
46+
}
47+
48+
:global(#italic::before) {
49+
color: red;
50+
}
51+
52+
:global {
53+
.link {
54+
color: red;
55+
}
56+
57+
.bold {
58+
color: red;
59+
}
60+
61+
.link:active {
62+
color: red;
63+
}
64+
65+
.link + .bold {
66+
color: red;
67+
}
68+
69+
.bold[data-key="val"] {
70+
color: red;
71+
}
72+
73+
.bold::before {
74+
color: red;
75+
}
76+
77+
#italic {
78+
color: red;
79+
}
80+
81+
#italic:active {
82+
color: red;
83+
}
84+
85+
b + #italic {
86+
color: red;
87+
}
88+
89+
#italic::before {
90+
color: red;
91+
}
92+
}
93+
</style>

0 commit comments

Comments
 (0)