Remove inline fallback var for no-deprecated-colors (#337)

* remove inline fallback * Create odd-needles-confess.md * small update from testing
primer · Jun 12, 2023 · 6bf0fd6 · 6bf0fd6
1 parent b14c154
commit 6bf0fd6
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 16 deletions.
diff --git a/.changeset/odd-needles-confess.md b/.changeset/odd-needles-confess.md
@@ -0,0 +1,5 @@
+---
+"@primer/stylelint-config": patch
+---
+
+Remove inline fallback var for no-deprecated-colors
diff --git a/__tests__/no-deprecated-colors.js b/__tests__/no-deprecated-colors.js
@@ -13,32 +13,29 @@ testRule({
   ],
   fix: true,
   accept: [
-    {code: '.x { color: var(--fgColor-default, var(--color-fg-default)); }'},
+    {code: '.x { color: var(--fgColor-default); }'},
     {
-      code: '@include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));'
-    },
-    {
-      code: '@include focusOutline(2px, var(--color-accent-fg));'
+      code: '@include focusOutline(2px, var(--focus-outlineColor));'
     }
   ],
   reject: [
     {
       code: '.x { color: var(--color-fg-default); }',
-      fixed: '.x { color: var(--fgColor-default, var(--color-fg-default)); }',
+      fixed: '.x { color: var(--fgColor-default); }',
       message: `Variable --color-fg-default is deprecated for property color. Please use the replacement --fgColor-default. (primer/no-deprecated-colors)`,
       line: 1,
       column: 6
     },
     {
       code: '.x { border-right: $border-width $border-style var(--color-border-muted); }',
-      fixed: '.x { border-right: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); }',
+      fixed: '.x { border-right: $border-width $border-style var(--borderColor-muted); }',
       message: `Variable --color-border-muted is deprecated for property border-right. Please use the replacement --borderColor-muted. (primer/no-deprecated-colors)`,
       line: 1,
       column: 6
     },
     {
       code: '.x { border-color: var(--color-primer-border-contrast); }',
-      fixed: '.x { border-color: var(--borderColor-muted, var(--color-primer-border-contrast)); }',
+      fixed: '.x { border-color: var(--borderColor-muted); }',
       message: `Variable --color-primer-border-contrast is deprecated for property border-color. Please use the replacement --borderColor-muted. (primer/no-deprecated-colors)`,
       line: 1,
       column: 6
@@ -52,15 +49,22 @@ testRule({
     },
     {
       code: '.x { background-color: var(--color-canvas-default-transparent); }',
-      fixed: '.x { background-color: var(transparent, var(--color-canvas-default-transparent)); }',
-      message: `Variable --color-canvas-default-transparent is deprecated for property background-color. Please use the replacement transparent. (primer/no-deprecated-colors)`,
+      fixed: '.x { background-color: var(--bgColor-transparent); }',
+      message: `Variable --color-canvas-default-transparent is deprecated for property background-color. Please use the replacement --bgColor-transparent. (primer/no-deprecated-colors)`,
+      line: 1,
+      column: 6
+    },
+    {
+      code: '.x { border-color: var(--color-canvas-default-transparent); }',
+      fixed: '.x { border-color: var(--borderColor-transparent); }',
+      message: `Variable --color-canvas-default-transparent is deprecated for property border-color. Please use the replacement --borderColor-transparent. (primer/no-deprecated-colors)`,
       line: 1,
       column: 6
     },
     {
       code: '.x { border: 1px solid var(--color-neutral-emphasis); .foo { background-color: var(--color-neutral-emphasis); } }',
       fixed:
-        '.x { border: 1px solid var(--borderColor-neutral-emphasis, var(--color-neutral-emphasis)); .foo { background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis)); } }',
+        '.x { border: 1px solid var(--borderColor-neutral-emphasis); .foo { background-color: var(--bgColor-neutral-emphasis); } }',
       warnings: [
         {
           message:

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "@changesets/cli": "2.26.1",
     "@github/prettier-config": "0.0.4",
     "@primer/css": "^20.0.0",
-    "@primer/primitives": "^7.8.3",
+    "@primer/primitives": "^7.11.11",
     "dedent": "0.7.0",
     "eslint": "8.39.0",
     "eslint-plugin-github": "4.3.5",

diff --git a/plugins/lib/primitives-v8.json b/plugins/lib/primitives-v8.json
@@ -730,7 +730,7 @@
   "--color-switch-track-checked-border": [
     {
       "props": ["border"],
-      "replacement": "transparent"
+      "replacement": "--borderColor-transparent"
     }
   ],
   "--color-switch-knob-bg": [
@@ -814,7 +814,11 @@
   "--color-canvas-default-transparent": [
     {
       "props": ["background"],
-      "replacement": "transparent"
+      "replacement": "--bgColor-transparent"
+    },
+    {
+      "props": ["border"],
+      "replacement": "--borderColor-transparent"
     }
   ],
   "--color-fg-default": [
@@ -889,7 +893,7 @@
   ],
   "--color-border-muted": [
     {
-      "props": ["border", "background", "outline"],
+      "props": ["border", "background", "outline", "box-shadow"],
       "replacement": "--borderColor-muted"
     }
   ],

diff --git a/plugins/no-deprecated-colors.js b/plugins/no-deprecated-colors.js
@@ -67,7 +67,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
           }
 
           if (context.fix && replacement !== null) {
-            replacement = `${replacement}, var(${variableName})`
+            replacement = `${replacement}`
             replacedVars[variableName] = true
             newVars[replacement] = true
             if (node.type === 'atrule') {