diff --git a/.changeset/smooth-penguins-exercise.md b/.changeset/smooth-penguins-exercise.md new file mode 100644 index 00000000..a7e303fb --- /dev/null +++ b/.changeset/smooth-penguins-exercise.md @@ -0,0 +1,5 @@ +--- +"eslint-plugin-primer-react": major +--- + +[Breaking] Remove `new-color-css-vars-have-fallback` diff --git a/docs/rules/new-color-css-vars-have-fallback.md b/docs/rules/new-color-css-vars-have-fallback.md deleted file mode 100644 index ad976430..00000000 --- a/docs/rules/new-color-css-vars-have-fallback.md +++ /dev/null @@ -1,25 +0,0 @@ -## Ensure new Primitive v8 color CSS vars have a fallback - -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. - -## Rule Details - -This rule refers to a JSON file that lists all the new color tokens - -```json -["--fgColor-default", "--fgColor-muted", "--fgColor-onEmphasis"] -``` - -If it finds that one of these tokens is used without a fallback, it will throw an error. - -👎 Examples of **incorrect** code for this rule - -```jsx - -``` - -👍 Examples of **correct** code for this rule: - -```jsx - -``` diff --git a/docs/rules/new-css-color-vars.md b/docs/rules/new-css-color-vars.md index 41766442..e877e25b 100644 --- a/docs/rules/new-css-color-vars.md +++ b/docs/rules/new-css-color-vars.md @@ -2,7 +2,7 @@ CSS variables are allowed within the `sx` prop in Primer React components. However, the legacy color CSS variables are deprecated in favor of the new CSS variables introduced in Primitives v8. This rule will warn you if you are using the -deprecated color CSS variables in the `sx` prop, and autofix it including a fallback to the old value. +deprecated color CSS variables in the `sx` prop, and autofix it. ## Rule Details @@ -36,5 +36,5 @@ one based on the property. We only check `sx` because `stylelint` is used to lin 👍 Examples of **correct** code for this rule: ```jsx - + ``` diff --git a/src/configs/recommended.js b/src/configs/recommended.js index e1c62bee..a1204151 100644 --- a/src/configs/recommended.js +++ b/src/configs/recommended.js @@ -16,7 +16,6 @@ module.exports = { 'primer-react/a11y-tooltip-interactive-trigger': 'error', 'primer-react/new-color-css-vars': 'error', 'primer-react/a11y-explicit-heading': 'error', - 'primer-react/new-color-css-vars-have-fallback': 'error', 'primer-react/no-deprecated-props': 'warn', }, settings: { diff --git a/src/index.js b/src/index.js index e5968c9a..134eb161 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,6 @@ module.exports = { 'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'), 'new-color-css-vars': require('./rules/new-color-css-vars'), 'a11y-explicit-heading': require('./rules/a11y-explicit-heading'), - 'new-color-css-vars-have-fallback': require('./rules/new-color-css-vars-have-fallback'), 'no-deprecated-props': require('./rules/no-deprecated-props'), }, configs: { diff --git a/src/rules/__tests__/new-color-css-vars.test.js b/src/rules/__tests__/new-color-css-vars.test.js index 8afece87..51e0cb63 100644 --- a/src/rules/__tests__/new-color-css-vars.test.js +++ b/src/rules/__tests__/new-color-css-vars.test.js @@ -43,46 +43,46 @@ ruleTester.run('no-color-css-vars', rule, { { name: 'attribute: simple variable', code: ``, - output: ``, + output: ``, errors: [ { - message: 'Replace var(--color-done-fg) with var(--fgColor-done, var(--color-done-fg))', + message: 'Replace var(--color-done-fg) with var(--fgColor-done)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, { name: 'attribute: conditional variable', code: ``, - output: ``, + output: ``, errors: [ { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, { name: 'sx: simple variable', code: ``, - output: ``, + output: ``, errors: [ { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, ], }, { name: 'style: simple variable', code: `
`, - output: `
`, + output: `
`, errors: [ { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, @@ -98,13 +98,13 @@ ruleTester.run('no-color-css-vars', rule, { output: ` `, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, ], }, @@ -120,13 +120,13 @@ ruleTester.run('no-color-css-vars', rule, { output: ` `, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, ], }, @@ -150,23 +150,22 @@ ruleTester.run('no-color-css-vars', rule, { boxShadow: \`0px 0px 0px 2px var(--color-accent-fg), 0px 0px 0px 4px var(--color-accent-subtle)\`, } : {} - const bg = 'var(--bgColor-muted, var(--color-canvas-subtle))' - const sx = disabled ? {color: 'var(--fgColor-disabled, var(--color-primer-fg-disabled))'} : undefined + const bg = 'var(--bgColor-muted)' + const sx = disabled ? {color: 'var(--fgColor-disabled)'} : undefined export const Fixture = `, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, { - message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted, var(--color-accent-subtle))', + message: 'Replace var(--color-accent-subtle) with var(--bgColor-accent-muted)', }, { - message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)', }, { - message: - 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled, var(--color-primer-fg-disabled))', + message: 'Replace var(--color-primer-fg-disabled) with var(--fgColor-disabled)', }, ], }, @@ -176,11 +175,11 @@ ruleTester.run('no-color-css-vars', rule, { const extraSx = focused ? {backgroundColor: 'var(--color-canvas-subtle) !important'} : {} `, output: ` - const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted, var(--color-canvas-subtle)) !important'} : {} + const extraSx = focused ? {backgroundColor: 'var(--bgColor-muted) !important'} : {} `, errors: [ { - message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)', }, ], }, @@ -191,12 +190,12 @@ ruleTester.run('no-color-css-vars', rule, { export const Fixture = `, output: ` - const baseStyles = { color: 'var(--fgColor-muted, var(--color-fg-muted))' } + const baseStyles = { color: 'var(--fgColor-muted)' } export const Fixture = `, errors: [ { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, ], }, @@ -208,14 +207,14 @@ ruleTester.run('no-color-css-vars', rule, { `, output: ` import {merge} from '@primer/react' - export const Fixture = props => + export const Fixture = props => `, errors: [ { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, ], }, @@ -234,11 +233,10 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: - 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))', + message: 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis)', }, { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-default) with var(--bgColor-default)', }, ], }, @@ -256,12 +254,10 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: - 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis, var(--color-danger-emphasis))', + message: 'Replace var(--color-danger-emphasis) with var(--bgColor-danger-emphasis)', }, { - message: - 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))', + message: 'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis)', }, ], }, @@ -296,14 +292,14 @@ ruleTester.run('no-color-css-vars', rule, { ) @@ -311,26 +307,25 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))', + message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis)', }, { - message: - 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))', + message: 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis)', }, { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-default) with var(--bgColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, @@ -361,10 +356,10 @@ ruleTester.run('no-color-css-vars', rule, { ) @@ -372,14 +367,13 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis, var(--color-fg-subtle))', + message: 'Replace var(--color-fg-subtle) with var(--borderColor-neutral-emphasis)', }, { - message: - 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis, var(--color-attention-fg))', + message: 'Replace var(--color-attention-fg) with var(--bgColor-attention-emphasis)', }, { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-default) with var(--bgColor-default)', }, ], }, @@ -405,28 +399,28 @@ ruleTester.run('no-color-css-vars', rule, { lineHeight: '100%', }, thead: { - background: 'var(--bgColor-muted, var(--color-canvas-subtle))', + background: 'var(--bgColor-muted)', borderBottom: '1px solid', - borderColor: 'var(--borderColor-default, var(--color-border-default))', + borderColor: 'var(--borderColor-default)', }, } `, errors: [ { - message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted, var(--color-canvas-subtle))', + message: 'Replace var(--color-canvas-subtle) with var(--bgColor-muted)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, ], }, { name: 'inline sx', code: `Test`, - output: `Test`, + output: `Test`, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--focus-outlineColor)', }, ], }, @@ -442,18 +436,18 @@ ruleTester.run('no-color-css-vars', rule, { `, output: ` Test `, errors: [ { - message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted, var(--color-fg-subtle))', + message: 'Replace var(--color-fg-subtle) with var(--fgColor-muted)', }, { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, ], }, @@ -493,7 +487,7 @@ ruleTester.run('no-color-css-vars', rule, { border: 0, padding: 0, background: 'transparent', - color: isSelected ? 'var(--fgColor-default, var(--color-fg-default))' : 'var(--fgColor-muted, var(--color-fg-muted))', + color: isSelected ? 'var(--fgColor-default)' : 'var(--fgColor-muted)', fontSize: '12px', fontWeight: '600', display: 'flex', @@ -507,10 +501,10 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-fg-default) with var(--fgColor-default, var(--color-fg-default))', + message: 'Replace var(--color-fg-default) with var(--fgColor-default)', }, { - message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))', + message: 'Replace var(--color-fg-muted) with var(--fgColor-muted)', }, ], }, @@ -545,29 +539,28 @@ ruleTester.run('no-color-css-vars', rule, { ...(fullyRounded ? { borderRadius: '5px', - color: 'var(--fgColor-accent, var(--color-accent-fg))', + color: 'var(--fgColor-accent)', } : { borderTopRightRadius: '5px', borderBottomRightRadius: '5px', - color: 'var(--fgColor-accent, var(--color-accent-fg))', + color: 'var(--fgColor-accent)', }), overflow: 'hidden', ':has(input:focus-visible)': { - boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis, var(--color-accent-emphasis))', + boxShadow: 'inset 0 0 0 1px var(--borderColor-accent-emphasis)', }, }) `, errors: [ { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, { - message: 'Replace var(--color-accent-fg) with var(--fgColor-accent, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--fgColor-accent)', }, { - message: - 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis, var(--color-accent-emphasis))', + message: 'Replace var(--color-accent-emphasis) with var(--borderColor-accent-emphasis)', }, ], }, @@ -601,23 +594,23 @@ ruleTester.run('no-color-css-vars', rule, { '.cm-tooltip.cm-tooltip-autocomplete > ul': { fontFamily: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace", fontSize: '12px', - backgroundColor: 'var(--bgColor-default, var(--color-canvas-default))', - border: '1px solid var(--borderColor-default, var(--color-border-default))', + backgroundColor: 'var(--bgColor-default)', + border: '1px solid var(--borderColor-default)', borderRadius: 'var(--borderRadius-medium)', - boxShadow: 'var(--shadow-resting-medium, var(--color-shadow-medium))', + boxShadow: 'var(--shadow-resting-medium)', minWidth: 'auto', } }) `, errors: [ { - message: 'Replace var(--color-canvas-default) with var(--bgColor-default, var(--color-canvas-default))', + message: 'Replace var(--color-canvas-default) with var(--bgColor-default)', }, { - message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))', + message: 'Replace var(--color-border-default) with var(--borderColor-default)', }, { - message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium, var(--color-shadow-medium))', + message: 'Replace var(--color-shadow-medium) with var(--shadow-resting-medium)', }, ], }, @@ -653,19 +646,19 @@ ruleTester.run('no-color-css-vars', rule, { switch (modification) { case 'ADDED': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis, var(--color-success-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-success-emphasis)'} case 'REMOVED': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis, var(--color-danger-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-danger-emphasis)'} case 'EDITED': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis, var(--color-severe-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-severe-emphasis)'} case 'accent': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis, var(--color-accent-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-accent-emphasis)'} case 'done': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis, var(--color-done-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-done-emphasis)'} case 'closed': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis, var(--color-closed-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-closed-emphasis)'} case 'sponsors': - return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))'} + return {borderLeft: borderStyle, borderColor: 'var(--borderColor-sponsors-emphasis)'} case 'UNCHANGED': return {} } @@ -673,26 +666,25 @@ ruleTester.run('no-color-css-vars', rule, { `, errors: [ { - message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis, var(--color-success-fg))', + message: 'Replace var(--color-success-fg) with var(--borderColor-success-emphasis)', }, { - message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis, var(--color-danger-fg))', + message: 'Replace var(--color-danger-fg) with var(--borderColor-danger-emphasis)', }, { - message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis, var(--color-severe-fg))', + message: 'Replace var(--color-severe-fg) with var(--borderColor-severe-emphasis)', }, { - message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis, var(--color-accent-fg))', + message: 'Replace var(--color-accent-fg) with var(--borderColor-accent-emphasis)', }, { - message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis, var(--color-done-fg))', + message: 'Replace var(--color-done-fg) with var(--borderColor-done-emphasis)', }, { - message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis, var(--color-closed-fg))', + message: 'Replace var(--color-closed-fg) with var(--borderColor-closed-emphasis)', }, { - message: - 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis, var(--color-sponsors-fg))', + message: 'Replace var(--color-sponsors-fg) with var(--borderColor-sponsors-emphasis)', }, ], }, diff --git a/src/rules/__tests__/new-css-vars-have-fallback.test.js b/src/rules/__tests__/new-css-vars-have-fallback.test.js deleted file mode 100644 index 5b4ab9ae..00000000 --- a/src/rules/__tests__/new-css-vars-have-fallback.test.js +++ /dev/null @@ -1,31 +0,0 @@ -const rule = require('../new-color-css-vars-have-fallback') -const {RuleTester} = require('eslint') - -const ruleTester = new RuleTester({ - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - ecmaFeatures: { - jsx: true, - }, - }, -}) - -ruleTester.run('new-color-css-vars-have-fallback', rule, { - valid: [ - { - code: ``, - }, - ], - invalid: [ - { - code: ``, - errors: [ - { - message: - 'Expected a fallback value for CSS variable --fgColor-muted. New color variables fallbacks, check primer.style/primitives to find the correct value.', - }, - ], - }, - ], -}) diff --git a/src/rules/new-color-css-vars-have-fallback.js b/src/rules/new-color-css-vars-have-fallback.js deleted file mode 100644 index 7c71eecb..00000000 --- a/src/rules/new-color-css-vars-have-fallback.js +++ /dev/null @@ -1,87 +0,0 @@ -const cssVars = require('../utils/new-color-css-vars-map') - -const reportError = (propertyName, valueNode, context) => { - // performance optimisation: exit early - if (valueNode.type !== 'Literal' && valueNode.type !== 'TemplateElement') return - // get property value - const value = valueNode.type === 'Literal' ? valueNode.value : valueNode.value.cooked - // return if value is not a string - if (typeof value !== 'string') return - // return if value does not include variable - if (!value.includes('var(')) return - - const varRegex = /var\([^(),)]+\)/g - - const match = value.match(varRegex) - // return if no matches - if (!match) return - const vars = match.flatMap(match => - match - .slice(4, -1) - .trim() - .split(/\s*,\s*/g), - ) - for (const cssVar of vars) { - // return if no repalcement exists - if (!cssVars?.includes(cssVar)) return - // report the error - context.report({ - node: valueNode, - message: `Expected a fallback value for CSS variable ${cssVar}. New color variables fallbacks, check primer.style/primitives to find the correct value.`, - }) - } -} - -const reportOnObject = (node, context) => { - const propertyName = node.key.name - if (node.value?.type === 'Literal') { - reportError(propertyName, node.value, context) - } else if (node.value?.type === 'ConditionalExpression') { - reportError(propertyName, node.value.consequent, context) - reportError(propertyName, node.value.alternate, context) - } -} - -const reportOnProperty = (node, context) => { - const propertyName = node.name.name - if (node.value?.type === 'Literal') { - reportError(propertyName, node.value, context) - } else if (node.value?.type === 'JSXExpressionContainer' && node.value.expression?.type === 'ConditionalExpression') { - reportError(propertyName, node.value.expression.consequent, context) - reportError(propertyName, node.value.expression.alternate, context) - } -} - -const reportOnValue = (node, context) => { - if (node?.type === 'Literal') { - reportError(undefined, node, context) - } else if (node?.type === 'JSXExpressionContainer' && node.expression?.type === 'ConditionalExpression') { - reportError(undefined, node.value.expression.consequent, context) - reportError(undefined, node.value.expression.alternate, context) - } -} - -const reportOnTemplateElement = (node, context) => { - reportError(undefined, node, context) -} - -module.exports = { - meta: { - type: 'suggestion', - }, - /** @param {import('eslint').Rule.RuleContext} context */ - create(context) { - return { - // sx OR style property on elements - ['JSXAttribute:matches([name.name=sx], [name.name=style]) ObjectExpression Property']: node => - reportOnObject(node, context), - // property on element like stroke or fill - ['JSXAttribute[name.name!=sx][name.name!=style]']: node => reportOnProperty(node, context), - // variable that is a value - [':matches(VariableDeclarator, ReturnStatement) > Literal']: node => reportOnValue(node, context), - // variable that is a value - [':matches(VariableDeclarator, ReturnStatement) > TemplateElement']: node => - reportOnTemplateElement(node, context), - } - }, -} diff --git a/src/rules/new-color-css-vars.js b/src/rules/new-color-css-vars.js index 9efcd429..2332a187 100644 --- a/src/rules/new-color-css-vars.js +++ b/src/rules/new-color-css-vars.js @@ -33,10 +33,10 @@ const reportError = (propertyName, valueNode, context, suggestFix = true) => { // report the error context.report({ node: valueNode, - message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement}, var(${cssVar}))`, + message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement})`, fix: suggestFix ? fixer => { - const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}, var(${cssVar})`) + const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}`) return fixer.replaceText(valueNode, valueNode.type === 'Literal' ? `'${fixedString}'` : fixedString) } : undefined, diff --git a/src/utils/new-color-css-vars-map.json b/src/utils/new-color-css-vars-map.json deleted file mode 100644 index 32ab93a9..00000000 --- a/src/utils/new-color-css-vars-map.json +++ /dev/null @@ -1,326 +0,0 @@ -[ - "--topicTag-borderColor", - "--highlight-neutral-bgColor", - "--page-header-bgColor", - "--diffBlob-addition-fgColor-text", - "--diffBlob-addition-fgColor-num", - "--diffBlob-addition-bgColor-num", - "--diffBlob-addition-bgColor-line", - "--diffBlob-addition-bgColor-word", - "--diffBlob-deletion-fgColor-text", - "--diffBlob-deletion-fgColor-num", - "--diffBlob-deletion-bgColor-num", - "--diffBlob-deletion-bgColor-line", - "--diffBlob-deletion-bgColor-word", - "--diffBlob-hunk-bgColor-num", - "--diffBlob-expander-iconColor", - "--codeMirror-fgColor", - "--codeMirror-bgColor", - "--codeMirror-gutters-bgColor", - "--codeMirror-gutterMarker-fgColor-default", - "--codeMirror-gutterMarker-fgColor-muted", - "--codeMirror-lineNumber-fgColor", - "--codeMirror-cursor-fgColor", - "--codeMirror-selection-bgColor", - "--codeMirror-activeline-bgColor", - "--codeMirror-matchingBracket-fgColor", - "--codeMirror-lines-bgColor", - "--codeMirror-syntax-fgColor-comment", - "--codeMirror-syntax-fgColor-constant", - "--codeMirror-syntax-fgColor-entity", - "--codeMirror-syntax-fgColor-keyword", - "--codeMirror-syntax-fgColor-storage", - "--codeMirror-syntax-fgColor-string", - "--codeMirror-syntax-fgColor-support", - "--codeMirror-syntax-fgColor-variable", - "--header-fgColor-default", - "--header-fgColor-logo", - "--header-bgColor", - "--header-borderColor-divider", - "--headerSearch-bgColor", - "--headerSearch-borderColor", - "--avatar-bgColor", - "--avatar-borderColor", - "--avatar-shadow", - "--avatarStack-fade-bgColor-default", - "--avatarStack-fade-bgColor-muted", - "--control-bgColor-rest", - "--control-bgColor-hover", - "--control-bgColor-active", - "--control-bgColor-disabled", - "--control-bgColor-selected", - "--control-fgColor-rest", - "--control-fgColor-placeholder", - "--control-fgColor-disabled", - "--control-borderColor-rest", - "--control-borderColor-emphasis", - "--control-borderColor-disabled", - "--control-borderColor-selected", - "--control-borderColor-success", - "--control-borderColor-danger", - "--control-borderColor-warning", - "--control-iconColor-rest", - "--control-transparent-bgColor-rest", - "--control-transparent-bgColor-hover", - "--control-transparent-bgColor-active", - "--control-transparent-bgColor-disabled", - "--control-transparent-bgColor-selected", - "--control-transparent-borderColor-rest", - "--control-transparent-borderColor-hover", - "--control-transparent-borderColor-active", - "--control-danger-fgColor-rest", - "--control-danger-fgColor-hover", - "--control-danger-bgColor-hover", - "--control-danger-bgColor-active", - "--control-checked-bgColor-rest", - "--control-checked-bgColor-hover", - "--control-checked-bgColor-active", - "--control-checked-bgColor-disabled", - "--control-checked-fgColor-rest", - "--control-checked-fgColor-disabled", - "--control-checked-borderColor-rest", - "--control-checked-borderColor-hover", - "--control-checked-borderColor-active", - "--control-checked-borderColor-disabled", - "--controlTrack-bgColor-rest", - "--controlTrack-bgColor-hover", - "--controlTrack-bgColor-active", - "--controlTrack-bgColor-disabled", - "--controlTrack-fgColor-rest", - "--controlTrack-fgColor-disabled", - "--controlTrack-borderColor-rest", - "--controlTrack-borderColor-disabled", - "--controlKnob-bgColor-rest", - "--controlKnob-bgColor-disabled", - "--controlKnob-bgColor-checked", - "--controlKnob-borderColor-rest", - "--controlKnob-borderColor-disabled", - "--controlKnob-borderColor-checked", - "--counter-borderColor", - "--button-default-fgColor-rest", - "--button-default-bgColor-rest", - "--button-default-bgColor-hover", - "--button-default-bgColor-active", - "--button-default-bgColor-selected", - "--button-default-bgColor-disabled", - "--button-default-borderColor-rest", - "--button-default-borderColor-hover", - "--button-default-borderColor-active", - "--button-default-borderColor-disabled", - "--button-default-shadow-resting", - "--button-primary-fgColor-rest", - "--button-primary-fgColor-disabled", - "--button-primary-iconColor-rest", - "--button-primary-bgColor-rest", - "--button-primary-bgColor-hover", - "--button-primary-bgColor-active", - "--button-primary-bgColor-disabled", - "--button-primary-borderColor-rest", - "--button-primary-borderColor-hover", - "--button-primary-borderColor-active", - "--button-primary-borderColor-disabled", - "--button-primary-shadow-selected", - "--button-invisible-fgColor-rest", - "--button-invisible-fgColor-hover", - "--button-invisible-fgColor-disabled", - "--button-invisible-iconColor-rest", - "--button-invisible-iconColor-hover", - "--button-invisible-iconColor-disabled", - "--button-invisible-bgColor-rest", - "--button-invisible-bgColor-hover", - "--button-invisible-bgColor-active", - "--button-invisible-bgColor-disabled", - "--button-invisible-borderColor-rest", - "--button-invisible-borderColor-hover", - "--button-invisible-borderColor-disabled", - "--button-outline-fgColor-rest", - "--button-outline-fgColor-hover", - "--button-outline-fgColor-active", - "--button-outline-fgColor-disabled", - "--button-outline-bgColor-rest", - "--button-outline-bgColor-hover", - "--button-outline-bgColor-active", - "--button-outline-bgColor-disabled", - "--button-outline-borderColor-hover", - "--button-outline-borderColor-selected", - "--button-outline-shadow-selected", - "--button-danger-fgColor-rest", - "--button-danger-fgColor-hover", - "--button-danger-fgColor-active", - "--button-danger-fgColor-disabled", - "--button-danger-iconColor-rest", - "--button-danger-iconColor-hover", - "--button-danger-bgColor-rest", - "--button-danger-bgColor-hover", - "--button-danger-bgColor-active", - "--button-danger-bgColor-disabled", - "--button-danger-borderColor-rest", - "--button-danger-borderColor-hover", - "--button-danger-borderColor-active", - "--button-danger-shadow-selected", - "--button-inactive-fgColor-rest", - "--button-inactive-bgColor-rest", - "--buttonCounter-default-bgColor-rest", - "--buttonCounter-invisible-bgColor-rest", - "--buttonCounter-primary-bgColor-rest", - "--buttonCounter-outline-bgColor-rest", - "--buttonCounter-outline-bgColor-hover", - "--buttonCounter-outline-bgColor-disabled", - "--buttonCounter-outline-fgColor-rest", - "--buttonCounter-outline-fgColor-hover", - "--buttonCounter-outline-fgColor-disabled", - "--buttonCounter-danger-bgColor-hover", - "--buttonCounter-danger-bgColor-disabled", - "--buttonCounter-danger-bgColor-rest", - "--buttonCounter-danger-fgColor-rest", - "--buttonCounter-danger-fgColor-hover", - "--buttonCounter-danger-fgColor-disabled", - "--focus-outlineColor", - "--menu-bgColor-active", - "--overlay-bgColor", - "--overlay-backdrop-bgColor", - "--selectMenu-borderColor", - "--selectMenu-bgColor-active", - "--sideNav-bgColor-selected", - "--skeletonLoader-bgColor", - "--timelineBadge-bgColor", - "--treeViewItem-leadingVisual-iconColor-rest", - "--underlineNav-borderColor-active", - "--underlineNav-borderColor-hover", - "--underlineNav-iconColor-rest", - "--fgColor-default", - "--fgColor-muted", - "--fgColor-onEmphasis", - "--fgColor-onInverse", - "--fgColor-disabled", - "--fgColor-link", - "--fgColor-link-onInverse", - "--fgColor-neutral", - "--fgColor-neutral-onInverse", - "--fgColor-accent", - "--fgColor-accent-onInverse", - "--fgColor-success", - "--fgColor-success-onInverse", - "--fgColor-attention", - "--fgColor-attention-onInverse", - "--fgColor-severe", - "--fgColor-severe-onInverse", - "--fgColor-danger", - "--fgColor-danger-onInverse", - "--fgColor-open", - "--fgColor-open-onInverse", - "--fgColor-closed", - "--fgColor-closed-onInverse", - "--fgColor-done", - "--fgColor-done-onInverse", - "--fgColor-sponsors", - "--fgColor-sponsors-onInverse", - "--bgColor-default", - "--bgColor-muted", - "--bgColor-inset", - "--bgColor-emphasis", - "--bgColor-inverse", - "--bgColor-disabled", - "--bgColor-transparent", - "--bgColor-neutral-muted", - "--bgColor-neutral-emphasis", - "--bgColor-accent-muted", - "--bgColor-accent-emphasis", - "--bgColor-success-muted", - "--bgColor-success-emphasis", - "--bgColor-attention-muted", - "--bgColor-attention-emphasis", - "--bgColor-severe-muted", - "--bgColor-severe-emphasis", - "--bgColor-danger-muted", - "--bgColor-danger-emphasis", - "--bgColor-open-muted", - "--bgColor-open-emphasis", - "--bgColor-closed-muted", - "--bgColor-closed-emphasis", - "--bgColor-done-muted", - "--bgColor-done-emphasis", - "--bgColor-sponsors-muted", - "--bgColor-sponsors-emphasis", - "--borderColor-default", - "--borderColor-muted", - "--borderColor-emphasis", - "--borderColor-disabled", - "--borderColor-transparent", - "--borderColor-neutral-muted", - "--borderColor-neutral-emphasis", - "--borderColor-accent-muted", - "--borderColor-accent-emphasis", - "--borderColor-success-muted", - "--borderColor-success-emphasis", - "--borderColor-attention-muted", - "--borderColor-attention-emphasis", - "--borderColor-severe-muted", - "--borderColor-severe-emphasis", - "--borderColor-danger-muted", - "--borderColor-danger-emphasis", - "--borderColor-open-muted", - "--borderColor-open-emphasis", - "--borderColor-closed-muted", - "--borderColor-closed-emphasis", - "--borderColor-done-muted", - "--borderColor-done-emphasis", - "--borderColor-sponsors-muted", - "--borderColor-sponsors-emphasis", - "--color-ansi-black", - "--color-ansi-black-bright", - "--color-ansi-white", - "--color-ansi-white-bright", - "--color-ansi-gray", - "--color-ansi-red", - "--color-ansi-red-bright", - "--color-ansi-green", - "--color-ansi-green-bright", - "--color-ansi-yellow", - "--color-ansi-yellow-bright", - "--color-ansi-blue", - "--color-ansi-blue-bright", - "--color-ansi-magenta", - "--color-ansi-magenta-bright", - "--color-ansi-cyan", - "--color-ansi-cyan-bright", - "--color-prettylights-syntax-comment", - "--color-prettylights-syntax-constant", - "--color-prettylights-syntax-constant-other-reference-link", - "--color-prettylights-syntax-entity", - "--color-prettylights-syntax-storage-modifier-import", - "--color-prettylights-syntax-entity-tag", - "--color-prettylights-syntax-keyword", - "--color-prettylights-syntax-string", - "--color-prettylights-syntax-variable", - "--color-prettylights-syntax-brackethighlighter-unmatched", - "--color-prettylights-syntax-brackethighlighter-angle", - "--color-prettylights-syntax-invalid-illegal-text", - "--color-prettylights-syntax-invalid-illegal-bg", - "--color-prettylights-syntax-carriage-return-text", - "--color-prettylights-syntax-carriage-return-bg", - "--color-prettylights-syntax-string-regexp", - "--color-prettylights-syntax-markup-list", - "--color-prettylights-syntax-markup-heading", - "--color-prettylights-syntax-markup-italic", - "--color-prettylights-syntax-markup-bold", - "--color-prettylights-syntax-markup-deleted-text", - "--color-prettylights-syntax-markup-deleted-bg", - "--color-prettylights-syntax-markup-inserted-text", - "--color-prettylights-syntax-markup-inserted-bg", - "--color-prettylights-syntax-markup-changed-text", - "--color-prettylights-syntax-markup-changed-bg", - "--color-prettylights-syntax-markup-ignored-text", - "--color-prettylights-syntax-markup-ignored-bg", - "--color-prettylights-syntax-meta-diff-range", - "--color-prettylights-syntax-sublimelinter-gutter-mark", - "--shadow-inset", - "--shadow-resting-xsmall", - "--shadow-resting-small", - "--shadow-resting-medium", - "--shadow-floating-small", - "--shadow-floating-medium", - "--shadow-floating-large", - "--shadow-floating-xlarge", - "--outline-focus" -]