Skip to content

Commit bf51fb4

Browse files
langermanklangermank
committed
use css vars
1 parent 108b8b5 commit bf51fb4

File tree

5 files changed

+2147
-79
lines changed

5 files changed

+2147
-79
lines changed

‎package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"@changesets/changelog-github": "^0.4.0",
2525
"@changesets/cli": "^2.16.0",
2626
"@github/prettier-config": "0.0.4",
27-
"@primer/primitives": "^5.1.0",
27+
"@primer/primitives": "^7.14.0",
2828
"eslint": "^8.42.0",
2929
"jest": "^27.0.6"
3030
},

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

Lines changed: 46 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ ruleTester.run('no-color-css-vars', rule, {
2929
invalid: [
3030
{
3131
code: `<Button sx={{color: 'var(--color-fg-muted)'}}>Test</Button>`,
32-
output: `<Button sx={{color: 'fg.muted'}}>Test</Button>`,
32+
output: `<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>`,
3333
errors: [
3434
{
35-
message: 'Replace var(--color-fg-muted) with fg.muted'
35+
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
3636
}
3737
]
3838
},
@@ -47,67 +47,40 @@ ruleTester.run('no-color-css-vars', rule, {
4747
output: `
4848
<Box sx={{
4949
'&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
50-
color: 'accent.fg'
50+
color: 'var(--fgColor-accent, var(--color-accent-fg))'
5151
}
5252
}}>
5353
</Box>`,
5454
errors: [
5555
{
56-
message: 'Replace var(--color-accent-fg) with accent.fg'
56+
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))'
5757
}
5858
]
5959
},
6060
{
6161
code: `<Box sx={{boxShadow: '0 0 0 2px var(--color-canvas-subtle)'}} />`,
62-
output: `<Box sx={{boxShadow: '0 0 0 2px canvas.subtle'}} />`,
62+
output: `<Box sx={{boxShadow: '0 0 0 2px var(--bgColor-muted, var(--color-canvas-subtle))'}} />`,
6363
errors: [
6464
{
65-
message: 'Replace var(--color-canvas-subtle) with canvas.subtle'
65+
message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))'
6666
}
6767
]
6868
},
6969
{
7070
code: `<Box sx={{border: 'solid 2px var(--color-border-default)'}} />`,
71-
output: `<Box sx={{border: 'solid 2px border.default'}} />`,
71+
output: `<Box sx={{border: 'solid 2px var(--borderColor-default, var(--color-border-default))'}} />`,
7272
errors: [
7373
{
74-
message: 'Replace var(--color-border-default) with border.default'
75-
}
76-
]
77-
},
78-
{
79-
code: `<Box sx={{borderColor: 'var(--color-border-default)'}} />`,
80-
output: `<Box sx={{borderColor: 'border.default'}} />`,
81-
errors: [
82-
{
83-
message: 'Replace var(--color-border-default) with border.default'
74+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))'
8475
}
8576
]
8677
},
8778
{
8879
code: `<Box sx={{backgroundColor: 'var(--color-canvas-default)'}} />`,
89-
output: `<Box sx={{backgroundColor: 'canvas.default'}} />`,
90-
errors: [
91-
{
92-
message: 'Replace var(--color-canvas-default) with canvas.default'
93-
}
94-
]
95-
},
96-
{
97-
code: `<Box backgroundColor="var(--color-canvas-default)" />`,
98-
output: `<Box backgroundColor="canvas.default" />`,
99-
errors: [
100-
{
101-
message: 'Replace var(--color-canvas-default) with canvas.default'
102-
}
103-
]
104-
},
105-
{
106-
code: `<Box bg="var(--color-canvas-default)" />`,
107-
output: `<Box bg="canvas.default" />`,
80+
output: `<Box sx={{backgroundColor: 'var(--bgColor-default, var(--color-canvas-default))'}} />`,
10881
errors: [
10982
{
110-
message: 'Replace var(--color-canvas-default) with canvas.default'
83+
message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))'
11184
}
11285
]
11386
},
@@ -118,12 +91,12 @@ ruleTester.run('no-color-css-vars', rule, {
11891
export const Fixture = <Button sx={baseStyles}>Test</Button>
11992
`,
12093
output: `
121-
const baseStyles = { color: 'fg.muted' }
94+
const baseStyles = { color: 'var(--fgColor-muted, var(--color-fg-muted))' }
12295
export const Fixture = <Button sx={baseStyles}>Test</Button>
12396
`,
12497
errors: [
12598
{
126-
message: 'Replace var(--color-fg-muted) with fg.muted'
99+
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
127100
}
128101
]
129102
},
@@ -135,14 +108,24 @@ ruleTester.run('no-color-css-vars', rule, {
135108
`,
136109
output: `
137110
import {merge} from '@primer/react'
138-
export const Fixture = props => <Button sx={merge({color: 'fg.muted'}, props.sx)}>Test</Button>
111+
export const Fixture = props => <Button sx={merge({color: 'var(--fgColor-muted, var(--color-fg-muted))'}, props.sx)}>Test</Button>
139112
`,
140113
errors: [
141114
{
142-
message: 'Replace var(--color-fg-muted) with fg.muted'
115+
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
116+
}
117+
]
118+
},
119+
{
120+
code: `<Box sx={{borderColor: 'var(--color-border-default)'}} />`,
121+
output: `<Box sx={{borderColor: 'var(--borderColor-default, var(--color-border-default))'}} />`,
122+
errors: [
123+
{
124+
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))'
143125
}
144126
]
145127
}
128+
// broken tests start below
146129
// {
147130
// name: 'variable in styled.component',
148131
// code: `
@@ -158,7 +141,7 @@ ruleTester.run('no-color-css-vars', rule, {
158141
// output: `
159142
// import {sx, SxProp} from '@primer/react'
160143
// export const HighlightToken = styled.span<SxProp>\`
161-
// color: accent.emphasis;
144+
// color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
162145
// \${sx}
163146
// \`
164147
// const ClickableTokenSpan = styled(HighlightToken)\`
@@ -167,41 +150,42 @@ ruleTester.run('no-color-css-vars', rule, {
167150
// `,
168151
// errors: [
169152
// {
170-
// message: 'Replace var(--color-accent-emphasis) with accent.emphasis'
153+
// message:
154+
// 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))'
171155
// }
172156
// ]
173-
// },
157+
// }
174158
// {
175159
// name: 'MemberExpression in sx: not handled',
176160
// code: `
177161
// const colors = { muted: 'var(--color-fg-muted)' }
178162
// export const Fixture = <Button sx={colors.muted}>Test</Button>
179163
// `,
180164
// output: `
181-
// const colors = { muted: 'fg.muted' }
165+
// const colors = { muted: 'var(--fgColor-muted, var(--color-fg-muted))' }
182166
// export const Fixture = <Button sx={colors.muted}>Test</Button>
183167
// `,
184168
// errors: [
185169
// {
186-
// message: 'Replace var(--color-fg-muted) with fg.muted'
187-
// }
188-
// ]
189-
// },
190-
// {
191-
// name: 'CallExpression in sx: not handled',
192-
// code: `
193-
// const getColors = () => 'var(--color-fg-muted)'
194-
// export const Fixture = <Button sx={getColors()}>Test</Button>
195-
// `,
196-
// output: `
197-
// const getColors = () => 'fg.muted'
198-
// export const Fixture = <Button sx={getColors()}>Test</Button>
199-
// `,
200-
// errors: [
201-
// {
202-
// message: 'Replace var(--color-fg-muted) with fg.muted'
170+
// message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
203171
// }
204172
// ]
205173
// }
174+
// {
175+
// name: 'CallExpression in sx: not handled',
176+
// code: `
177+
// const getColors = () => 'var(--color-fg-muted)'
178+
// export const Fixture = <Button sx={getColors()}>Test</Button>
179+
// `,
180+
// output: `
181+
// const getColors = () => 'var(--fgColor-muted, var(--color-fg-muted))'
182+
// export const Fixture = <Button sx={getColors()}>Test</Button>
183+
// `,
184+
// errors: [
185+
// {
186+
// message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
187+
// }
188+
// ]
189+
// }
206190
]
207191
})

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

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const cssVars = require('../utils/css-var-map.json')
1+
const cssVars = require('../utils/css-variable-map.json')
22

33
module.exports = {
44
meta: {
@@ -77,15 +77,34 @@ module.exports = {
7777
// performance optimisation: exit early
7878
if (!rawText.includes('var')) return
7979

80-
Object.keys(cssVars).forEach(cssVar => {
81-
if (rawText.includes(`var(${cssVar}`)) {
82-
const fixedString = rawText.replace(`var(${cssVar})`, cssVars[cssVar])
80+
// Object.keys(cssVars).forEach(cssVar => {
81+
// if (rawText.includes(`var(${cssVar}`)) {
82+
// const fixedString = rawText.replace(`var(${cssVar})`, cssVars[cssVar])
83+
84+
// context.report({
85+
// node,
86+
// message: `Replace var(${cssVar}) with ${cssVars[cssVar]}`,
87+
// fix: function(fixer) {
88+
// return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
89+
// }
90+
// })
91+
// }
92+
// })
8393

84-
context.report({
85-
node,
86-
message: `Replace var(${cssVar}) with ${cssVars[cssVar]}`,
87-
fix: function(fixer) {
88-
return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
94+
console.log('Rule is being executed')
95+
Object.keys(cssVars).forEach(cssVar => {
96+
if (Array.isArray(cssVars[cssVar])) {
97+
cssVars[cssVar].forEach(cssVarObject => {
98+
const regex = new RegExp(`var\\(${cssVar}\\)`, 'g')
99+
if (cssVarObject.props.some(prop => rawText.includes(prop)) && regex.test(rawText)) {
100+
const fixedString = rawText.replace(regex, `var(${cssVarObject.replacement}, var(${cssVar}))`)
101+
context.report({
102+
node,
103+
message: `Replace var(${cssVar}) with var(${cssVarObject.replacement}, var(${cssVar}))`,
104+
fix: function(fixer) {
105+
return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
106+
}
107+
})
89108
}
90109
})
91110
}

0 commit comments

Comments
 (0)