@primer/stylelint-config 12.7.1-rc.d8a889b → 12.7.1-rc.ff27b7e

package/CHANGELOG.md

@@ -4,16 +4,24 @@
 
 ### Patch Changes
 
+- [#338](https://github.com/primer/stylelint-config/pull/338) [`7cc4c08`](https://github.com/primer/stylelint-config/commit/7cc4c08f6465f495df89fc0609d3cdf012480dec) Thanks [@langermank](https://github.com/langermank)! - Add more tests to `no-deprecated-colors`
+
 - [#328](https://github.com/primer/stylelint-config/pull/328) [`5ae7400`](https://github.com/primer/stylelint-config/commit/5ae7400340afc2cd21006093ce7b33206a00372e) Thanks [@langermank](https://github.com/langermank)! - Fix failing tests in no-deprecated-colors
 
+- [#337](https://github.com/primer/stylelint-config/pull/337) [`6bf0fd6`](https://github.com/primer/stylelint-config/commit/6bf0fd624a69b21e48803ba62a5b2b9dc21b8d8c) Thanks [@langermank](https://github.com/langermank)! - Remove inline fallback var for no-deprecated-colors
+
 - [#332](https://github.com/primer/stylelint-config/pull/332) [`6485cf0`](https://github.com/primer/stylelint-config/commit/6485cf053f502d71a8ce8c407ad01a939038959c) Thanks [@langermank](https://github.com/langermank)! - Updated deprecated json color file
 
 - [#333](https://github.com/primer/stylelint-config/pull/333) [`485ce04`](https://github.com/primer/stylelint-config/commit/485ce047d75a635134919678a776ea808604cf4a) Thanks [@langermank](https://github.com/langermank)! - Adding more color replacements for deprecated colors
 
+- [#340](https://github.com/primer/stylelint-config/pull/340) [`4688bb4`](https://github.com/primer/stylelint-config/commit/4688bb4c0ea7975672b76af8706b80278f00f1a4) Thanks [@langermank](https://github.com/langermank)! - add inlineFallback prop to no-deprecated-colors
+
 - [#322](https://github.com/primer/stylelint-config/pull/322) [`726d7d1`](https://github.com/primer/stylelint-config/commit/726d7d1bf4eac82a032c448cb0be32d5bf66b29a) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating no-deprecated-colors for primitives v8
 
 - [#334](https://github.com/primer/stylelint-config/pull/334) [`b14c154`](https://github.com/primer/stylelint-config/commit/b14c154174ddd7190e62fe1d26698fc9cfe75c17) Thanks [@langermank](https://github.com/langermank)! - More tests for `no-deprecated-colors`
 
+- [#339](https://github.com/primer/stylelint-config/pull/339) [`36fade4`](https://github.com/primer/stylelint-config/commit/36fade45bdc431d223165f5d7226c10cf6591d83) Thanks [@langermank](https://github.com/langermank)! - Update plugins to support Primitives v8
+
 ## 12.7.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.7.1-rc.d8a889b",
+  "version": "12.7.1-rc.ff27b7e",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -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",

package/plugins/borders.js

@@ -31,9 +31,11 @@ module.exports = createVariableRule(
         '$border-*',
         'transparent',
         'currentColor',
-        // Match variables in any of the following formats: --color-border-*, --color-*-border-*, --color-*-border
+        // Match variables in any of the following formats: --color-border-*, --color-*-border-*, --color-*-border, --borderColor-, *borderColor*
         /var\(--color-(.+-)*border(-.+)*\)/,
-        /var\(--color-[^)]+\)/
+        /var\(--color-[^)]+\)/,
+        /var\(--borderColor-[^)]+\)/,
+        /var\((.+-)*borderColor(-.+)*\)/
       ],
       replacements: {
         '$border-gray': '$border-color'

package/plugins/box-shadow.js

@@ -10,8 +10,10 @@ module.exports = createVariableRule(
         '$box-shadow*',
         '$*-shadow',
         'none',
-        // Match variables in any of the following formats: --color-shadow-*, --color-*-shadow-*, --color-*-shadow
-        /var\(--color-(.+-)*shadow(-.+)*\)/
+        // Match variables in any of the following formats: --color-shadow-*, --color-*-shadow-*, --color-*-shadow, --shadow-*, *shadow*
+        /var\(--color-(.+-)*shadow(-.+)*\)/,
+        /var\(--shadow(-.+)*\)/,
+        /var\((.+-)*shadow(-.+)*\)/
       ],
       singular: true
     }

package/plugins/colors.js

@@ -3,9 +3,13 @@ const {createVariableRule} = require('./lib/variable-rules')
 const bgVars = [
   '$bg-*',
   '$tooltip-background-color',
-  // Match variables in any of the following formats: --color-bg-*, --color-*-bg-*, --color-*-bg
+  // Match variables in any of the following formats: --color-bg-*, --color-*-bg-*, --color-*-bg, *bgColor*, *fgColor*, *borderColor*, *iconColor*
   /var\(--color-(.+-)*bg(-.+)*\)/,
-  /var\(--color-[^)]+\)/
+  /var\(--color-[^)]+\)/,
+  /var\((.+-)*bgColor(-.+)*\)/,
+  /var\((.+-)*fgColor(-.+)*\)/,
+  /var\((.+-)*borderColor(-.+)*\)/,
+  /var\((.+-)*iconColor(-.+)*\)/
 ]
 
 module.exports = createVariableRule(
@@ -26,10 +30,12 @@ module.exports = createVariableRule(
         '$text-*',
         '$tooltip-text-color',
         'inherit',
-        // Match variables in any of the following formats: --color-text-*, --color-*-text-*, --color-*-text
+        // Match variables in any of the following formats: --color-text-*, --color-*-text-*, --color-*-text, *fgColor*, *iconColor*
         /var\(--color-(.+-)*text(-.+)*\)/,
         /var\(--color-(.+-)*fg(-.+)*\)/,
-        /var\(--color-[^)]+\)/
+        /var\(--color-[^)]+\)/,
+        /var\((.+-)*fgColor(-.+)*\)/,
+        /var\((.+-)*iconColor(-.+)*\)/
       ]
     }
   },

package/plugins/lib/primitives-v8.json

@@ -219,7 +219,7 @@
   ],
   "--color-header-divider": [
     {
-      "props": ["border", "background"],
+      "props": ["border", "background", "color"],
       "replacement": "--header-borderColor-divider"
     }
   ],
@@ -231,7 +231,7 @@
   ],
   "--color-header-search-bg": [
     {
-      "props": ["background"],
+      "props": ["background", "background-color"],
       "replacement": "--headerSearch-bgColor"
     }
   ],
@@ -249,7 +249,7 @@
   ],
   "--color-avatar-border": [
     {
-      "props": ["border", "background"],
+      "props": ["border", "background", "box-shadow"],
       "replacement": "--avatar-borderColor"
     }
   ],
@@ -730,7 +730,7 @@
   "--color-switch-track-checked-border": [
     {
       "props": ["border"],
-      "replacement": "transparent"
+      "replacement": "--borderColor-transparent"
     }
   ],
   "--color-switch-knob-bg": [
@@ -813,8 +813,12 @@
   ],
   "--color-canvas-default-transparent": [
     {
-      "props": ["background"],
-      "replacement": "transparent"
+      "props": ["background", "color"],
+      "replacement": "--bgColor-transparent"
+    },
+    {
+      "props": ["border"],
+      "replacement": "--borderColor-transparent"
     }
   ],
   "--color-fg-default": [
@@ -835,6 +839,10 @@
     {
       "props": ["background"],
       "replacement": "--bgColor-neutral-emphasis"
+    },
+    {
+      "props": ["border"],
+      "replacement": "--borderColor-neutral-emphasis"
     }
   ],
   "--color-fg-subtle": [
@@ -855,11 +863,7 @@
   ],
   "--color-canvas-default": [
     {
-      "props": ["background"],
-      "replacement": "--bgColor-default"
-    },
-    {
-      "props": ["border", "box-shadow"],
+      "props": ["background", "border", "box-shadow", "fill", "stroke"],
       "replacement": "--bgColor-default"
     }
   ],
@@ -877,19 +881,19 @@
   ],
   "--color-canvas-subtle": [
     {
-      "props": ["background"],
+      "props": ["background", "fill", "border"],
       "replacement": "--bgColor-muted"
     }
   ],
   "--color-border-default": [
     {
-      "props": ["border", "background", "box-shadow"],
+      "props": ["border", "background", "box-shadow", "stroke", "outline", "fill"],
       "replacement": "--borderColor-default"
     }
   ],
   "--color-border-muted": [
     {
-      "props": ["border", "background", "outline"],
+      "props": ["border", "background", "outline", "box-shadow", "stroke"],
       "replacement": "--borderColor-muted"
     }
   ],
@@ -901,7 +905,7 @@
   ],
   "--color-neutral-emphasis-plus": [
     {
-      "props": ["background", "border", "color"],
+      "props": ["background", "border", "color", "stroke"],
       "replacement": "--bgColor-emphasis"
     }
   ],
@@ -915,7 +919,7 @@
       "replacement": "--borderColor-neutral-emphasis"
     },
     {
-      "props": ["color"],
+      "props": ["color", "fill"],
       "replacement": "--fgColor-neutral"
     }
   ],
@@ -933,11 +937,15 @@
     {
       "props": ["background"],
       "replacement": "--bgColor-neutral-muted"
+    },
+    {
+      "props": ["border", "box-shadow"],
+      "replacement": "--borderColor-neutral-muted"
     }
   ],
   "--color-accent-fg": [
     {
-      "props": ["color", "fill"],
+      "props": ["color", "fill", "stroke"],
       "replacement": "--fgColor-accent"
     },
     {
@@ -947,6 +955,10 @@
     {
       "props": ["background"],
       "replacement": "--bgColor-accent-emphasis"
+    },
+    {
+      "props": ["outline"],
+      "replacement": "--focus-outlineColor"
     }
   ],
   "--color-accent-emphasis": [
@@ -959,8 +971,12 @@
       "replacement": "--borderColor-accent-emphasis"
     },
     {
-      "props": ["color", "fill"],
+      "props": ["color", "fill", "stroke"],
       "replacement": "--fgColor-accent"
+    },
+    {
+      "props": ["outline"],
+      "replacement": "--focus-outlineColor"
     }
   ],
   "--color-accent-muted": [
@@ -977,11 +993,15 @@
     {
       "props": ["background"],
       "replacement": "--bgColor-accent-muted"
+    },
+    {
+      "props": ["border", "box-shadow"],
+      "replacement": "--borderColor-accent-muted"
     }
   ],
   "--color-success-fg": [
     {
-      "props": ["color", "fill"],
+      "props": ["color", "fill", "stroke"],
       "replacement": "--fgColor-success"
     },
     {
@@ -1007,6 +1027,10 @@
     {
       "props": ["border", "box-shadow"],
       "replacement": "--borderColor-success-muted"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-success-muted"
     }
   ],
   "--color-success-subtle": [
@@ -1035,7 +1059,7 @@
       "replacement": "--borderColor-attention-emphasis"
     },
     {
-      "props": ["color"],
+      "props": ["color", "fill"],
       "replacement": "--fgColor-attention"
     }
   ],
@@ -1071,7 +1095,7 @@
       "replacement": "--borderColor-severe-emphasis"
     },
     {
-      "props": ["color"],
+      "props": ["color", "fill", "stroke"],
       "replacement": "--fgColor-severe"
     }
   ],
@@ -1103,11 +1127,11 @@
       "replacement": "--bgColor-danger-emphasis"
     },
     {
-      "props": ["border", "box-shadow"],
+      "props": ["border", "box-shadow", "outline"],
       "replacement": "--borderColor-danger-emphasis"
     },
     {
-      "props": ["color"],
+      "props": ["color", "fill"],
       "replacement": "--fgColor-danger"
     }
   ],
@@ -1115,6 +1139,10 @@
     {
       "props": ["border", "box-shadow"],
       "replacement": "--borderColor-danger-muted"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-danger-muted"
     }
   ],
   "--color-danger-subtle": [
@@ -1215,7 +1243,7 @@
       "replacement": "--borderColor-done-emphasis"
     },
     {
-      "props": ["color"],
+      "props": ["color", "fill", "stroke"],
       "replacement": "--fgColor-done"
     }
   ],
@@ -1223,6 +1251,10 @@
     {
       "props": ["border", "box-shadow"],
       "replacement": "--borderColor-done-muted"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-done-muted"
     }
   ],
   "--color-done-subtle": [
@@ -1297,7 +1329,7 @@
       "replacement": "--avatar-shadow"
     }
   ],
-  "color-btn-text": [
+  "--color-btn-text": [
     {
       "props": ["color"],
       "replacement": "--button-default-fgColor-rest"

package/plugins/no-deprecated-colors.js

@@ -20,6 +20,8 @@ const replacedVars = {}
 const newVars = {}
 
 module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
+  const {inlineFallback = false} = options
+
   if (!enabled) {
     return noop
   }
@@ -67,7 +69,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
           }
 
           if (context.fix && replacement !== null) {
-            replacement = `${replacement}, var(${variableName})`
+            replacement = `${replacement}${inlineFallback ? `, var(${variableName})` : ''}`
             replacedVars[variableName] = true
             newVars[replacement] = true
             if (node.type === 'atrule') {