eslint-plugin-primer-react 4.0.3 → 4.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.changeset/README.md +3 -3
- package/.eslintrc.js +39 -0
- package/.github/dependabot.yml +11 -5
- package/.github/workflows/add-to-inbox.yml +33 -0
- package/.github/workflows/ci.yml +34 -18
- package/.github/workflows/release.yml +2 -2
- package/.github/workflows/release_canary.yml +8 -5
- package/.github/workflows/release_candidate.yml +4 -4
- package/.markdownlint-cli2.cjs +26 -0
- package/.nvmrc +1 -0
- package/.prettierignore +3 -0
- package/CHANGELOG.md +7 -1
- package/README.md +4 -2
- package/docs/rules/a11y-explicit-heading.md +17 -7
- package/docs/rules/a11y-tooltip-interactive-trigger.md +6 -2
- package/docs/rules/direct-slot-children.md +49 -46
- package/docs/rules/new-color-css-vars-have-fallback.md +25 -0
- package/docs/rules/new-css-color-vars.md +19 -14
- package/docs/rules/no-deprecated-colors.md +91 -82
- package/docs/rules/no-system-props.md +12 -5
- package/package.json +22 -14
- package/src/configs/components.js +19 -19
- package/src/configs/recommended.js +9 -8
- package/src/index.js +4 -3
- package/src/rules/__tests__/a11y-explicit-heading.test.js +22 -25
- package/src/rules/__tests__/a11y-tooltip-interactive-trigger.test.js +43 -43
- package/src/rules/__tests__/direct-slot-children.test.js +36 -36
- package/src/rules/__tests__/new-color-css-vars.test.js +612 -44
- package/src/rules/__tests__/new-css-vars-have-fallback.test.js +31 -0
- package/src/rules/__tests__/no-deprecated-colors.test.js +66 -66
- package/src/rules/__tests__/no-system-props.test.js +51 -51
- package/src/rules/a11y-explicit-heading.js +16 -13
- package/src/rules/a11y-tooltip-interactive-trigger.js +21 -22
- package/src/rules/direct-slot-children.js +11 -11
- package/src/rules/new-color-css-vars-have-fallback.js +87 -0
- package/src/rules/new-color-css-vars.js +97 -83
- package/src/rules/no-deprecated-colors.js +15 -15
- package/src/rules/no-system-props.js +21 -21
- package/src/url.js +1 -1
- package/src/utils/__tests__/flatten-components.test.js +13 -13
- package/src/utils/css-variable-map.json +538 -184
- package/src/utils/flatten-components.js +11 -11
- package/src/utils/is-imported-from.js +1 -1
- package/src/utils/new-color-css-vars-map.json +326 -0
- /package/.github/{workflows/CODEOWNERS → CODEOWNERS} +0 -0
|
@@ -6,89 +6,186 @@ const ruleTester = new RuleTester({
|
|
|
6
6
|
ecmaVersion: 'latest',
|
|
7
7
|
sourceType: 'module',
|
|
8
8
|
ecmaFeatures: {
|
|
9
|
-
jsx: true
|
|
10
|
-
}
|
|
11
|
-
}
|
|
9
|
+
jsx: true,
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
12
|
})
|
|
13
13
|
|
|
14
14
|
ruleTester.run('no-color-css-vars', rule, {
|
|
15
15
|
valid: [
|
|
16
16
|
{
|
|
17
|
-
code: `{color: 'fg.default'}
|
|
17
|
+
code: `{color: 'fg.default'}`,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
code: `<circle style={{color: '#444'}} strokeWidth='2' />`,
|
|
18
21
|
},
|
|
19
22
|
{
|
|
20
|
-
code: `<circle stroke=
|
|
23
|
+
code: `<circle stroke='var(--borderColor-default)' strokeWidth='2' />`,
|
|
21
24
|
},
|
|
22
25
|
{
|
|
23
|
-
code: `<circle fill=
|
|
26
|
+
code: `<circle fill='red' strokeWidth='2' />`,
|
|
24
27
|
},
|
|
25
28
|
{
|
|
26
|
-
code: `<
|
|
29
|
+
code: `<Blankslate border></Blankslate>`,
|
|
27
30
|
},
|
|
28
31
|
{
|
|
29
|
-
code: `<
|
|
30
|
-
}
|
|
32
|
+
code: `<div sx={{lineHeight: 1}}></div>`,
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
name: 'variable with number',
|
|
36
|
+
code: `
|
|
37
|
+
const size = 2
|
|
38
|
+
export const Fixture = <Button padding={size}>Test</Button>
|
|
39
|
+
`,
|
|
40
|
+
},
|
|
31
41
|
],
|
|
32
42
|
invalid: [
|
|
33
43
|
{
|
|
44
|
+
name: 'attribute: simple variable',
|
|
45
|
+
code: `<circle stroke={isSuccess ? 'var(--color-done-fg)' : 'var(--color-border-default)'} fill='var(--color-border-default)' strokeWidth='2' />`,
|
|
46
|
+
output: `<circle stroke={isSuccess ? 'var(--fgColor-done, var(--color-done-fg))' : 'var(--borderColor-default, var(--color-border-default))'} fill='var(--borderColor-default, var(--color-border-default))' strokeWidth='2' />`,
|
|
47
|
+
errors: [
|
|
48
|
+
{
|
|
49
|
+
message: 'Replace var(--color-done-fg) with var(--fgColor-done, var(--color-done-fg))',
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
56
|
+
},
|
|
57
|
+
],
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
name: 'attribute: conditional variable',
|
|
61
|
+
code: `<circle stroke={test ? 'var(--color-border-default)' : 'red'} strokeWidth='2' />`,
|
|
62
|
+
output: `<circle stroke={test ? 'var(--borderColor-default, var(--color-border-default))' : 'red'} strokeWidth='2' />`,
|
|
63
|
+
errors: [
|
|
64
|
+
{
|
|
65
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
name: 'sx: simple variable',
|
|
34
71
|
code: `<Button sx={{color: 'var(--color-fg-muted)'}}>Test</Button>`,
|
|
35
72
|
output: `<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>`,
|
|
36
73
|
errors: [
|
|
37
74
|
{
|
|
38
|
-
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
|
|
39
|
-
}
|
|
40
|
-
]
|
|
75
|
+
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
|
|
76
|
+
},
|
|
77
|
+
],
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
name: 'style: simple variable',
|
|
81
|
+
code: `<div style={{ border: 'var(--color-border-default)' }}></div>`,
|
|
82
|
+
output: `<div style={{ border: 'var(--borderColor-default, var(--color-border-default))' }}></div>`,
|
|
83
|
+
errors: [
|
|
84
|
+
{
|
|
85
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
86
|
+
},
|
|
87
|
+
],
|
|
41
88
|
},
|
|
42
89
|
{
|
|
90
|
+
name: 'sx: nested variable',
|
|
43
91
|
code: `
|
|
44
92
|
<Box sx={{
|
|
45
|
-
'&:hover
|
|
93
|
+
'&:hover button, &:focus [data-component="copy-link"] button': {
|
|
46
94
|
color: 'var(--color-accent-fg)'
|
|
47
95
|
}
|
|
48
96
|
}}>
|
|
49
97
|
</Box>`,
|
|
50
98
|
output: `
|
|
51
99
|
<Box sx={{
|
|
52
|
-
'&:hover
|
|
100
|
+
'&:hover button, &:focus [data-component="copy-link"] button': {
|
|
53
101
|
color: 'var(--fgColor-accent, var(--color-accent-fg))'
|
|
54
102
|
}
|
|
55
103
|
}}>
|
|
56
104
|
</Box>`,
|
|
57
105
|
errors: [
|
|
58
106
|
{
|
|
59
|
-
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))'
|
|
60
|
-
}
|
|
61
|
-
]
|
|
107
|
+
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
|
|
108
|
+
},
|
|
109
|
+
],
|
|
62
110
|
},
|
|
63
111
|
{
|
|
64
|
-
|
|
65
|
-
|
|
112
|
+
name: 'style: nested variable',
|
|
113
|
+
code: `
|
|
114
|
+
<Box style={{
|
|
115
|
+
'&:hover button, &:focus [data-component="copy-link"] button': {
|
|
116
|
+
color: 'var(--color-accent-fg)'
|
|
117
|
+
}
|
|
118
|
+
}}>
|
|
119
|
+
</Box>`,
|
|
120
|
+
output: `
|
|
121
|
+
<Box style={{
|
|
122
|
+
'&:hover button, &:focus [data-component="copy-link"] button': {
|
|
123
|
+
color: 'var(--fgColor-accent, var(--color-accent-fg))'
|
|
124
|
+
}
|
|
125
|
+
}}>
|
|
126
|
+
</Box>`,
|
|
66
127
|
errors: [
|
|
67
128
|
{
|
|
68
|
-
message: 'Replace var(--color-
|
|
69
|
-
}
|
|
70
|
-
]
|
|
129
|
+
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
|
|
130
|
+
},
|
|
131
|
+
],
|
|
71
132
|
},
|
|
72
133
|
{
|
|
73
|
-
|
|
74
|
-
|
|
134
|
+
name: 'value variable in scope',
|
|
135
|
+
code: `
|
|
136
|
+
const highlightedStyle = props.highlighted
|
|
137
|
+
? {
|
|
138
|
+
borderRadius: '50%',
|
|
139
|
+
boxShadow: \`0px 0px 0px 2px var(--color-accent-fg), 0px 0px 0px 4px var(--color-accent-subtle)\`,
|
|
140
|
+
}
|
|
141
|
+
: {}
|
|
142
|
+
const bg = 'var(--color-canvas-subtle)'
|
|
143
|
+
const sx = disabled ? {color: 'var(--color-primer-fg-disabled)'} : undefined
|
|
144
|
+
export const Fixture = <Button bg={bg} sx={sx}>Test</Button>
|
|
145
|
+
`,
|
|
146
|
+
output: `
|
|
147
|
+
const highlightedStyle = props.highlighted
|
|
148
|
+
? {
|
|
149
|
+
borderRadius: '50%',
|
|
150
|
+
boxShadow: \`0px 0px 0px 2px var(--color-accent-fg), 0px 0px 0px 4px var(--color-accent-subtle)\`,
|
|
151
|
+
}
|
|
152
|
+
: {}
|
|
153
|
+
const bg = 'var(--bgColor-muted, var(--color-canvas-subtle))'
|
|
154
|
+
const sx = disabled ? {color: 'var(--fgColor-disabled, var(--color-primer-fg-disabled))'} : undefined
|
|
155
|
+
export const Fixture = <Button bg={bg} sx={sx}>Test</Button>
|
|
156
|
+
`,
|
|
75
157
|
errors: [
|
|
76
158
|
{
|
|
77
|
-
message: 'Replace var(--color-
|
|
78
|
-
}
|
|
79
|
-
|
|
159
|
+
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted, var(--color-accent-subtle))',
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
message:
|
|
169
|
+
'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled, var(--color-primer-fg-disabled))',
|
|
170
|
+
},
|
|
171
|
+
],
|
|
80
172
|
},
|
|
81
173
|
{
|
|
82
|
-
|
|
83
|
-
|
|
174
|
+
name: 'conditional with !important',
|
|
175
|
+
code: `
|
|
176
|
+
const extraSx = focused ? {backgroundColor: 'var(--color-canvas-subtle) !important'} : {}
|
|
177
|
+
`,
|
|
178
|
+
output: `
|
|
179
|
+
const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted, var(--color-canvas-subtle)) !important'} : {}
|
|
180
|
+
`,
|
|
84
181
|
errors: [
|
|
85
182
|
{
|
|
86
|
-
message: 'Replace var(--color-canvas-
|
|
87
|
-
}
|
|
88
|
-
]
|
|
183
|
+
message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
|
|
184
|
+
},
|
|
185
|
+
],
|
|
89
186
|
},
|
|
90
187
|
{
|
|
91
|
-
name: 'variable in scope',
|
|
188
|
+
name: 'variable object in scope',
|
|
92
189
|
code: `
|
|
93
190
|
const baseStyles = { color: 'var(--color-fg-muted)' }
|
|
94
191
|
export const Fixture = <Button sx={baseStyles}>Test</Button>
|
|
@@ -99,9 +196,9 @@ ruleTester.run('no-color-css-vars', rule, {
|
|
|
99
196
|
`,
|
|
100
197
|
errors: [
|
|
101
198
|
{
|
|
102
|
-
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
|
|
103
|
-
}
|
|
104
|
-
]
|
|
199
|
+
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
|
|
200
|
+
},
|
|
201
|
+
],
|
|
105
202
|
},
|
|
106
203
|
{
|
|
107
204
|
name: 'merge in sx',
|
|
@@ -115,18 +212,489 @@ ruleTester.run('no-color-css-vars', rule, {
|
|
|
115
212
|
`,
|
|
116
213
|
errors: [
|
|
117
214
|
{
|
|
118
|
-
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
|
|
215
|
+
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
|
|
219
|
+
},
|
|
220
|
+
],
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
name: 'variable in styled.component',
|
|
224
|
+
code: `
|
|
225
|
+
import {sx, SxProp} from '@primer/react'
|
|
226
|
+
export const HighlightToken = styled.span\`
|
|
227
|
+
color: var(--color-accent-emphasis);
|
|
228
|
+
background-color: var(--color-canvas-default);
|
|
229
|
+
\${sx}
|
|
230
|
+
\`
|
|
231
|
+
const ClickableTokenSpan = styled(HighlightToken)\`
|
|
232
|
+
&:hover, &:focus { background-color: accent.muted;}
|
|
233
|
+
\`
|
|
234
|
+
`,
|
|
235
|
+
errors: [
|
|
236
|
+
{
|
|
237
|
+
message:
|
|
238
|
+
'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))',
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
|
|
242
|
+
},
|
|
243
|
+
],
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
name: 'variable in styled.component with conditional',
|
|
247
|
+
code: `
|
|
248
|
+
import {sx, SxProp} from '@primer/react'
|
|
249
|
+
export const HighlightToken = styled.span\`
|
|
250
|
+
color: \\\${danger ? var(--color-danger-emphasis) : var(--color-accent-emphasis)};
|
|
251
|
+
\${sx}
|
|
252
|
+
\`
|
|
253
|
+
const ClickableTokenSpan = styled(HighlightToken)\`
|
|
254
|
+
&:hover, &:focus { background-color: accent.muted;}
|
|
255
|
+
\`
|
|
256
|
+
`,
|
|
257
|
+
errors: [
|
|
258
|
+
{
|
|
259
|
+
message:
|
|
260
|
+
'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis, var(--color-danger-emphasis))',
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
message:
|
|
264
|
+
'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))',
|
|
265
|
+
},
|
|
266
|
+
],
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
name: 'sx: conditional variable',
|
|
270
|
+
code: `
|
|
271
|
+
import {Box} from '@primer/react'
|
|
272
|
+
|
|
273
|
+
function someComponent({subtle}) {
|
|
274
|
+
return (
|
|
275
|
+
<Box
|
|
276
|
+
sx={{
|
|
277
|
+
boxShadow: subtle
|
|
278
|
+
? 'inset 2px 0 0 var(--color-fg-subtle)'
|
|
279
|
+
: 'inset 2px 0 0 var(--color-attention-fg)',
|
|
280
|
+
color: 'var(--fgColor-default)',
|
|
281
|
+
bg: 'var(--color-canvas-default)',
|
|
282
|
+
borderLeft: '1px solid var(--color-border-default)',
|
|
283
|
+
borderRight: '1px solid var(--color-border-default)',
|
|
284
|
+
borderTop: '2px solid var(--color-border-default)',
|
|
285
|
+
borderBottom: '2px solid var(--color-border-default)',
|
|
286
|
+
}}
|
|
287
|
+
/>
|
|
288
|
+
)
|
|
289
|
+
}
|
|
290
|
+
`,
|
|
291
|
+
output: `
|
|
292
|
+
import {Box} from '@primer/react'
|
|
293
|
+
|
|
294
|
+
function someComponent({subtle}) {
|
|
295
|
+
return (
|
|
296
|
+
<Box
|
|
297
|
+
sx={{
|
|
298
|
+
boxShadow: subtle
|
|
299
|
+
? 'inset 2px 0 0 var(--borderColor-neutral-emphasis, var(--color-fg-subtle))'
|
|
300
|
+
: 'inset 2px 0 0 var(--bgColor-attention-emphasis, var(--color-attention-fg))',
|
|
301
|
+
color: 'var(--fgColor-default)',
|
|
302
|
+
bg: 'var(--bgColor-default, var(--color-canvas-default))',
|
|
303
|
+
borderLeft: '1px solid var(--borderColor-default, var(--color-border-default))',
|
|
304
|
+
borderRight: '1px solid var(--borderColor-default, var(--color-border-default))',
|
|
305
|
+
borderTop: '2px solid var(--borderColor-default, var(--color-border-default))',
|
|
306
|
+
borderBottom: '2px solid var(--borderColor-default, var(--color-border-default))',
|
|
307
|
+
}}
|
|
308
|
+
/>
|
|
309
|
+
)
|
|
119
310
|
}
|
|
120
|
-
|
|
311
|
+
`,
|
|
312
|
+
errors: [
|
|
313
|
+
{
|
|
314
|
+
message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))',
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
message:
|
|
318
|
+
'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))',
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
334
|
+
},
|
|
335
|
+
],
|
|
121
336
|
},
|
|
122
337
|
{
|
|
123
|
-
|
|
124
|
-
|
|
338
|
+
name: 'style: conditional variable',
|
|
339
|
+
code: `
|
|
340
|
+
import {Box} from '@primer/react'
|
|
341
|
+
|
|
342
|
+
function someComponent({subtle}) {
|
|
343
|
+
return (
|
|
344
|
+
<Box
|
|
345
|
+
style={{
|
|
346
|
+
boxShadow: subtle
|
|
347
|
+
? 'inset 2px 0 0 var(--color-fg-subtle)'
|
|
348
|
+
: 'inset 2px 0 0 var(--color-attention-fg)',
|
|
349
|
+
color: 'var(--fgColor-default)',
|
|
350
|
+
bg: 'var(--color-canvas-default)'
|
|
351
|
+
}}
|
|
352
|
+
/>
|
|
353
|
+
)
|
|
354
|
+
}
|
|
355
|
+
`,
|
|
356
|
+
output: `
|
|
357
|
+
import {Box} from '@primer/react'
|
|
358
|
+
|
|
359
|
+
function someComponent({subtle}) {
|
|
360
|
+
return (
|
|
361
|
+
<Box
|
|
362
|
+
style={{
|
|
363
|
+
boxShadow: subtle
|
|
364
|
+
? 'inset 2px 0 0 var(--borderColor-neutral-emphasis, var(--color-fg-subtle))'
|
|
365
|
+
: 'inset 2px 0 0 var(--bgColor-attention-emphasis, var(--color-attention-fg))',
|
|
366
|
+
color: 'var(--fgColor-default)',
|
|
367
|
+
bg: 'var(--bgColor-default, var(--color-canvas-default))'
|
|
368
|
+
}}
|
|
369
|
+
/>
|
|
370
|
+
)
|
|
371
|
+
}
|
|
372
|
+
`,
|
|
125
373
|
errors: [
|
|
126
374
|
{
|
|
127
|
-
message: 'Replace var(--color-
|
|
375
|
+
message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))',
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
message:
|
|
379
|
+
'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))',
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
|
|
383
|
+
},
|
|
384
|
+
],
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
name: 'typescript object with nested cssObject',
|
|
388
|
+
code: `
|
|
389
|
+
const Styles = {
|
|
390
|
+
table: {
|
|
391
|
+
width: '100%',
|
|
392
|
+
lineHeight: '100%',
|
|
393
|
+
},
|
|
394
|
+
thead: {
|
|
395
|
+
background: 'var(--color-canvas-subtle)',
|
|
396
|
+
borderBottom: '1px solid',
|
|
397
|
+
borderColor: 'var(--color-border-default)',
|
|
398
|
+
},
|
|
128
399
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
400
|
+
`,
|
|
401
|
+
output: `
|
|
402
|
+
const Styles = {
|
|
403
|
+
table: {
|
|
404
|
+
width: '100%',
|
|
405
|
+
lineHeight: '100%',
|
|
406
|
+
},
|
|
407
|
+
thead: {
|
|
408
|
+
background: 'var(--bgColor-muted, var(--color-canvas-subtle))',
|
|
409
|
+
borderBottom: '1px solid',
|
|
410
|
+
borderColor: 'var(--borderColor-default, var(--color-border-default))',
|
|
411
|
+
},
|
|
412
|
+
}
|
|
413
|
+
`,
|
|
414
|
+
errors: [
|
|
415
|
+
{
|
|
416
|
+
message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
|
|
417
|
+
},
|
|
418
|
+
{
|
|
419
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
420
|
+
},
|
|
421
|
+
],
|
|
422
|
+
},
|
|
423
|
+
{
|
|
424
|
+
name: 'inline sx',
|
|
425
|
+
code: `<Box sx={{outline: '2px solid var(--color-accent-fg)'}}>Test</Box>`,
|
|
426
|
+
output: `<Box sx={{outline: '2px solid var(--focus-outlineColor, var(--color-accent-fg))'}}>Test</Box>`,
|
|
427
|
+
errors: [
|
|
428
|
+
{
|
|
429
|
+
message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor, var(--color-accent-fg))',
|
|
430
|
+
},
|
|
431
|
+
],
|
|
432
|
+
},
|
|
433
|
+
{
|
|
434
|
+
name: 'inline sx with nesting',
|
|
435
|
+
code: `
|
|
436
|
+
<Box sx={{
|
|
437
|
+
color: 'var(--color-fg-subtle)',
|
|
438
|
+
'&:hover': {
|
|
439
|
+
color: 'var(--color-accent-fg)',
|
|
440
|
+
}
|
|
441
|
+
}}>Test</Box>
|
|
442
|
+
`,
|
|
443
|
+
output: `
|
|
444
|
+
<Box sx={{
|
|
445
|
+
color: 'var(--fgColor-muted, var(--color-fg-subtle))',
|
|
446
|
+
'&:hover': {
|
|
447
|
+
color: 'var(--fgColor-accent, var(--color-accent-fg))',
|
|
448
|
+
}
|
|
449
|
+
}}>Test</Box>
|
|
450
|
+
`,
|
|
451
|
+
errors: [
|
|
452
|
+
{
|
|
453
|
+
message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted, var(--color-fg-subtle))',
|
|
454
|
+
},
|
|
455
|
+
{
|
|
456
|
+
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
|
|
457
|
+
},
|
|
458
|
+
],
|
|
459
|
+
},
|
|
460
|
+
{
|
|
461
|
+
name: 'inside return statement',
|
|
462
|
+
code: `
|
|
463
|
+
const fn = () => {
|
|
464
|
+
const th = {
|
|
465
|
+
padding: '8px 12px',
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
return {
|
|
469
|
+
button: {
|
|
470
|
+
border: 0,
|
|
471
|
+
padding: 0,
|
|
472
|
+
background: 'transparent',
|
|
473
|
+
color: isSelected ? 'var(--color-fg-default)' : 'var(--color-fg-muted)',
|
|
474
|
+
fontSize: '12px',
|
|
475
|
+
fontWeight: '600',
|
|
476
|
+
display: 'flex',
|
|
477
|
+
gap: '8px',
|
|
478
|
+
flexDirection: isRightAligned ? 'row-reverse' : 'row',
|
|
479
|
+
justifyContent: 'flex-start',
|
|
480
|
+
},
|
|
481
|
+
th,
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
`,
|
|
485
|
+
output: `
|
|
486
|
+
const fn = () => {
|
|
487
|
+
const th = {
|
|
488
|
+
padding: '8px 12px',
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
return {
|
|
492
|
+
button: {
|
|
493
|
+
border: 0,
|
|
494
|
+
padding: 0,
|
|
495
|
+
background: 'transparent',
|
|
496
|
+
color: isSelected ? 'var(--fgColor-default, var(--color-fg-default))' : 'var(--fgColor-muted, var(--color-fg-muted))',
|
|
497
|
+
fontSize: '12px',
|
|
498
|
+
fontWeight: '600',
|
|
499
|
+
display: 'flex',
|
|
500
|
+
gap: '8px',
|
|
501
|
+
flexDirection: isRightAligned ? 'row-reverse' : 'row',
|
|
502
|
+
justifyContent: 'flex-start',
|
|
503
|
+
},
|
|
504
|
+
th,
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
`,
|
|
508
|
+
errors: [
|
|
509
|
+
{
|
|
510
|
+
message: 'Replace var(--color-fg-default) with var(--fgColor-default, var(--color-fg-default))',
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
|
|
514
|
+
},
|
|
515
|
+
],
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
name: 'fn with => return',
|
|
519
|
+
code: `
|
|
520
|
+
const filterInputWrapperStyles = (fullyRounded = false) => ({
|
|
521
|
+
display: 'flex',
|
|
522
|
+
pl: 1,
|
|
523
|
+
width: '100%',
|
|
524
|
+
...(fullyRounded
|
|
525
|
+
? {
|
|
526
|
+
borderRadius: '5px',
|
|
527
|
+
color: 'var(--color-accent-fg)',
|
|
528
|
+
}
|
|
529
|
+
: {
|
|
530
|
+
borderTopRightRadius: '5px',
|
|
531
|
+
borderBottomRightRadius: '5px',
|
|
532
|
+
color: 'var(--color-accent-fg)',
|
|
533
|
+
}),
|
|
534
|
+
overflow: 'hidden',
|
|
535
|
+
':has(input:focus-visible)': {
|
|
536
|
+
boxShadow: 'inset 0 0 0 1px var(--color-accent-emphasis)',
|
|
537
|
+
},
|
|
538
|
+
})
|
|
539
|
+
`,
|
|
540
|
+
output: `
|
|
541
|
+
const filterInputWrapperStyles = (fullyRounded = false) => ({
|
|
542
|
+
display: 'flex',
|
|
543
|
+
pl: 1,
|
|
544
|
+
width: '100%',
|
|
545
|
+
...(fullyRounded
|
|
546
|
+
? {
|
|
547
|
+
borderRadius: '5px',
|
|
548
|
+
color: 'var(--fgColor-accent, var(--color-accent-fg))',
|
|
549
|
+
}
|
|
550
|
+
: {
|
|
551
|
+
borderTopRightRadius: '5px',
|
|
552
|
+
borderBottomRightRadius: '5px',
|
|
553
|
+
color: 'var(--fgColor-accent, var(--color-accent-fg))',
|
|
554
|
+
}),
|
|
555
|
+
overflow: 'hidden',
|
|
556
|
+
':has(input:focus-visible)': {
|
|
557
|
+
boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis, var(--color-accent-emphasis))',
|
|
558
|
+
},
|
|
559
|
+
})
|
|
560
|
+
`,
|
|
561
|
+
errors: [
|
|
562
|
+
{
|
|
563
|
+
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
|
|
564
|
+
},
|
|
565
|
+
{
|
|
566
|
+
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
message:
|
|
570
|
+
'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis, var(--color-accent-emphasis))',
|
|
571
|
+
},
|
|
572
|
+
],
|
|
573
|
+
},
|
|
574
|
+
{
|
|
575
|
+
name: 'function called with argument',
|
|
576
|
+
code: `
|
|
577
|
+
export const autocompleteTheme = EditorView.baseTheme({
|
|
578
|
+
'.cm-tooltip.cm-tooltip-autocomplete': {
|
|
579
|
+
border: 0,
|
|
580
|
+
backgroundColor: 'transparent',
|
|
581
|
+
},
|
|
582
|
+
|
|
583
|
+
'.cm-tooltip.cm-tooltip-autocomplete > ul': {
|
|
584
|
+
fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
|
|
585
|
+
fontSize: '12px',
|
|
586
|
+
backgroundColor: 'var(--color-canvas-default)',
|
|
587
|
+
border: '1px solid var(--color-border-default)',
|
|
588
|
+
borderRadius: 'var(--borderRadius-medium)',
|
|
589
|
+
boxShadow: 'var(--color-shadow-medium)',
|
|
590
|
+
minWidth: 'auto',
|
|
591
|
+
}
|
|
592
|
+
})
|
|
593
|
+
`,
|
|
594
|
+
output: `
|
|
595
|
+
export const autocompleteTheme = EditorView.baseTheme({
|
|
596
|
+
'.cm-tooltip.cm-tooltip-autocomplete': {
|
|
597
|
+
border: 0,
|
|
598
|
+
backgroundColor: 'transparent',
|
|
599
|
+
},
|
|
600
|
+
|
|
601
|
+
'.cm-tooltip.cm-tooltip-autocomplete > ul': {
|
|
602
|
+
fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
|
|
603
|
+
fontSize: '12px',
|
|
604
|
+
backgroundColor: 'var(--bgColor-default, var(--color-canvas-default))',
|
|
605
|
+
border: '1px solid var(--borderColor-default, var(--color-border-default))',
|
|
606
|
+
borderRadius: 'var(--borderRadius-medium)',
|
|
607
|
+
boxShadow: 'var(--shadow-resting-medium, var(--color-shadow-medium))',
|
|
608
|
+
minWidth: 'auto',
|
|
609
|
+
}
|
|
610
|
+
})
|
|
611
|
+
`,
|
|
612
|
+
errors: [
|
|
613
|
+
{
|
|
614
|
+
message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
|
|
615
|
+
},
|
|
616
|
+
{
|
|
617
|
+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium, var(--color-shadow-medium))',
|
|
621
|
+
},
|
|
622
|
+
],
|
|
623
|
+
},
|
|
624
|
+
{
|
|
625
|
+
name: 'switch case',
|
|
626
|
+
code: `
|
|
627
|
+
const getBorderStyling = (modification) => {
|
|
628
|
+
const borderStyle = '3px solid'
|
|
629
|
+
|
|
630
|
+
switch (modification) {
|
|
631
|
+
case 'ADDED':
|
|
632
|
+
return {borderLeft: borderStyle, borderColor: 'var(--color-success-fg)'}
|
|
633
|
+
case 'REMOVED':
|
|
634
|
+
return {borderLeft: borderStyle, borderColor: 'var(--color-danger-fg)'}
|
|
635
|
+
case 'EDITED':
|
|
636
|
+
return {borderLeft: borderStyle, borderColor: 'var(--color-severe-fg)'}
|
|
637
|
+
case 'accent':
|
|
638
|
+
return {borderLeft: borderStyle, borderColor: 'var(--color-accent-fg)'}
|
|
639
|
+
case 'done':
|
|
640
|
+
return {borderLeft: borderStyle, borderColor: 'var(--color-done-fg)'}
|
|
641
|
+
case 'closed':
|
|
642
|
+
return {borderLeft: borderStyle, borderColor: 'var(--color-closed-fg)'}
|
|
643
|
+
case 'sponsors':
|
|
644
|
+
return {borderLeft: borderStyle, borderColor: 'var(--color-sponsors-fg)'}
|
|
645
|
+
case 'UNCHANGED':
|
|
646
|
+
return {}
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
`,
|
|
650
|
+
output: `
|
|
651
|
+
const getBorderStyling = (modification) => {
|
|
652
|
+
const borderStyle = '3px solid'
|
|
653
|
+
|
|
654
|
+
switch (modification) {
|
|
655
|
+
case 'ADDED':
|
|
656
|
+
return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis, var(--color-success-fg))'}
|
|
657
|
+
case 'REMOVED':
|
|
658
|
+
return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis, var(--color-danger-fg))'}
|
|
659
|
+
case 'EDITED':
|
|
660
|
+
return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis, var(--color-severe-fg))'}
|
|
661
|
+
case 'accent':
|
|
662
|
+
return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis, var(--color-accent-fg))'}
|
|
663
|
+
case 'done':
|
|
664
|
+
return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis, var(--color-done-fg))'}
|
|
665
|
+
case 'closed':
|
|
666
|
+
return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis, var(--color-closed-fg))'}
|
|
667
|
+
case 'sponsors':
|
|
668
|
+
return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))'}
|
|
669
|
+
case 'UNCHANGED':
|
|
670
|
+
return {}
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
`,
|
|
674
|
+
errors: [
|
|
675
|
+
{
|
|
676
|
+
message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis, var(--color-success-fg))',
|
|
677
|
+
},
|
|
678
|
+
{
|
|
679
|
+
message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis, var(--color-danger-fg))',
|
|
680
|
+
},
|
|
681
|
+
{
|
|
682
|
+
message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis, var(--color-severe-fg))',
|
|
683
|
+
},
|
|
684
|
+
{
|
|
685
|
+
message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis, var(--color-accent-fg))',
|
|
686
|
+
},
|
|
687
|
+
{
|
|
688
|
+
message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis, var(--color-done-fg))',
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis, var(--color-closed-fg))',
|
|
692
|
+
},
|
|
693
|
+
{
|
|
694
|
+
message:
|
|
695
|
+
'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))',
|
|
696
|
+
},
|
|
697
|
+
],
|
|
698
|
+
},
|
|
699
|
+
],
|
|
132
700
|
})
|