allow control tokens in padding

Author: lukasoppermann

.changeset/allow-control-spacing-tokens.md

@@ -0,0 +1,5 @@
+---
+"@primer/stylelint-config": minor
+---
+
+Allow functional size tokens (e.g. `--control-medium-paddingInline-condensed`) in the `primer/spacing` rule. Also add `unset` to the list of ignored keyword values.

__tests__/__fixtures__/good/example.pcss

@@ -1,5 +1,3 @@
-/* stylelint-disable primer/spacing */
-
 /* CSS for Button  */
 
 /* temporary, pre primitives release */
@@ -165,7 +163,7 @@
   & .Button-content {
     flex: 1 1 auto;
     align-self: stretch;
-    padding-block: calc(var(--control-medium-paddingBlock) - 2px);
+    padding-block: calc(var(--control-medium-paddingBlock) - 2px); /* stylelint-disable-line primer/spacing */
   }
 
   & .Button-label {
@@ -177,7 +175,7 @@
     min-height: var(--control-small-size);
 
     & .Button-content {
-      padding-block: calc(var(--control-small-paddingBlock) - 2px);
+      padding-block: calc(var(--control-small-paddingBlock) - 2px); /* stylelint-disable-line primer/spacing */
     }
   }
 
@@ -187,7 +185,7 @@
     padding-inline: var(--control-large-paddingInline-spacious);
 
     & .Button-content {
-      padding-block: calc(var(--control-large-paddingBlock) - 2px);
+      padding-block: calc(var(--control-large-paddingBlock) - 2px); /* stylelint-disable-line primer/spacing */
     }
   }
 }

__tests__/spacing.js

@@ -19,6 +19,10 @@ testRule({
       code: '.x { padding: var(--base-size-4); }',
       description: 'CSS > One variable is valid.',
     },
+    {
+      code: '.x { padding: var(--control-medium-paddingInline-condensed); }',
+      description: 'CSS > Functional size variable (control token) is valid.',
+    },
     {
       code: '.x { padding-bottom: var(--base-size-4); }',
       description: 'CSS > Works on property partial match.',

plugins/lib/utils.js

@@ -2,13 +2,16 @@ import {createRequire} from 'node:module'
 
 const require = createRequire(import.meta.url)
 
-export function primitivesVariables(type) {
+export function primitivesVariables(type, options = {}) {
   const variables = []
 
   const files = []
   switch (type) {
     case 'spacing':
       files.push('base/size/size.json')
+      if (options.includeFunctional) {
+        files.push('functional/size/size.json')
+      }
       break
     case 'border':
       files.push('functional/size/border.json')

plugins/spacing.js

@@ -25,6 +25,7 @@ const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left']
 const valueList = ['${']
 
 const sizes = primitivesVariables('spacing')
+const allowedSizeVars = primitivesVariables('spacing', {includeFunctional: true})
 
 // Add +-1px to each value
 for (const size of sizes) {
@@ -59,7 +60,7 @@ const ruleFunction = primary => {
         }
 
         // Exact values to ignore.
-        if (['*', '+', '-', '/', '0', 'auto', 'inherit', 'initial'].includes(node.value)) {
+        if (['*', '+', '-', '/', '0', 'auto', 'inherit', 'initial', 'unset'].includes(node.value)) {
           return
         }
 
@@ -76,7 +77,7 @@ const ruleFunction = primary => {
 
         // If the variable is found in the value, skip it.
         if (
-          sizes.some(variable =>
+          allowedSizeVars.some(variable =>
             new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(node.value),
           )
         ) {