@primer/stylelint-config 13.0.0-rc.35215da → 13.0.0-rc.3727b0c

package/plugins/spacing.js

@@ -1,69 +1,60 @@
 import stylelint from 'stylelint'
 import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
 import valueParser from 'postcss-value-parser'
+import {primitivesVariables, walkGroups} from './lib/utils.js'
 
-// TODO: Pull this in from primer/primitives
-const spacerValues = {
-  '$spacer-1': '4px',
-  '$spacer-2': '8px',
-  '$spacer-3': '16px',
-  '$spacer-4': '24px',
-  '$spacer-5': '32px',
-  '$spacer-6': '40px',
-  '$spacer-7': '48px',
-  '$spacer-8': '64px',
-  '$spacer-9': '80px',
-  '$spacer-10': '96px',
-  '$spacer-11': '112px',
-  '$spacer-12': '128px',
-  '$em-spacer-1': '0.0625em',
-  '$em-spacer-2': '0.125em',
-  '$em-spacer-3': '0.25em',
-  '$em-spacer-4': '0.375em',
-  '$em-spacer-5': '0.5em',
-  '$em-spacer-6': '0.75em',
-}
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint
 
 export const ruleName = 'primer/spacing'
-export const messages = stylelint.utils.ruleMessages(ruleName, {
+export const messages = ruleMessages(ruleName, {
   rejected: (value, replacement) => {
-    if (replacement === null) {
-      return `Please use a primer spacer variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/css/storybook/?path=/docs/support-spacing--docs`
+    if (!replacement) {
+      return `Please use a primer size variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size`
     }
 
-    return `Please replace ${value} with spacing variable '${replacement}'.`
+    return `Please replace '${value}' with size variable '${replacement['name']}'. https://primer.style/foundations/primitives/size`
   },
 })
 
-const walkGroups = (root, validate) => {
-  for (const node of root.nodes) {
-    if (node.type === 'function') {
-      walkGroups(node, validate)
-    } else {
-      validate(node)
-    }
+// Props that we want to check
+const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left']
+// Values that we want to ignore
+const valueList = ['${']
+
+const sizes = primitivesVariables('spacing')
+
+// Add +-1px to each value
+for (const size of sizes) {
+  const values = size['values']
+  const px = parseInt(values.find(value => value.includes('px')))
+  if (![2, 6].includes(px)) {
+    values.push(`${px + 1}px`)
+    values.push(`${px - 1}px`)
   }
-  return root
 }
 
-// eslint-disable-next-line no-unused-vars
-export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop
-  }
+/** @type {import('stylelint').Rule} */
+const ruleFunction = (primary, secondaryOptions, context) => {
+  return (root, result) => {
+    const validOptions = validateOptions(result, ruleName, {
+      actual: primary,
+      possible: [true],
+    })
 
-  const lintResult = (root, result) => {
-    root.walk(decl => {
-      if (decl.type !== 'decl' || !decl.prop.match(/^(padding|margin)/)) {
-        return noop
-      }
+    if (!validOptions) return
 
-      const problems = []
+    root.walkDecls(declNode => {
+      const {prop, value} = declNode
 
-      const parsedValue = walkGroups(valueParser(decl.value), node => {
-        // Remove leading negative sign, if any.
-        const cleanValue = node.value.replace(/^-/g, '')
+      if (!propList.some(spacingProp => prop.startsWith(spacingProp))) return
+      if (valueList.some(valueToIgnore => value.includes(valueToIgnore))) return
 
+      const problems = []
+
+      const parsedValue = walkGroups(valueParser(value), node => {
         // Only check word types. https://github.com/TrySound/postcss-value-parser#word
         if (node.type !== 'word') {
           return
@@ -74,30 +65,36 @@ export default stylelint.createPlugin(ruleName, (enabled, options = {}, context)
           return
         }
 
-        const valueUnit = valueParser.unit(cleanValue)
+        const valueUnit = valueParser.unit(node.value)
+
+        if (valueUnit && (valueUnit.unit === '' || !/^-?[0-9.]+$/.test(valueUnit.number))) {
+          return
+        }
 
-        if (valueUnit && (valueUnit.unit === '' || !/^[0-9.]+$/.test(valueUnit.number))) {
+        // Skip if the value unit isn't a supported unit.
+        if (valueUnit && !['px', 'rem', 'em'].includes(valueUnit.unit)) {
           return
         }
 
-        // If the a variable is found in the value, skip it.
+        // If the variable is found in the value, skip it.
         if (
-          Object.keys(spacerValues).some(variable =>
-            new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(cleanValue),
+          sizes.some(variable =>
+            new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(node.value),
           )
         ) {
           return
         }
 
-        const replacement = Object.keys(spacerValues).find(spacer => spacerValues[spacer] === cleanValue) || null
-        const valueMatch = replacement ? spacerValues[replacement] : node.value
+        const replacement = sizes.find(variable => variable.values.includes(node.value.replace('-', '')))
+        const fixable = replacement && valueUnit && !valueUnit.number.includes('-')
 
-        if (replacement && context.fix) {
-          node.value = node.value.replace(valueMatch, replacement)
+        if (fixable && context.fix) {
+          node.value = node.value.replace(node.value, `var(${replacement['name']})`)
         } else {
           problems.push({
-            index: declarationValueIndex(decl) + node.sourceIndex,
-            message: messages.rejected(valueMatch, replacement),
+            index: declarationValueIndex(declNode) + node.sourceIndex,
+            endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
+            message: messages.rejected(node.value, replacement),
           })
         }
 
@@ -105,15 +102,16 @@ export default stylelint.createPlugin(ruleName, (enabled, options = {}, context)
       })
 
       if (context.fix) {
-        decl.value = parsedValue.toString()
+        declNode.value = parsedValue.toString()
       }
 
       if (problems.length) {
         for (const err of problems) {
-          stylelint.utils.report({
+          report({
             index: err.index,
+            endIndex: err.endIndex,
             message: err.message,
-            node: decl,
+            node: declNode,
             result,
             ruleName,
           })
@@ -121,8 +119,12 @@ export default stylelint.createPlugin(ruleName, (enabled, options = {}, context)
       }
     })
   }
+}
 
-  return lintResult
-})
+ruleFunction.ruleName = ruleName
+ruleFunction.messages = messages
+ruleFunction.meta = {
+  fixable: true,
+}
 
-function noop() {}
+export default createPlugin(ruleName, ruleFunction)

package/plugins/lib/primer-utilities.js

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