Skip to content

Commit e127f22

Browse files
langermanklangermank
committed
add tests
1 parent b7a836d commit e127f22

File tree

4 files changed

+167
-23
lines changed

4 files changed

+167
-23
lines changed

‎src/rules/__tests__/no-color-css-vars.test.js

Lines changed: 91 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,104 @@ const ruleTester = new RuleTester({
1313

1414
// report all strings that start with 'var(--color-'
1515
// autofix strings: 'var(--color-fg-default)' -> 'fg.default'
16-
17-
{
18-
/* <Button sx={{zIndex: 1, color: 'var(--color-fg-muted)'}}> */
19-
}
20-
21-
{
22-
/* <Box sx={{
23-
'&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
24-
color: 'var(--color-accent-fg)',
25-
},
26-
}}
27-
></Box> */
28-
}
16+
// color, backgroundColor, bg,
2917

3018
ruleTester.run('no-color-css-vars', rule, {
3119
valid: [`{color: 'fg.default'}`],
3220
invalid: [
3321
{
34-
code: `{color: 'var(--color-fg-default)'}`,
35-
output: `{color: 'fg.default'}`,
22+
code: `<Button sx={{color: 'var(--color-fg-muted)'}}>Test</Button>`,
23+
output: `<Button sx={{color: 'fg.muted'}}>Test</Button>`,
24+
errors: [
25+
{
26+
message: 'Replace var(--color-fg-muted) with fg.muted'
27+
}
28+
]
29+
},
30+
{
31+
code: `<Box sx={{'&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
32+
color: 'var(--color-accent-fg)',
33+
},
34+
}}></Box>`,
35+
output: `<Box sx={{'&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
36+
color: 'accent.fg',
37+
},
38+
}}></Box>`,
39+
errors: [
40+
{
41+
message: 'Replace var(--color-accent-fg) with accent.fg'
42+
}
43+
]
44+
},
45+
{
46+
code: `<Box sx={{boxShadow: '0 0 0 2px var(--color-canvas-subtle)'}} />`,
47+
output: `<Box sx={{boxShadow: '0 0 0 2px canvas.subtle'}} />`,
48+
errors: [
49+
{
50+
message: 'Replace var(--color-canvas-subtle) with canvas.subtle'
51+
}
52+
]
53+
},
54+
{
55+
code: `<Box sx={{border: 'solid 2px var(--color-border-default)'}} />`,
56+
output: `<Box sx={{border: 'solid 2px border.default'}} />`,
57+
errors: [
58+
{
59+
message: 'Replace var(--color-border-default) with border.default'
60+
}
61+
]
62+
},
63+
{
64+
code: `<Box sx={{borderColor: 'var(--color-border-default)'}} />`,
65+
output: `<Box sx={{borderColor: 'border.default'}} />`,
66+
errors: [
67+
{
68+
message: 'Replace var(--color-border-default) with border.default'
69+
}
70+
]
71+
},
72+
{
73+
code: `<Box sx={{backgroundColor: 'var(--color-canvas-default)'}} />`,
74+
output: `<Box sx={{backgroundColor: 'canvas.default'}} />`,
75+
errors: [
76+
{
77+
message: 'Replace var(--color-canvas-default) with canvas.default'
78+
}
79+
]
80+
},
81+
{
82+
code: `<Box backgroundColor='var(--color-canvas-default)' />`,
83+
output: `<Box backgroundColor='canvas.default' />`,
84+
errors: [
85+
{
86+
message: 'Replace var(--color-canvas-default) with canvas.default'
87+
}
88+
]
89+
},
90+
{
91+
code: `<Box bg='var(--color-canvas-default)' />`,
92+
output: `<Box bg='canvas.default' />`,
93+
errors: [
94+
{
95+
message: 'Replace var(--color-canvas-default) with canvas.default'
96+
}
97+
]
98+
},
99+
// {
100+
// code: `import {sx, SxProp} from '@primer/react' export const HighlightToken = styled.span < SxProp > \`color: var(--color-accent-emphasis); ${sx}\` const ClickableTokenSpan = styled(HighlightToken)\` &:hover, &:focus { background-color: accent.muted;}\``,
101+
// output: `import {sx, SxProp} from '@primer/react' export const HighlightToken = styled.span < SxProp > \`color: accent.emphasis; ${sx}\` const ClickableTokenSpan = styled(HighlightToken)\` &:hover, &:focus { background-color: accent.muted;}\``,
102+
// errors: [
103+
// {
104+
// message: 'Replace var(--color-accent-emphasis) with accent.emphasis'
105+
// }
106+
// ]
107+
// }
108+
{
109+
code: `<circle stroke="var(--color-border-default)" strokeWidth="2" />`,
110+
output: `<circle stroke="var(--color-border-default)" strokeWidth="2" />`,
36111
errors: [
37112
{
38-
message: 'Replace var(--color-fg-default) with fg.default'
113+
message: 'Replace var(--color-border-default) with border.default'
39114
}
40115
]
41116
}

‎src/rules/no-color-css-vars.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const cssVars = require('../temp-fix.json')
1+
const cssVars = require('../utils/css-var-map.json')
22

33
module.exports = {
44
meta: {

‎src/temp-fix.json

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/utils/css-var-map.json

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"--color-canvas-default-transparent": "canvasDefaultTransparent",
3+
"--color-control-border-color-emphasis": "control.borderColor.emphasis",
4+
"--color-action-list-item-inline-divider": "actionListItem.inlineDivider",
5+
"--color-action-list-item-default-hover-bg": "actionListItem.default.hoverBg",
6+
"--color-action-list-item-default-hover-border": "actionListItem.default.hoverBorder",
7+
"--color-action-list-item-default-active-bg": "actionListItem.default.activeBg",
8+
"--color-action-list-item-default-active-border": "actionListItem.default.activeBorder",
9+
"--color-action-list-item-default-selected-bg": "actionListItem.default.selectedBg",
10+
"--color-action-list-item-danger-hover-bg": "actionListItem.danger.hoverBg",
11+
"--color-action-list-item-danger-active-bg": "actionListItem.danger.activeBg",
12+
"--color-action-list-item-danger-hover-text": "actionListItem.danger.hoverText",
13+
"--color-fg-default": "fg.default",
14+
"--color-fg-muted": "fg.muted",
15+
"--color-fg-subtle": "fg.subtle",
16+
"--color-fg-on-emphasis": "fg.onEmphasis",
17+
"--color-canvas-default": "canvas.default",
18+
"--color-canvas-overlay": "canvas.overlay",
19+
"--color-canvas-inset": "canvas.inset",
20+
"--color-canvas-subtle": "canvas.subtle",
21+
"--color-border-default": "border.default",
22+
"--color-border-muted": "border.muted",
23+
"--color-border-subtle": "border.subtle",
24+
"--color-shadow-small": "shadow.small",
25+
"--color-shadow-medium": "shadow.medium",
26+
"--color-shadow-large": "shadow.large",
27+
"--color-shadow-extra-large": "shadow.extraLarge",
28+
"--color-neutral-emphasis-plus": "neutral.emphasisPlus",
29+
"--color-neutral-emphasis": "neutral.emphasis",
30+
"--color-neutral-muted": "neutral.muted",
31+
"--color-neutral-subtle": "neutral.subtle",
32+
"--color-accent-fg": "accent.fg",
33+
"--color-accent-emphasis": "accent.emphasis",
34+
"--color-accent-muted": "accent.muted",
35+
"--color-accent-subtle": "accent.subtle",
36+
"--color-success-fg": "success.fg",
37+
"--color-success-emphasis": "success.emphasis",
38+
"--color-success-muted": "success.muted",
39+
"--color-success-subtle": "success.subtle",
40+
"--color-attention-fg": "attention.fg",
41+
"--color-attention-emphasis": "attention.emphasis",
42+
"--color-attention-muted": "attention.muted",
43+
"--color-attention-subtle": "attention.subtle",
44+
"--color-severe-fg": "severe.fg",
45+
"--color-severe-emphasis": "severe.emphasis",
46+
"--color-severe-muted": "severe.muted",
47+
"--color-severe-subtle": "severe.subtle",
48+
"--color-danger-fg": "danger.fg",
49+
"--color-danger-emphasis": "danger.emphasis",
50+
"--color-danger-muted": "danger.muted",
51+
"--color-danger-subtle": "danger.subtle",
52+
"--color-open-fg": "open.fg",
53+
"--color-open-emphasis": "open.emphasis",
54+
"--color-open-muted": "open.muted",
55+
"--color-open-subtle": "open.subtle",
56+
"--color-closed-fg": "closed.fg",
57+
"--color-closed-emphasis": "closed.emphasis",
58+
"--color-closed-muted": "closed.muted",
59+
"--color-closed-subtle": "closed.subtle",
60+
"--color-done-fg": "done.fg",
61+
"--color-done-emphasis": "done.emphasis",
62+
"--color-done-muted": "done.muted",
63+
"--color-done-subtle": "done.subtle",
64+
"--color-sponsors-fg": "sponsors.fg",
65+
"--color-sponsors-emphasis": "sponsors.emphasis",
66+
"--color-sponsors-muted": "sponsors.muted",
67+
"--color-sponsors-subtle": "sponsors.subtle",
68+
"--color-primer-fg-disabled": "actionListItem",
69+
"--color-primer-canvas-backdrop": "primer.canvas.backdrop",
70+
"--color-primer-canvas-sticky": "primer.canvas.sticky",
71+
"--color-primer-border-active": "primer.border.active",
72+
"--color-primer-border-contrast": "primer.border.contrast",
73+
"--color-primer-shadow-highlight": "primer.shadow.highlight",
74+
"--color-primer-shadow-inset": "primer.shadow.inset"
75+
}

0 commit comments

Comments
 (0)