eslint-plugin-primer-react 4.2.0 → 5.0.0-rc.2db7a42

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/docs/rules/new-css-color-vars.md +2 -2
  3. package/package-lock.json +14804 -0
  4. package/package.json +1 -1
  5. package/src/configs/recommended.js +0 -1
  6. package/src/index.js +0 -1
  7. package/src/rules/__tests__/new-color-css-vars.test.js +90 -98
  8. package/src/rules/new-color-css-vars.js +2 -2
  9. package/docs/rules/new-color-css-vars-have-fallback.md +0 -25
  10. package/src/rules/__tests__/new-css-vars-have-fallback.test.js +0 -31
  11. package/src/rules/new-color-css-vars-have-fallback.js +0 -87
  12. package/src/utils/new-color-css-vars-map.json +0 -326
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eslint-plugin-primer-react",
3
- "version": "4.2.0",
3
+ "version": "5.0.0-rc.2db7a42",
4
4
  "description": "ESLint rules for Primer React",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/configs/recommended.js CHANGED
@@ -16,7 +16,6 @@ module.exports = {
16
16
  'primer-react/a11y-tooltip-interactive-trigger': 'error',
17
17
  'primer-react/new-color-css-vars': 'error',
18
18
  'primer-react/a11y-explicit-heading': 'error',
19
- 'primer-react/new-color-css-vars-have-fallback': 'error',
20
19
  'primer-react/no-deprecated-props': 'warn',
21
20
  },
22
21
  settings: {
package/src/index.js CHANGED
@@ -7,7 +7,6 @@ module.exports = {
7
7
  'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
8
8
  'new-color-css-vars': require('./rules/new-color-css-vars'),
9
9
  'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
10
- 'new-color-css-vars-have-fallback': require('./rules/new-color-css-vars-have-fallback'),
11
10
  'no-deprecated-props': require('./rules/no-deprecated-props'),
12
11
  },
13
12
  configs: {
package/src/rules/__tests__/new-color-css-vars.test.js CHANGED
@@ -43,46 +43,46 @@ ruleTester.run('no-color-css-vars', rule, {
43
43
  {
44
44
  name: 'attribute: simple variable',
45
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' />`,
46
+ output: `<circle stroke={isSuccess ? 'var(--fgColor-done)' : 'var(--borderColor-default)'} fill='var(--borderColor-default)' strokeWidth='2' />`,
47
47
  errors: [
48
48
  {
49
- message: 'Replace var(--color-done-fg) with var(--fgColor-done, var(--color-done-fg))',
49
+ message: 'Replace var(--color-done-fg) with var(--fgColor-done)',
50
50
  },
51
51
  {
52
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
52
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
53
53
  },
54
54
  {
55
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
55
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
56
56
  },
57
57
  ],
58
58
  },
59
59
  {
60
60
  name: 'attribute: conditional variable',
61
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' />`,
62
+ output: `<circle stroke={test ? 'var(--borderColor-default)' : 'red'} strokeWidth='2' />`,
63
63
  errors: [
64
64
  {
65
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
65
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
66
66
  },
67
67
  ],
68
68
  },
69
69
  {
70
70
  name: 'sx: simple variable',
71
71
  code: `<Button sx={{color: 'var(--color-fg-muted)'}}>Test</Button>`,
72
- output: `<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>`,
72
+ output: `<Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>`,
73
73
  errors: [
74
74
  {
75
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
75
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
76
76
  },
77
77
  ],
78
78
  },
79
79
  {
80
80
  name: 'style: simple variable',
81
81
  code: `<div style={{ border: 'var(--color-border-default)' }}></div>`,
82
- output: `<div style={{ border: 'var(--borderColor-default, var(--color-border-default))' }}></div>`,
82
+ output: `<div style={{ border: 'var(--borderColor-default)' }}></div>`,
83
83
  errors: [
84
84
  {
85
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
85
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
86
86
  },
87
87
  ],
88
88
  },
@@ -98,13 +98,13 @@ ruleTester.run('no-color-css-vars', rule, {
98
98
  output: `
99
99
  <Box sx={{
100
100
  '&:hover button, &:focus [data-component="copy-link"] button': {
101
- color: 'var(--fgColor-accent, var(--color-accent-fg))'
101
+ color: 'var(--fgColor-accent)'
102
102
  }
103
103
  }}>
104
104
  </Box>`,
105
105
  errors: [
106
106
  {
107
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
107
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
108
108
  },
109
109
  ],
110
110
  },
@@ -120,13 +120,13 @@ ruleTester.run('no-color-css-vars', rule, {
120
120
  output: `
121
121
  <Box style={{
122
122
  '&:hover button, &:focus [data-component="copy-link"] button': {
123
- color: 'var(--fgColor-accent, var(--color-accent-fg))'
123
+ color: 'var(--fgColor-accent)'
124
124
  }
125
125
  }}>
126
126
  </Box>`,
127
127
  errors: [
128
128
  {
129
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
129
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
130
130
  },
131
131
  ],
132
132
  },
@@ -150,23 +150,22 @@ ruleTester.run('no-color-css-vars', rule, {
150
150
  boxShadow: \`0px 0px 0px 2px var(--color-accent-fg), 0px 0px 0px 4px var(--color-accent-subtle)\`,
151
151
  }
152
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
153
+ const bg = 'var(--bgColor-muted)'
154
+ const sx = disabled ? {color: 'var(--fgColor-disabled)'} : undefined
155
155
  export const Fixture = <Button bg={bg} sx={sx}>Test</Button>
156
156
  `,
157
157
  errors: [
158
158
  {
159
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
159
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
160
160
  },
161
161
  {
162
- message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted, var(--color-accent-subtle))',
162
+ message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted)',
163
163
  },
164
164
  {
165
- message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
165
+ message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)',
166
166
  },
167
167
  {
168
- message:
169
- 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled, var(--color-primer-fg-disabled))',
168
+ message: 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled)',
170
169
  },
171
170
  ],
172
171
  },
@@ -176,11 +175,11 @@ ruleTester.run('no-color-css-vars', rule, {
176
175
  const extraSx = focused ? {backgroundColor: 'var(--color-canvas-subtle) !important'} : {}
177
176
  `,
178
177
  output: `
179
- const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted, var(--color-canvas-subtle)) !important'} : {}
178
+ const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted) !important'} : {}
180
179
  `,
181
180
  errors: [
182
181
  {
183
- message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
182
+ message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)',
184
183
  },
185
184
  ],
186
185
  },
@@ -191,12 +190,12 @@ ruleTester.run('no-color-css-vars', rule, {
191
190
  export const Fixture = <Button sx={baseStyles}>Test</Button>
192
191
  `,
193
192
  output: `
194
- const baseStyles = { color: 'var(--fgColor-muted, var(--color-fg-muted))' }
193
+ const baseStyles = { color: 'var(--fgColor-muted)' }
195
194
  export const Fixture = <Button sx={baseStyles}>Test</Button>
196
195
  `,
197
196
  errors: [
198
197
  {
199
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
198
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
200
199
  },
201
200
  ],
202
201
  },
@@ -208,14 +207,14 @@ ruleTester.run('no-color-css-vars', rule, {
208
207
  `,
209
208
  output: `
210
209
  import {merge} from '@primer/react'
211
- export const Fixture = props => <Button sx={merge({color: 'var(--fgColor-muted, var(--color-fg-muted))'}, props.sx)}>Test</Button>
210
+ export const Fixture = props => <Button sx={merge({color: 'var(--fgColor-muted)'}, props.sx)}>Test</Button>
212
211
  `,
213
212
  errors: [
214
213
  {
215
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
214
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
216
215
  },
217
216
  {
218
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
217
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
219
218
  },
220
219
  ],
221
220
  },
@@ -234,11 +233,10 @@ ruleTester.run('no-color-css-vars', rule, {
234
233
  `,
235
234
  errors: [
236
235
  {
237
- message:
238
- 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))',
236
+ message: 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis)',
239
237
  },
240
238
  {
241
- message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
239
+ message: 'Replace var(--color-canvas-default) with var(--bgColor-default)',
242
240
  },
243
241
  ],
244
242
  },
@@ -256,12 +254,10 @@ ruleTester.run('no-color-css-vars', rule, {
256
254
  `,
257
255
  errors: [
258
256
  {
259
- message:
260
- 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis, var(--color-danger-emphasis))',
257
+ message: 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis)',
261
258
  },
262
259
  {
263
- message:
264
- 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))',
260
+ message: 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis)',
265
261
  },
266
262
  ],
267
263
  },
@@ -296,14 +292,14 @@ ruleTester.run('no-color-css-vars', rule, {
296
292
  <Box
297
293
  sx={{
298
294
  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))',
295
+ ? 'inset 2px 0 0 var(--borderColor-neutral-emphasis)'
296
+ : 'inset 2px 0 0 var(--bgColor-attention-emphasis)',
301
297
  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))',
298
+ bg: 'var(--bgColor-default)',
299
+ borderLeft: '1px solid var(--borderColor-default)',
300
+ borderRight: '1px solid var(--borderColor-default)',
301
+ borderTop: '2px solid var(--borderColor-default)',
302
+ borderBottom: '2px solid var(--borderColor-default)',
307
303
  }}
308
304
  />
309
305
  )
@@ -311,26 +307,25 @@ ruleTester.run('no-color-css-vars', rule, {
311
307
  `,
312
308
  errors: [
313
309
  {
314
- message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))',
310
+ message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis)',
315
311
  },
316
312
  {
317
- message:
318
- 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))',
313
+ message: 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis)',
319
314
  },
320
315
  {
321
- message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
316
+ message: 'Replace var(--color-canvas-default) with var(--bgColor-default)',
322
317
  },
323
318
  {
324
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
319
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
325
320
  },
326
321
  {
327
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
322
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
328
323
  },
329
324
  {
330
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
325
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
331
326
  },
332
327
  {
333
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
328
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
334
329
  },
335
330
  ],
336
331
  },
@@ -361,10 +356,10 @@ ruleTester.run('no-color-css-vars', rule, {
361
356
  <Box
362
357
  style={{
363
358
  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))',
359
+ ? 'inset 2px 0 0 var(--borderColor-neutral-emphasis)'
360
+ : 'inset 2px 0 0 var(--bgColor-attention-emphasis)',
366
361
  color: 'var(--fgColor-default)',
367
- bg: 'var(--bgColor-default, var(--color-canvas-default))'
362
+ bg: 'var(--bgColor-default)'
368
363
  }}
369
364
  />
370
365
  )
@@ -372,14 +367,13 @@ ruleTester.run('no-color-css-vars', rule, {
372
367
  `,
373
368
  errors: [
374
369
  {
375
- message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))',
370
+ message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis)',
376
371
  },
377
372
  {
378
- message:
379
- 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))',
373
+ message: 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis)',
380
374
  },
381
375
  {
382
- message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
376
+ message: 'Replace var(--color-canvas-default) with var(--bgColor-default)',
383
377
  },
384
378
  ],
385
379
  },
@@ -405,28 +399,28 @@ ruleTester.run('no-color-css-vars', rule, {
405
399
  lineHeight: '100%',
406
400
  },
407
401
  thead: {
408
- background: 'var(--bgColor-muted, var(--color-canvas-subtle))',
402
+ background: 'var(--bgColor-muted)',
409
403
  borderBottom: '1px solid',
410
- borderColor: 'var(--borderColor-default, var(--color-border-default))',
404
+ borderColor: 'var(--borderColor-default)',
411
405
  },
412
406
  }
413
407
  `,
414
408
  errors: [
415
409
  {
416
- message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))',
410
+ message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)',
417
411
  },
418
412
  {
419
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
413
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
420
414
  },
421
415
  ],
422
416
  },
423
417
  {
424
418
  name: 'inline sx',
425
419
  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>`,
420
+ output: `<Box sx={{outline: '2px solid var(--focus-outlineColor)'}}>Test</Box>`,
427
421
  errors: [
428
422
  {
429
- message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor, var(--color-accent-fg))',
423
+ message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor)',
430
424
  },
431
425
  ],
432
426
  },
@@ -442,18 +436,18 @@ ruleTester.run('no-color-css-vars', rule, {
442
436
  `,
443
437
  output: `
444
438
  <Box sx={{
445
- color: 'var(--fgColor-muted, var(--color-fg-subtle))',
439
+ color: 'var(--fgColor-muted)',
446
440
  '&:hover': {
447
- color: 'var(--fgColor-accent, var(--color-accent-fg))',
441
+ color: 'var(--fgColor-accent)',
448
442
  }
449
443
  }}>Test</Box>
450
444
  `,
451
445
  errors: [
452
446
  {
453
- message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted, var(--color-fg-subtle))',
447
+ message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted)',
454
448
  },
455
449
  {
456
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
450
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
457
451
  },
458
452
  ],
459
453
  },
@@ -493,7 +487,7 @@ ruleTester.run('no-color-css-vars', rule, {
493
487
  border: 0,
494
488
  padding: 0,
495
489
  background: 'transparent',
496
- color: isSelected ? 'var(--fgColor-default, var(--color-fg-default))' : 'var(--fgColor-muted, var(--color-fg-muted))',
490
+ color: isSelected ? 'var(--fgColor-default)' : 'var(--fgColor-muted)',
497
491
  fontSize: '12px',
498
492
  fontWeight: '600',
499
493
  display: 'flex',
@@ -507,10 +501,10 @@ ruleTester.run('no-color-css-vars', rule, {
507
501
  `,
508
502
  errors: [
509
503
  {
510
- message: 'Replace var(--color-fg-default) with var(--fgColor-default, var(--color-fg-default))',
504
+ message: 'Replace var(--color-fg-default) with var(--fgColor-default)',
511
505
  },
512
506
  {
513
- message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))',
507
+ message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)',
514
508
  },
515
509
  ],
516
510
  },
@@ -545,29 +539,28 @@ ruleTester.run('no-color-css-vars', rule, {
545
539
  ...(fullyRounded
546
540
  ? {
547
541
  borderRadius: '5px',
548
- color: 'var(--fgColor-accent, var(--color-accent-fg))',
542
+ color: 'var(--fgColor-accent)',
549
543
  }
550
544
  : {
551
545
  borderTopRightRadius: '5px',
552
546
  borderBottomRightRadius: '5px',
553
- color: 'var(--fgColor-accent, var(--color-accent-fg))',
547
+ color: 'var(--fgColor-accent)',
554
548
  }),
555
549
  overflow: 'hidden',
556
550
  ':has(input:focus-visible)': {
557
- boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis, var(--color-accent-emphasis))',
551
+ boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis)',
558
552
  },
559
553
  })
560
554
  `,
561
555
  errors: [
562
556
  {
563
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
557
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
564
558
  },
565
559
  {
566
- message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))',
560
+ message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)',
567
561
  },
568
562
  {
569
- message:
570
- 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis, var(--color-accent-emphasis))',
563
+ message: 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis)',
571
564
  },
572
565
  ],
573
566
  },
@@ -601,23 +594,23 @@ ruleTester.run('no-color-css-vars', rule, {
601
594
  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
602
595
  fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
603
596
  fontSize: '12px',
604
- backgroundColor: 'var(--bgColor-default, var(--color-canvas-default))',
605
- border: '1px solid var(--borderColor-default, var(--color-border-default))',
597
+ backgroundColor: 'var(--bgColor-default)',
598
+ border: '1px solid var(--borderColor-default)',
606
599
  borderRadius: 'var(--borderRadius-medium)',
607
- boxShadow: 'var(--shadow-resting-medium, var(--color-shadow-medium))',
600
+ boxShadow: 'var(--shadow-resting-medium)',
608
601
  minWidth: 'auto',
609
602
  }
610
603
  })
611
604
  `,
612
605
  errors: [
613
606
  {
614
- message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))',
607
+ message: 'Replace var(--color-canvas-default) with var(--bgColor-default)',
615
608
  },
616
609
  {
617
- message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))',
610
+ message: 'Replace var(--color-border-default) with var(--borderColor-default)',
618
611
  },
619
612
  {
620
- message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium, var(--color-shadow-medium))',
613
+ message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium)',
621
614
  },
622
615
  ],
623
616
  },
@@ -653,19 +646,19 @@ ruleTester.run('no-color-css-vars', rule, {
653
646
 
654
647
  switch (modification) {
655
648
  case 'ADDED':
656
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis, var(--color-success-fg))'}
649
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis)'}
657
650
  case 'REMOVED':
658
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis, var(--color-danger-fg))'}
651
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis)'}
659
652
  case 'EDITED':
660
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis, var(--color-severe-fg))'}
653
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis)'}
661
654
  case 'accent':
662
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis, var(--color-accent-fg))'}
655
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis)'}
663
656
  case 'done':
664
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis, var(--color-done-fg))'}
657
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis)'}
665
658
  case 'closed':
666
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis, var(--color-closed-fg))'}
659
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis)'}
667
660
  case 'sponsors':
668
- return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))'}
661
+ return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis)'}
669
662
  case 'UNCHANGED':
670
663
  return {}
671
664
  }
@@ -673,26 +666,25 @@ ruleTester.run('no-color-css-vars', rule, {
673
666
  `,
674
667
  errors: [
675
668
  {
676
- message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis, var(--color-success-fg))',
669
+ message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis)',
677
670
  },
678
671
  {
679
- message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis, var(--color-danger-fg))',
672
+ message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis)',
680
673
  },
681
674
  {
682
- message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis, var(--color-severe-fg))',
675
+ message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis)',
683
676
  },
684
677
  {
685
- message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis, var(--color-accent-fg))',
678
+ message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis)',
686
679
  },
687
680
  {
688
- message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis, var(--color-done-fg))',
681
+ message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis)',
689
682
  },
690
683
  {
691
- message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis, var(--color-closed-fg))',
684
+ message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis)',
692
685
  },
693
686
  {
694
- message:
695
- 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))',
687
+ message: 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis)',
696
688
  },
697
689
  ],
698
690
  },
package/src/rules/new-color-css-vars.js CHANGED
@@ -33,10 +33,10 @@ const reportError = (propertyName, valueNode, context, suggestFix = true) => {
33
33
  // report the error
34
34
  context.report({
35
35
  node: valueNode,
36
- message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement}, var(${cssVar}))`,
36
+ message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement})`,
37
37
  fix: suggestFix
38
38
  ? fixer => {
39
- const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}, var(${cssVar})`)
39
+ const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}`)
40
40
  return fixer.replaceText(valueNode, valueNode.type === 'Literal' ? `'${fixedString}'` : fixedString)
41
41
  }
42
42
  : undefined,
package/docs/rules/new-color-css-vars-have-fallback.md DELETED
@@ -1,25 +0,0 @@
1
- ## Ensure new Primitive v8 color CSS vars have a fallback
2
-
3
- This rule is temporary as we begin testing v8 color tokens behind a feature flag. If a color token is used without a fallback, the color will only render if the feature flag is enabled. This rule is an extra safety net to ensure we don't accidentally ship code that relies on the feature flag.
4
-
5
- ## Rule Details
6
-
7
- This rule refers to a JSON file that lists all the new color tokens
8
-
9
- ```json
10
- ["--fgColor-default", "--fgColor-muted", "--fgColor-onEmphasis"]
11
- ```
12
-
13
- If it finds that one of these tokens is used without a fallback, it will throw an error.
14
-
15
- 👎 Examples of **incorrect** code for this rule
16
-
17
- ```jsx
18
- <Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>
19
- ```
20
-
21
- 👍 Examples of **correct** code for this rule:
22
-
23
- ```jsx
24
- <Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>
25
- ```
package/src/rules/__tests__/new-css-vars-have-fallback.test.js DELETED
@@ -1,31 +0,0 @@
1
- const rule = require('../new-color-css-vars-have-fallback')
2
- const {RuleTester} = require('eslint')
3
-
4
- const ruleTester = new RuleTester({
5
- parserOptions: {
6
- ecmaVersion: 'latest',
7
- sourceType: 'module',
8
- ecmaFeatures: {
9
- jsx: true,
10
- },
11
- },
12
- })
13
-
14
- ruleTester.run('new-color-css-vars-have-fallback', rule, {
15
- valid: [
16
- {
17
- code: `<circle stroke="var(--fgColor-muted, var(--color-fg-muted))" strokeWidth="2" />`,
18
- },
19
- ],
20
- invalid: [
21
- {
22
- code: `<circle stroke="var(--fgColor-muted)" strokeWidth="2" />`,
23
- errors: [
24
- {
25
- message:
26
- 'Expected a fallback value for CSS variable --fgColor-muted. New color variables fallbacks, check primer.style/primitives to find the correct value.',
27
- },
28
- ],
29
- },
30
- ],
31
- })