[Breaking] Remove new-color-css-vars-have-fallback (#172)

* cleanup * Create smooth-penguins-exercise.md * cleanup * fix test
primer · May 13, 2024 · 8e24d66 · 8e24d66
1 parent d5025dc
commit 8e24d66
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 573 deletions.
diff --git a/.changeset/smooth-penguins-exercise.md 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
diff --git 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
-<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>
+<Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>
 ```
diff --git 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
@@ -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
diff --git a/src/rules/__tests__/new-css-vars-have-fallback.test.js b/src/rules/__tests__/new-css-vars-have-fallback.test.js
diff --git a/src/rules/new-color-css-vars-have-fallback.js b/src/rules/new-color-css-vars-have-fallback.js
diff --git 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,