@primer/stylelint-config 12.7.2-rc.69b2f10 → 12.7.3-rc.99e67f7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 12.7.3
+
+### Patch Changes
+
+- [#353](https://github.com/primer/stylelint-config/pull/353) [`cdb7ca9`](https://github.com/primer/stylelint-config/commit/cdb7ca90d4c38e429f24db92bf07578ad44d4032) Thanks [@langermank](https://github.com/langermank)! - Add `bgColor-inset` fallback for Primitives v8
+
 ## 12.7.2
 
 ### Patch Changes

package/browsers.js

@@ -3,5 +3,5 @@ module.exports = [
   'last 2 firefox versions',
   'last 2 chrome versions',
   'last 2 safari versions',
-  'last 2 edge versions'
+  'last 2 edge versions',
 ]

package/index.js

@@ -21,7 +21,7 @@ module.exports = {
     './plugins/responsive-widths',
     './plugins/spacing',
     './plugins/typography',
-    './plugins/utilities'
+    './plugins/utilities',
   ],
   rules: {
     'alpha-value-notation': 'number',
@@ -41,7 +41,7 @@ module.exports = {
       '/^transition/': ['/all/'],
       '/^background/': ['http:', 'https:'],
       '/^border/': ['none'],
-      '/.+/': ['initial']
+      '/.+/': ['initial'],
     },
     'function-calc-no-unspaced-operator': true,
     'function-linear-gradient-no-nonstandard-direction': true,
@@ -65,13 +65,13 @@ module.exports = {
     'primer/no-experimental-vars': [
       true,
       {
-        designTokens: '@primer/primitives/tokens-v2-private/docs/docValues.json'
-      }
+        designTokens: '@primer/primitives/tokens-v2-private/docs/docValues.json',
+      },
     ],
     'primer/no-override': true,
     'primer/no-undefined-vars': [
       true,
-      {severity: 'warning', files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}
+      {severity: 'warning', files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'},
     ],
     'primer/no-unused-vars': [true, {severity: 'warning'}],
     'primer/responsive-widths': true,
@@ -96,6 +96,6 @@ module.exports = {
     'string-no-newline': true,
     'string-quotes': 'single',
     'unit-no-unknown': true,
-    'value-keyword-case': null
-  }
+    'value-keyword-case': null,
+  },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.7.2-rc.69b2f10",
+  "version": "12.7.3-rc.99e67f7",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -34,19 +34,19 @@
     "stylelint-config-standard": "25.0.0",
     "stylelint-no-unsupported-browser-features": "^5.0.1",
     "stylelint-order": "^5.0.0",
-    "stylelint-scss": "^4.0.0",
+    "stylelint-scss": "^5.0.1",
     "tap-map": "^1.0.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.7",
     "@changesets/cli": "2.26.1",
-    "@github/prettier-config": "0.0.4",
+    "@github/prettier-config": "0.0.6",
     "@primer/css": "^20.0.0",
     "@primer/primitives": "^7.11.11",
     "dedent": "0.7.0",
     "eslint": "8.39.0",
-    "eslint-plugin-github": "4.3.5",
-    "eslint-plugin-jest": "27.0.1",
+    "eslint-plugin-github": "4.8.0",
+    "eslint-plugin-jest": "27.2.3",
     "eslint-plugin-prettier": "4.2.1",
     "jest": "29.4.3",
     "jest-preset-stylelint": "6.1.0",

package/plugins/borders.js

@@ -21,8 +21,8 @@ module.exports = createVariableRule(
         '$border-style $border-width $border-color': '$border',
         '$border-style $border-color $border-width': '$border',
         '$border-color $border-width $border-style': '$border',
-        '$border-color $border-style $border-width': '$border'
-      }
+        '$border-color $border-style $border-width': '$border',
+      },
     },
     'border color': {
       expects: 'a border color variable',
@@ -35,30 +35,30 @@ module.exports = createVariableRule(
         /var\(--color-(.+-)*border(-.+)*\)/,
         /var\(--color-[^)]+\)/,
         /var\(--borderColor-[^)]+\)/,
-        /var\((.+-)*borderColor(-.+)*\)/
+        /var\((.+-)*borderColor(-.+)*\)/,
       ],
       replacements: {
-        '$border-gray': '$border-color'
-      }
+        '$border-gray': '$border-color',
+      },
     },
     'border style': {
       expects: 'a border style variable',
       props: 'border{,-top,-right,-bottom,-left}-style',
-      values: ['$border-style', 'none']
+      values: ['$border-style', 'none'],
     },
     'border width': {
       expects: 'a border width variable',
       props: 'border{,-top,-right,-bottom,-left}-width',
-      values: ['$border-width*', '0']
+      values: ['$border-width*', '0'],
     },
     'border radius': {
       expects: 'a border radius variable',
       props: 'border{,-{top,bottom}-{left,right}}-radius',
       values: ['$border-radius', '0', '50%', 'inherit'],
       replacements: {
-        '100%': '50%'
-      }
-    }
+        '100%': '50%',
+      },
+    },
   },
-  'https://primer.style/css/utilities/borders'
+  'https://primer.style/css/utilities/borders',
 )

package/plugins/box-shadow.js

@@ -13,10 +13,10 @@ module.exports = createVariableRule(
         // Match variables in any of the following formats: --color-shadow-*, --color-*-shadow-*, --color-*-shadow, --shadow-*, *shadow*
         /var\(--color-(.+-)*shadow(-.+)*\)/,
         /var\(--shadow(-.+)*\)/,
-        /var\((.+-)*shadow(-.+)*\)/
+        /var\((.+-)*shadow(-.+)*\)/,
       ],
-      singular: true
-    }
+      singular: true,
+    },
   },
-  'https://primer.style/css/utilities/box-shadow'
+  'https://primer.style/css/utilities/box-shadow',
 )

package/plugins/colors.js

@@ -9,7 +9,7 @@ const bgVars = [
   /var\((.+-)*bgColor(-.+)*\)/,
   /var\((.+-)*fgColor(-.+)*\)/,
   /var\((.+-)*borderColor(-.+)*\)/,
-  /var\((.+-)*iconColor(-.+)*\)/
+  /var\((.+-)*iconColor(-.+)*\)/,
 ]
 
 module.exports = createVariableRule(
@@ -17,11 +17,11 @@ module.exports = createVariableRule(
   {
     'background-color': {
       expects: 'a background color variable',
-      values: bgVars.concat('none', 'transparent')
+      values: bgVars.concat('none', 'transparent'),
     },
     background: {
       expects: 'a background color variable',
-      values: bgVars.concat('none', 'transparent', 'top', 'right', 'bottom', 'left', 'center', '*px', 'url(*)')
+      values: bgVars.concat('none', 'transparent', 'top', 'right', 'bottom', 'left', 'center', '*px', 'url(*)'),
     },
     'text color': {
       expects: 'a text color variable',
@@ -35,9 +35,9 @@ module.exports = createVariableRule(
         /var\(--color-(.+-)*fg(-.+)*\)/,
         /var\(--color-[^)]+\)/,
         /var\((.+-)*fgColor(-.+)*\)/,
-        /var\((.+-)*iconColor(-.+)*\)/
-      ]
-    }
+        /var\((.+-)*iconColor(-.+)*\)/,
+      ],
+    },
   },
-  'https://primer.style/primitives/colors'
+  'https://primer.style/primitives/colors',
 )

package/plugins/lib/decl-validator.js

@@ -28,7 +28,7 @@ module.exports = function declarationValidator(rules, options = {}) {
       return {
         rule,
         matchesProp: anymatch(props),
-        validate: Array.isArray(rule.components) ? componentValidator(rule) : valueValidator(rule)
+        validate: Array.isArray(rule.components) ? componentValidator(rule) : valueValidator(rule),
       }
     })
     .filter(Boolean)
@@ -88,7 +88,7 @@ module.exports = function declarationValidator(rules, options = {}) {
           valid: true,
           errors: [],
           fixable: false,
-          replacement: undefined
+          replacement: undefined,
         }
       } else if (replacements[value]) {
         let replacement = value
@@ -99,7 +99,7 @@ module.exports = function declarationValidator(rules, options = {}) {
           valid: false,
           errors: [{expects, prop, value, replacement}],
           fixable: true,
-          replacement
+          replacement,
         }
       } else {
         if (nested || singular) {
@@ -107,7 +107,7 @@ module.exports = function declarationValidator(rules, options = {}) {
             valid: false,
             errors: [{expects, prop, value}],
             fixable: false,
-            replacement: undefined
+            replacement: undefined,
           }
         }
 
@@ -144,7 +144,7 @@ module.exports = function declarationValidator(rules, options = {}) {
           valid,
           fixable,
           errors,
-          replacement
+          replacement,
         }
       }
     }
@@ -183,7 +183,7 @@ module.exports = function declarationValidator(rules, options = {}) {
           if (result.replacement) {
             parsed.nodes[index] = {
               type: 'word',
-              value: result.replacement
+              value: result.replacement,
             }
             fixable = true
           }
@@ -206,7 +206,7 @@ module.exports = function declarationValidator(rules, options = {}) {
           valid: false,
           errors: [{expects, prop, value: compoundValue, replacement}],
           fixable: true,
-          replacement
+          replacement,
         }
       }
 
@@ -214,7 +214,7 @@ module.exports = function declarationValidator(rules, options = {}) {
         valid: errors.length === 0,
         errors,
         fixable,
-        replacement
+        replacement,
       }
     }
   }

package/plugins/lib/primer-utilities.js

@@ -5,522 +5,522 @@ module.exports = {
   color: [
     {
       value: 'var(--color-fg-default)',
-      utilityClass: 'color-fg-default'
+      utilityClass: 'color-fg-default',
     },
     {
       value: 'var(--color-fg-muted)',
-      utilityClass: 'color-fg-muted'
+      utilityClass: 'color-fg-muted',
     },
     {
       value: 'var(--color-fg-subtle)',
-      utilityClass: 'color-fg-subtle'
-    }
+      utilityClass: 'color-fg-subtle',
+    },
   ].concat(
     colorTypes.map(type => {
       return {
         value: `var(--color-${type}-fg)`,
-        utilityClass: `color-fg-${type}`
+        utilityClass: `color-fg-${type}`,
       }
-    })
+    }),
   ),
   'background-color': [
     {
       value: 'var(--color-canvas-default)',
-      utilityClass: 'color-bg-default'
+      utilityClass: 'color-bg-default',
     },
     {
       value: 'var(--color-canvas-overlay)',
-      utilityClass: 'color-bg-overlay'
+      utilityClass: 'color-bg-overlay',
     },
     {
       value: 'var(--color-canvas-inset)',
-      utilityClass: 'color-bg-inset'
+      utilityClass: 'color-bg-inset',
     },
     {
       value: 'var(--color-canvas-subtle)',
-      utilityClass: 'color-bg-subtle'
+      utilityClass: 'color-bg-subtle',
     },
     {
       value: 'transparent',
-      utilityClass: 'color-bg-transparent'
-    }
+      utilityClass: 'color-bg-transparent',
+    },
   ]
     .concat(
       colorTypes.map(type => {
         return {
           value: `var(--color-${type}-subtle)`,
-          utilityClass: `color-bg-${type}`
+          utilityClass: `color-bg-${type}`,
         }
-      })
+      }),
     )
     .concat(
       colorTypes.map(type => {
         return {
           value: `var(--color-${type}-emphasis)`,
-          utilityClass: `color-bg-${type}-emphasis`
+          utilityClass: `color-bg-${type}-emphasis`,
         }
-      })
+      }),
     ),
   'border-color': [
     {
       value: 'var(--color-border-default',
-      utilityClass: 'color-border-default'
+      utilityClass: 'color-border-default',
     },
     {
       value: 'var(--color-border-muted',
-      utilityClass: 'color-border-muted'
+      utilityClass: 'color-border-muted',
     },
     {
       value: 'var(--color-border-subtle',
-      utilityClass: 'color-border-subtle'
-    }
+      utilityClass: 'color-border-subtle',
+    },
   ]
     .concat(
       colorTypes.map(type => {
         return {
           value: `var(--color-${type}-muted)`,
-          utilityClass: `color-border-${type}`
+          utilityClass: `color-border-${type}`,
         }
-      })
+      }),
     )
     .concat(
       colorTypes.map(type => {
         return {
           value: `var(--color-${type}-emphasis)`,
-          utilityClass: `color-border-${type}-emphasis`
+          utilityClass: `color-border-${type}-emphasis`,
         }
-      })
+      }),
     ),
   margin: Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `m-${i + 1}`
+      utilityClass: `m-${i + 1}`,
     }
   }),
   'margin-top': Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `mt-${i + 1}`
+      utilityClass: `mt-${i + 1}`,
     }
   }),
   'margin-right': Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `mr-${i + 1}`
+      utilityClass: `mr-${i + 1}`,
     }
   }),
   'margin-bottom': Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `mb-${i + 1}`
+      utilityClass: `mb-${i + 1}`,
     }
   }),
   'margin-left': Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `ml-${i + 1}`
+      utilityClass: `ml-${i + 1}`,
     }
   }),
   padding: Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `p-${i + 1}`
+      utilityClass: `p-${i + 1}`,
     }
   }),
   'padding-top': Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `pt-${i + 1}`
+      utilityClass: `pt-${i + 1}`,
     }
   }),
   'padding-right': Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `pr-${i + 1}`
+      utilityClass: `pr-${i + 1}`,
     }
   }),
   'padding-bottom': Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `pb-${i + 1}`
+      utilityClass: `pb-${i + 1}`,
     }
   }),
   'padding-left': Array.from(new Array(6)).map((_, i) => {
     return {
       value: `$spacer-${i + 1}`,
-      utilityClass: `pl-${i + 1}`
+      utilityClass: `pl-${i + 1}`,
     }
   }),
   'line-height': [
     {
       value: '$lh-condensed-ultra',
-      utilityClass: 'lh-condensed-ultra'
+      utilityClass: 'lh-condensed-ultra',
     },
     {
       value: '$lh-condensed',
-      utilityClass: 'lh-condensed'
+      utilityClass: 'lh-condensed',
     },
     {
       value: '$lh-default',
-      utilityClass: 'lh-default'
+      utilityClass: 'lh-default',
     },
     {
       value: '0',
-      utilityClass: 'lh-0'
-    }
+      utilityClass: 'lh-0',
+    },
   ],
   'text-align': [
     {
       value: 'left',
-      utilityClass: 'text-left'
+      utilityClass: 'text-left',
     },
     {
       value: 'right',
-      utilityClass: 'text-right'
+      utilityClass: 'text-right',
     },
     {
       value: 'center',
-      utilityClass: 'text-center'
-    }
+      utilityClass: 'text-center',
+    },
   ],
   'font-style': [
     {
       value: 'italic',
-      utilityClass: 'text-italic'
-    }
+      utilityClass: 'text-italic',
+    },
   ],
   'text-transform': [
     {
       value: 'uppercase',
-      utilityClass: 'text-uppercase'
-    }
+      utilityClass: 'text-uppercase',
+    },
   ],
   'text-decoration': [
     {
       value: 'underline',
-      utilityClass: 'text-underline'
+      utilityClass: 'text-underline',
     },
     {
       value: 'none',
-      utilityClass: 'no-underline'
-    }
+      utilityClass: 'no-underline',
+    },
   ],
   'white-space': [
     {
       value: 'nowrap',
-      utilityClass: 'no-wrap'
+      utilityClass: 'no-wrap',
     },
     {
       value: 'normal',
-      utilityClass: 'ws-normal'
-    }
+      utilityClass: 'ws-normal',
+    },
   ],
   'word-break': [
     {
       value: 'break-all',
-      utilityClass: 'wb-break-all'
-    }
+      utilityClass: 'wb-break-all',
+    },
   ],
   width: [
     {
       value: '100%',
-      utilityClass: 'width-full'
+      utilityClass: 'width-full',
     },
     {
       value: 'auto%',
-      utilityClass: 'width-auto'
-    }
+      utilityClass: 'width-auto',
+    },
   ],
   overflow: [
     {
       value: 'visible',
-      utilityClass: 'overflow-visible'
+      utilityClass: 'overflow-visible',
     },
     {
       value: 'hidden',
-      utilityClass: 'overflow-hidden'
+      utilityClass: 'overflow-hidden',
     },
     {
       value: 'auto',
-      utilityClass: 'overflow-auto'
+      utilityClass: 'overflow-auto',
     },
     {
       value: 'scroll',
-      utilityClass: 'overflow-scroll'
-    }
+      utilityClass: 'overflow-scroll',
+    },
   ],
   'overflow-x': [
     {
       value: 'visible',
-      utilityClass: 'overflow-x-visible'
+      utilityClass: 'overflow-x-visible',
     },
     {
       value: 'hidden',
-      utilityClass: 'overflow-x-hidden'
+      utilityClass: 'overflow-x-hidden',
     },
     {
       value: 'auto',
-      utilityClass: 'overflow-x-auto'
+      utilityClass: 'overflow-x-auto',
     },
     {
       value: 'scroll',
-      utilityClass: 'overflow-x-scroll'
-    }
+      utilityClass: 'overflow-x-scroll',
+    },
   ],
   'overflow-y': [
     {
       value: 'visible',
-      utilityClass: 'overflow-y-visible'
+      utilityClass: 'overflow-y-visible',
     },
     {
       value: 'hidden',
-      utilityClass: 'overflow-y-hidden'
+      utilityClass: 'overflow-y-hidden',
     },
     {
       value: 'auto',
-      utilityClass: 'overflow-y-auto'
+      utilityClass: 'overflow-y-auto',
     },
     {
       value: 'scroll',
-      utilityClass: 'overflow-y-scroll'
-    }
+      utilityClass: 'overflow-y-scroll',
+    },
   ],
   height: [
     {
       value: '100%',
-      utilityClass: 'height-full'
-    }
+      utilityClass: 'height-full',
+    },
   ],
   'max-width': [
     {
       value: '100%',
-      utilityClass: 'width-fit'
-    }
+      utilityClass: 'width-fit',
+    },
   ],
   'max-height': [
     {
       value: '100%',
-      utilityClass: 'height-fit'
-    }
+      utilityClass: 'height-fit',
+    },
   ],
   'min-width': [
     {
       value: '0',
-      utilityClass: 'min-width-0'
-    }
+      utilityClass: 'min-width-0',
+    },
   ],
   float: [
     {
       value: 'left',
-      utilityClass: 'float-left'
+      utilityClass: 'float-left',
     },
     {
       value: 'right',
-      utilityClass: 'float-right'
+      utilityClass: 'float-right',
     },
     {
       value: 'none',
-      utilityClass: 'float-none'
-    }
+      utilityClass: 'float-none',
+    },
   ],
   'list-style': [
     {
       value: 'none',
-      utilityClass: 'list-style-none'
-    }
+      utilityClass: 'list-style-none',
+    },
   ],
   'user-select': [
     {
       value: 'none',
-      utilityClass: 'user-select-none'
-    }
+      utilityClass: 'user-select-none',
+    },
   ],
   visibility: [
     {
       value: 'hidden',
-      utilityClass: 'v-hidden'
+      utilityClass: 'v-hidden',
     },
     {
       value: 'visible',
-      utilityClass: 'v-visible'
-    }
+      utilityClass: 'v-visible',
+    },
   ],
   'vertical-align': [
     {
       value: 'middle',
-      utilityClass: 'v-align-middle'
+      utilityClass: 'v-align-middle',
     },
     {
       value: 'top',
-      utilityClass: 'v-align-top'
+      utilityClass: 'v-align-top',
     },
     {
       value: 'bottom',
-      utilityClass: 'v-align-bottom'
+      utilityClass: 'v-align-bottom',
     },
     {
       value: 'text-top',
-      utilityClass: 'v-align-text-top'
+      utilityClass: 'v-align-text-top',
     },
     {
       value: 'text-bottom',
-      utilityClass: 'v-align-text-bottom'
+      utilityClass: 'v-align-text-bottom',
     },
     {
       value: 'text-baseline',
-      utilityClass: 'v-align-baseline'
-    }
+      utilityClass: 'v-align-baseline',
+    },
   ],
   'font-weight': [
     {
       value: '$font-weight-normal',
-      utilityClass: 'text-normal'
+      utilityClass: 'text-normal',
     },
     {
       value: '$font-weight-bold',
-      utilityClass: 'text-bold'
+      utilityClass: 'text-bold',
     },
     {
       value: '$font-weight-semibold',
-      utilityClass: 'text-semibold'
+      utilityClass: 'text-semibold',
     },
     {
       value: '$font-weight-light',
-      utilityClass: 'text-light'
-    }
+      utilityClass: 'text-light',
+    },
   ],
   top: [
     {
       value: '0',
-      utilityClass: 'top-0'
+      utilityClass: 'top-0',
     },
     {
       value: 'auto',
-      utilityClass: 'top-auto'
-    }
+      utilityClass: 'top-auto',
+    },
   ],
   right: [
     {
       value: '0',
-      utilityClass: 'right-0'
+      utilityClass: 'right-0',
     },
     {
       value: 'auto',
-      utilityClass: 'right-auto'
-    }
+      utilityClass: 'right-auto',
+    },
   ],
   bottom: [
     {
       value: '0',
-      utilityClass: 'bottom-0'
+      utilityClass: 'bottom-0',
     },
     {
       value: 'auto',
-      utilityClass: 'bottom-auto'
-    }
+      utilityClass: 'bottom-auto',
+    },
   ],
   left: [
     {
       value: '0',
-      utilityClass: 'left-0'
+      utilityClass: 'left-0',
     },
     {
       value: 'auto',
-      utilityClass: 'left-auto'
-    }
+      utilityClass: 'left-auto',
+    },
   ],
   position: [
     {
       value: 'static',
-      utilityClass: 'position-static'
+      utilityClass: 'position-static',
     },
     {
       value: 'relative',
-      utilityClass: 'position-relative'
+      utilityClass: 'position-relative',
     },
     {
       value: 'absolute',
-      utilityClass: 'position-absolute'
+      utilityClass: 'position-absolute',
     },
     {
       value: 'fixed',
-      utilityClass: 'position-fixed'
+      utilityClass: 'position-fixed',
     },
     {
       value: 'sticky',
-      utilityClass: 'position-sticky'
-    }
+      utilityClass: 'position-sticky',
+    },
   ],
   'box-shadow': [
     {
       value: 'none',
-      utilityClass: 'box-shadow-none'
+      utilityClass: 'box-shadow-none',
     },
     {
       value: 'var(--color-shadow-small)',
-      utilityClass: 'box-shadow-small'
+      utilityClass: 'box-shadow-small',
     },
     {
       value: 'var(--color-shadow-medium)',
-      utilityClass: 'box-shadow-medium'
+      utilityClass: 'box-shadow-medium',
     },
     {
       value: 'var(--color-shadow-large)',
-      utilityClass: 'box-shadow-large'
+      utilityClass: 'box-shadow-large',
     },
     {
       value: 'var(--color-shadow-extra-large)',
-      utilityClass: 'box-shadow-extra-large'
-    }
+      utilityClass: 'box-shadow-extra-large',
+    },
   ],
   border: [
     {
       value: '$border',
-      utilityClass: 'border'
+      utilityClass: 'border',
     },
     {
       value: '0',
-      utilityClass: 'border-0'
-    }
+      utilityClass: 'border-0',
+    },
   ],
   'border-top': [
     {
       value: '$border',
-      utilityClass: 'border-top'
+      utilityClass: 'border-top',
     },
     {
       value: '0',
-      utilityClass: 'border-top-0'
-    }
+      utilityClass: 'border-top-0',
+    },
   ],
   'border-right': [
     {
       value: '$border',
-      utilityClass: 'border-right'
+      utilityClass: 'border-right',
     },
     {
       value: '0',
-      utilityClass: 'border-right-0'
-    }
+      utilityClass: 'border-right-0',
+    },
   ],
   'border-bottom': [
     {
       value: '$border',
-      utilityClass: 'border-bottom'
+      utilityClass: 'border-bottom',
     },
     {
       value: '0',
-      utilityClass: 'border-bottom-0'
-    }
+      utilityClass: 'border-bottom-0',
+    },
   ],
   'border-left': [
     {
       value: '$border',
-      utilityClass: 'border-left'
+      utilityClass: 'border-left',
     },
     {
       value: '0',
-      utilityClass: 'border-left-0'
-    }
-  ]
+      utilityClass: 'border-left-0',
+    },
+  ],
 }

package/plugins/lib/primer.js

@@ -3,7 +3,7 @@ const {join} = require('path')
 
 module.exports = {
   getPrimerModuleDir,
-  requirePrimerFile
+  requirePrimerFile,
 }
 
 function getPrimerModuleDir() {

package/plugins/lib/primitives-v8.json

@@ -876,7 +876,7 @@
   "--color-canvas-inset": [
     {
       "props": ["background"],
-      "replacement": "--bgColor-muted"
+      "replacement": "--bgColor-inset"
     }
   ],
   "--color-canvas-subtle": [

package/plugins/lib/variable-rules.js

@@ -10,7 +10,7 @@ module.exports = {
   createVariableRule,
   CSS_DIRECTIONS,
   CSS_CORNERS,
-  CSS_IMPORTANT
+  CSS_IMPORTANT,
 }
 
 function createVariableRule(ruleName, rules, url) {
@@ -79,7 +79,7 @@ function createVariableRule(ruleName, rules, url) {
                       return `${m}. See ${url}.`
                     }
                     return `${m}.`
-                  }
+                  },
                 })
                 .rejected(error)
 
@@ -87,7 +87,7 @@ function createVariableRule(ruleName, rules, url) {
                 message,
                 node: decl,
                 result,
-                ruleName
+                ruleName,
               })
             }
           }

package/plugins/no-deprecated-colors.js

@@ -9,7 +9,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
     }
 
     return `Variable ${varName} is deprecated for property ${property}. Please use the replacement ${replacement}.`
-  }
+  },
 })
 
 // Match CSS variable references (e.g var(--color-text-primary))
@@ -84,7 +84,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
             message: messages.rejected(variableName, replacement, node.prop),
             node,
             ruleName,
-            result
+            result,
           })
         }
       }
@@ -92,7 +92,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
   }
 
   log(
-    `${Object.keys(replacedVars).length} deprecated variables replaced with ${Object.keys(newVars).length} variables.`
+    `${Object.keys(replacedVars).length} deprecated variables replaced with ${Object.keys(newVars).length} variables.`,
   )
   return lintResult
 })

package/plugins/no-experimental-vars.js

@@ -5,7 +5,7 @@ const ruleName = 'primer/no-experimental-vars'
 const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: value => {
     return `Do not use experimental variable \`var(--${value})\`. Experimental variables are undergoing testing, see https://github.com/github/primer/issues/889 for more details.`
-  }
+  },
 })
 
 // eslint-disable-next-line no-unused-vars
@@ -31,7 +31,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
             message: messages.rejected(expVar),
             node: decl,
             result,
-            ruleName
+            ruleName,
           })
         }
       }

package/plugins/no-override.js

@@ -52,7 +52,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
       const ruleSelector = collapseWhitespace(rule.selector)
       const context = selector === rule.selector ? '' : ` in "${ruleSelector}"`
       return `"${collapseWhitespace(selector)}" should not be overridden${context}${definedIn}.`
-    }
+    },
   })
 
   return (root, result) => {
@@ -62,7 +62,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
         : '(not an array)'
       result.warn(`The "bundles" option must be an array of valid bundles; got: ${invalidBundles}`, {
         stylelintType: 'invalidOption',
-        stylelintReference: 'https://github.com/primer/stylelint-config#options'
+        stylelintReference: 'https://github.com/primer/stylelint-config#options',
       })
     }
 
@@ -71,7 +71,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
         message: messages.rejected(subject),
         node: subject.rule,
         result,
-        ruleName
+        ruleName,
       })
 
     root.walkRules(rule => {
@@ -82,7 +82,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
             return report({
               rule,
               bundle: immutableSelectors.get(selector),
-              selector
+              selector,
             })
           }
         } else {
@@ -95,7 +95,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
             return report({
               rule,
               bundle: immutableClassSelectors.get(classSelector),
-              selector: classSelector
+              selector: classSelector,
             })
           }
         }

package/plugins/no-scale-colors.js

@@ -4,7 +4,7 @@ const matchAll = require('string.prototype.matchall')
 const ruleName = 'primer/no-scale-colors'
 const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: varName =>
-    `${varName} is a non-functional scale color and cannot be used without being wrapped in the color-variables mixin`
+    `${varName} is a non-functional scale color and cannot be used without being wrapped in the color-variables mixin`,
 })
 
 // Match CSS variable references (e.g var(--color-text-primary))
@@ -39,7 +39,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
               message: messages.rejected(variableName),
               node: decl,
               result,
-              ruleName
+              ruleName,
             })
           }
         }

package/plugins/no-undefined-vars.js

@@ -6,7 +6,7 @@ const TapMap = require('tap-map')
 
 const ruleName = 'primer/no-undefined-vars'
 const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: varName => `${varName} is not defined`
+  rejected: varName => `${varName} is not defined`,
 })
 
 // Match CSS variable definitions (e.g. --color-text-primary:)
@@ -40,7 +40,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
           message: messages.rejected(variableName),
           node,
           result,
-          ruleName
+          ruleName,
         })
       }
     }
@@ -80,7 +80,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
           checkVariable(
             variableName,
             decl,
-            new Set([...globalDefinedVariables, ...fileDefinedVariables, ...scopeDefinedVaribles])
+            new Set([...globalDefinedVariables, ...fileDefinedVariables, ...scopeDefinedVaribles]),
           )
         }
       })

package/plugins/no-unused-vars.js

@@ -11,7 +11,7 @@ const COLON = ':'
 const SCSS_VARIABLE_PATTERN = /(\$[-\w]+)/g
 
 const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: name => `The variable "${name}" is not referenced.`
+  rejected: name => `The variable "${name}" is not referenced.`,
 })
 
 const cache = new TapMap()
@@ -35,7 +35,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
             message: messages.rejected(name),
             node: decl,
             result,
-            ruleName
+            ruleName,
           })
         } else {
           const path = stripCwd(decl.source.input.file)

package/plugins/responsive-widths.js

@@ -7,7 +7,7 @@ const ruleName = 'primer/responsive-widths'
 const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: value => {
     return `A value larger than the smallest viewport could break responsive pages. Use a width value smaller than ${value}. https://primer.style/css/support/breakpoints`
-  }
+  },
 })
 
 // 320px is the smallest viewport size that we support
@@ -60,7 +60,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
             if (parseInt(valueUnit.number) > 320) {
               problems.push({
                 index: declarationValueIndex(decl) + node.sourceIndex,
-                message: messages.rejected(node.value)
+                message: messages.rejected(node.value),
               })
             }
             break
@@ -68,7 +68,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
             if (parseInt(valueUnit.number) > 100) {
               problems.push({
                 index: declarationValueIndex(decl) + node.sourceIndex,
-                message: messages.rejected(node.value)
+                message: messages.rejected(node.value),
               })
             }
             break
@@ -82,7 +82,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
             message: err.message,
             node: decl,
             result,
-            ruleName
+            ruleName,
           })
         }
       }

package/plugins/spacing.js

@@ -21,7 +21,7 @@ const spacerValues = {
   '$em-spacer-3': '0.25em',
   '$em-spacer-4': '0.375em',
   '$em-spacer-5': '0.5em',
-  '$em-spacer-6': '0.75em'
+  '$em-spacer-6': '0.75em',
 }
 
 const ruleName = 'primer/spacing'
@@ -32,7 +32,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
     }
 
     return `Please replace ${value} with spacing variable '${replacement}'.`
-  }
+  },
 })
 
 const walkGroups = (root, validate) => {
@@ -83,7 +83,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
         // If the a variable is found in the value, skip it.
         if (
           Object.keys(spacerValues).some(variable =>
-            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanValue)
+            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanValue),
           )
         ) {
           return
@@ -97,7 +97,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
         } else {
           problems.push({
             index: declarationValueIndex(decl) + node.sourceIndex,
-            message: messages.rejected(valueMatch, replacement)
+            message: messages.rejected(valueMatch, replacement),
           })
         }
 
@@ -115,7 +115,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
             message: err.message,
             node: decl,
             result,
-            ruleName
+            ruleName,
           })
         }
       }

package/plugins/typography.js

@@ -5,20 +5,20 @@ module.exports = createVariableRule(
   {
     'font-size': {
       expects: 'a font-size variable',
-      values: ['$body-font-size', '$h{000,00,0,1,2,3,4,5,6}-size', '$font-size-*', '1', '1em', 'inherit']
+      values: ['$body-font-size', '$h{000,00,0,1,2,3,4,5,6}-size', '$font-size-*', '1', '1em', 'inherit'],
     },
     'font-weight': {
       props: 'font-weight',
       values: ['$font-weight-*', 'inherit'],
       replacements: {
         bold: '$font-weight-bold',
-        normal: '$font-weight-normal'
-      }
+        normal: '$font-weight-normal',
+      },
     },
     'line-height': {
       props: 'line-height',
-      values: ['$body-line-height', '$lh-*', '0', '1', '1em', 'inherit']
-    }
+      values: ['$body-line-height', '$lh-*', '0', '1', '1em', 'inherit'],
+    },
   },
-  'https://primer.style/css/utilities/typography'
+  'https://primer.style/css/utilities/typography',
 )

package/plugins/utilities.js

@@ -6,7 +6,7 @@ const ruleName = 'primer/utilities'
 const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: (selector, utilityClass) => {
     return `Consider using the Primer utility '.${utilityClass}' instead of the selector '${selector}' in your html. https://primer.style/css/utilities`
-  }
+  },
 })
 
 // eslint-disable-next-line no-unused-vars
@@ -39,7 +39,7 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
             message: messages.rejected(rule.selector, replacement.utilityClass),
             node: rule,
             result,
-            ruleName
+            ruleName,
           })
         }
       }

package/property-order.js

@@ -168,5 +168,5 @@ module.exports = [
   'animation-timing-function',
   'animation-delay',
   'animation-iteration-count',
-  'animation-direction'
+  'animation-direction',
 ]