Skip to content

Commit

Permalink
use css vars
Browse files Browse the repository at this point in the history
  • Loading branch information
@langermank
langermank committed Sep 25, 2023
1 parent 108b8b5 commit bf51fb4
Show file tree
Hide file tree
Showing 5 changed files with 2,147 additions and 79 deletions.
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@changesets/changelog-github": "^0.4.0",
"@changesets/cli": "^2.16.0",
"@github/prettier-config": "0.0.4",
"@primer/primitives": "^5.1.0",
"@primer/primitives": "^7.14.0",
"eslint": "^8.42.0",
"jest": "^27.0.6"
},
Expand Down
108 changes: 46 additions & 62 deletions src/rules/__tests__/no-color-css-vars.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ ruleTester.run('no-color-css-vars', rule, {
invalid: [
{
code: `<Button sx={{color: 'var(--color-fg-muted)'}}>Test</Button>`,
output: `<Button sx={{color: 'fg.muted'}}>Test</Button>`,
output: `<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>`,
errors: [
{
message: 'Replace var(--color-fg-muted) with fg.muted'
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
}
]
},
Expand All @@ -47,67 +47,40 @@ ruleTester.run('no-color-css-vars', rule, {
output: `
<Box sx={{
'&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
color: 'accent.fg'
color: 'var(--fgColor-accent, var(--color-accent-fg))'
}
}}>
</Box>`,
errors: [
{
message: 'Replace var(--color-accent-fg) with accent.fg'
message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))'
}
]
},
{
code: `<Box sx={{boxShadow: '0 0 0 2px var(--color-canvas-subtle)'}} />`,
output: `<Box sx={{boxShadow: '0 0 0 2px canvas.subtle'}} />`,
output: `<Box sx={{boxShadow: '0 0 0 2px var(--bgColor-muted, var(--color-canvas-subtle))'}} />`,
errors: [
{
message: 'Replace var(--color-canvas-subtle) with canvas.subtle'
message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))'
}
]
},
{
code: `<Box sx={{border: 'solid 2px var(--color-border-default)'}} />`,
output: `<Box sx={{border: 'solid 2px border.default'}} />`,
output: `<Box sx={{border: 'solid 2px var(--borderColor-default, var(--color-border-default))'}} />`,
errors: [
{
message: 'Replace var(--color-border-default) with border.default'
}
]
},
{
code: `<Box sx={{borderColor: 'var(--color-border-default)'}} />`,
output: `<Box sx={{borderColor: 'border.default'}} />`,
errors: [
{
message: 'Replace var(--color-border-default) with border.default'
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))'
}
]
},
{
code: `<Box sx={{backgroundColor: 'var(--color-canvas-default)'}} />`,
output: `<Box sx={{backgroundColor: 'canvas.default'}} />`,
errors: [
{
message: 'Replace var(--color-canvas-default) with canvas.default'
}
]
},
{
code: `<Box backgroundColor="var(--color-canvas-default)" />`,
output: `<Box backgroundColor="canvas.default" />`,
errors: [
{
message: 'Replace var(--color-canvas-default) with canvas.default'
}
]
},
{
code: `<Box bg="var(--color-canvas-default)" />`,
output: `<Box bg="canvas.default" />`,
output: `<Box sx={{backgroundColor: 'var(--bgColor-default, var(--color-canvas-default))'}} />`,
errors: [
{
message: 'Replace var(--color-canvas-default) with canvas.default'
message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))'
}
]
},
Expand All @@ -118,12 +91,12 @@ ruleTester.run('no-color-css-vars', rule, {
export const Fixture = <Button sx={baseStyles}>Test</Button>
`,
output: `
const baseStyles = { color: 'fg.muted' }
const baseStyles = { color: 'var(--fgColor-muted, var(--color-fg-muted))' }
export const Fixture = <Button sx={baseStyles}>Test</Button>
`,
errors: [
{
message: 'Replace var(--color-fg-muted) with fg.muted'
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
}
]
},
Expand All @@ -135,14 +108,24 @@ ruleTester.run('no-color-css-vars', rule, {
`,
output: `
import {merge} from '@primer/react'
export const Fixture = props => <Button sx={merge({color: 'fg.muted'}, props.sx)}>Test</Button>
export const Fixture = props => <Button sx={merge({color: 'var(--fgColor-muted, var(--color-fg-muted))'}, props.sx)}>Test</Button>
`,
errors: [
{
message: 'Replace var(--color-fg-muted) with fg.muted'
message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
}
]
},
{
code: `<Box sx={{borderColor: 'var(--color-border-default)'}} />`,
output: `<Box sx={{borderColor: 'var(--borderColor-default, var(--color-border-default))'}} />`,
errors: [
{
message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))'
}
]
}
// broken tests start below
// {
// name: 'variable in styled.component',
// code: `
Expand All @@ -158,7 +141,7 @@ ruleTester.run('no-color-css-vars', rule, {
// output: `
// import {sx, SxProp} from '@primer/react'
// export const HighlightToken = styled.span<SxProp>\`
// color: accent.emphasis;
// color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
// \${sx}
// \`
// const ClickableTokenSpan = styled(HighlightToken)\`
Expand All @@ -167,41 +150,42 @@ ruleTester.run('no-color-css-vars', rule, {
// `,
// errors: [
// {
// message: 'Replace var(--color-accent-emphasis) with accent.emphasis'
// message:
// 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))'
// }
// ]
// },
// }
// {
// name: 'MemberExpression in sx: not handled',
// code: `
// const colors = { muted: 'var(--color-fg-muted)' }
// export const Fixture = <Button sx={colors.muted}>Test</Button>
// `,
// output: `
// const colors = { muted: 'fg.muted' }
// const colors = { muted: 'var(--fgColor-muted, var(--color-fg-muted))' }
// export const Fixture = <Button sx={colors.muted}>Test</Button>
// `,
// errors: [
// {
// message: 'Replace var(--color-fg-muted) with fg.muted'
// }
// ]
// },
// {
// name: 'CallExpression in sx: not handled',
// code: `
// const getColors = () => 'var(--color-fg-muted)'
// export const Fixture = <Button sx={getColors()}>Test</Button>
// `,
// output: `
// const getColors = () => 'fg.muted'
// export const Fixture = <Button sx={getColors()}>Test</Button>
// `,
// errors: [
// {
// message: 'Replace var(--color-fg-muted) with fg.muted'
// message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
// }
// ]
// }
// {
// name: 'CallExpression in sx: not handled',
// code: `
// const getColors = () => 'var(--color-fg-muted)'
// export const Fixture = <Button sx={getColors()}>Test</Button>
// `,
// output: `
// const getColors = () => 'var(--fgColor-muted, var(--color-fg-muted))'
// export const Fixture = <Button sx={getColors()}>Test</Button>
// `,
// errors: [
// {
// message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
// }
// ]
// }
]
})
37 changes: 28 additions & 9 deletions src/rules/no-color-css-vars.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const cssVars = require('../utils/css-var-map.json')
const cssVars = require('../utils/css-variable-map.json')

module.exports = {
meta: {
Expand Down Expand Up @@ -77,15 +77,34 @@ module.exports = {
// performance optimisation: exit early
if (!rawText.includes('var')) return

Object.keys(cssVars).forEach(cssVar => {
if (rawText.includes(`var(${cssVar}`)) {
const fixedString = rawText.replace(`var(${cssVar})`, cssVars[cssVar])
// Object.keys(cssVars).forEach(cssVar => {
// if (rawText.includes(`var(${cssVar}`)) {
// const fixedString = rawText.replace(`var(${cssVar})`, cssVars[cssVar])

// context.report({
// node,
// message: `Replace var(${cssVar}) with ${cssVars[cssVar]}`,
// fix: function(fixer) {
// return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
// }
// })
// }
// })

context.report({
node,
message: `Replace var(${cssVar}) with ${cssVars[cssVar]}`,
fix: function(fixer) {
return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
console.log('Rule is being executed')
Object.keys(cssVars).forEach(cssVar => {
if (Array.isArray(cssVars[cssVar])) {
cssVars[cssVar].forEach(cssVarObject => {
const regex = new RegExp(`var\\(${cssVar}\\)`, 'g')
if (cssVarObject.props.some(prop => rawText.includes(prop)) && regex.test(rawText)) {
const fixedString = rawText.replace(regex, `var(${cssVarObject.replacement}, var(${cssVar}))`)
context.report({
node,
message: `Replace var(${cssVar}) with var(${cssVarObject.replacement}, var(${cssVar}))`,
fix: function(fixer) {
return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
}
})
}
})
}
Expand Down
Loading

0 comments on commit bf51fb4

Please sign in to comment.