Merge branch 'main' into primer_border_update

Author: jonrohan

.changeset/gorgeous-moons-appear.md

@@ -0,0 +1,5 @@
+---
+"@primer/stylelint-config": minor
+---
+
+Upgrade to @primer/primitives@8.2.0

__tests__/spacing.js

@@ -50,12 +50,12 @@ testRule({
   ],
   reject: [
     {
-      code: '.x { padding-bottom: 1px; }',
+      code: '.x { padding-bottom: 14px; }',
       unfixable: true,
-      message: messages.rejected('1px'),
+      message: messages.rejected('14px'),
       line: 1,
       column: 22,
-      endColumn: 25,
+      endColumn: 26,
       description: 'CSS > Errors on value not in spacer list',
     },
     {
@@ -77,8 +77,8 @@ testRule({
       description: "CSS > Replaces '4px' with '--base-size-4'.",
     },
     {
-      code: '.x { padding: 3px; margin: 5px; }',
-      fixed: '.x { padding: var(--base-size-4); margin: var(--base-size-4); }',
+      code: '.x { padding: 3px; margin: 5px 7px; }',
+      fixed: '.x { padding: var(--base-size-4); margin: var(--base-size-4) var(--base-size-8); }',
       description: "CSS > Replaces +- pixel values with closest variable '--base-size-4'.",
       warnings: [
         {
@@ -97,6 +97,14 @@ testRule({
           rule: 'primer/spacing',
           severity: 'error',
         },
+        {
+          message: messages.rejected('7px', {name: '--base-size-8'}),
+          line: 1,
+          column: 32,
+          endColumn: 35,
+          rule: 'primer/spacing',
+          severity: 'error',
+        },
       ],
     },
     {
@@ -197,21 +205,21 @@ testRule({
       ],
     },
     {
-      code: '.x { padding: 2px 4px; }',
-      fixed: '.x { padding: 2px var(--base-size-4); }',
-      description: "CSS > Replaces '4px' with 'var(--base-size-4)' and errors on '2px'.",
+      code: '.x { padding: 14px 4px; }',
+      fixed: '.x { padding: 14px var(--base-size-4); }',
+      description: "CSS > Replaces '4px' with 'var(--base-size-4)' and errors on '14px'.",
       warnings: [
         {
-          endColumn: 18,
+          endColumn: 19,
           column: 15,
           line: 1,
           rule: 'primer/spacing',
           severity: 'error',
-          message: messages.rejected('2px'),
+          message: messages.rejected('14px'),
         },
         {
-          endColumn: 22,
-          column: 19,
+          endColumn: 23,
+          column: 20,
           line: 1,
           rule: 'primer/spacing',
           severity: 'error',
@@ -266,33 +274,33 @@ testRule({
       description: 'SCSS > Fails on negative SCSS variable.',
     },
     {
-      code: '.x { padding: 2px; .y { padding: 2px; .z { padding: 2px; } } }',
+      code: '.x { padding: 14px; .y { padding: 14px; .z { padding: 14px; } } }',
       unfixable: true,
       description: 'SCSS > Rejects nested CSS.',
       warnings: [
         {
           column: 15,
-          endColumn: 18,
+          endColumn: 19,
           line: 1,
           rule: 'primer/spacing',
           severity: 'error',
-          message: messages.rejected('2px'),
+          message: messages.rejected('14px'),
         },
         {
-          column: 34,
-          endColumn: 37,
+          column: 35,
+          endColumn: 39,
           line: 1,
           rule: 'primer/spacing',
           severity: 'error',
-          message: messages.rejected('2px'),
+          message: messages.rejected('14px'),
         },
         {
-          column: 53,
-          endColumn: 56,
+          column: 55,
+          endColumn: 59,
           line: 1,
           rule: 'primer/spacing',
           severity: 'error',
-          message: messages.rejected('2px'),
+          message: messages.rejected('14px'),
         },
       ],
     },

package-lock.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@github/browserslist-config": "^1.0.0",
     "@primer/css": "^21.0.8",
-    "@primer/primitives": "^7.17.1",
+    "@primer/primitives": "^8.2.0",
     "anymatch": "^3.1.1",
     "postcss-scss": "^4.0.2",
     "postcss-styled-syntax": "^0.6.4",

package.json

@@ -29,9 +29,11 @@ const sizes = primitivesVariables('spacing')
 // Add +-1px to each value
 for (const size of sizes) {
   const values = size['values']
-  const px = values.find(value => value.includes('px'))
-  values.push(`${parseInt(px) + 1}px`)
-  values.push(`${parseInt(px) - 1}px`)
+  const px = parseInt(values.find(value => value.includes('px')))
+  if (![2, 6].includes(px)) {
+    values.push(`${px + 1}px`)
+    values.push(`${px - 1}px`)
+  }
 }
 
 /** @type {import('stylelint').Rule} */