@primer/stylelint-config 12.9.2 → 13.0.0-rc.04ba287

package/plugins/lib/variable-rules.js

@@ -1,27 +1,12 @@
-const stylelint = require('stylelint')
-const {requirePrimerFile} = require('./primer')
-const declarationValidator = require('./decl-validator')
+import stylelint from 'stylelint'
+import declarationValidator from './decl-validator.js'
+import variables from '@primer/css/dist/variables.json' with {type: 'json'}
 
-const CSS_IMPORTANT = '!important'
-const CSS_DIRECTIONS = ['top', 'right', 'bottom', 'left']
-const CSS_CORNERS = ['top-right', 'bottom-right', 'bottom-left', 'top-left']
-
-module.exports = {
-  createVariableRule,
-  CSS_DIRECTIONS,
-  CSS_CORNERS,
-  CSS_IMPORTANT,
-}
-
-function createVariableRule(ruleName, rules, url) {
-  let variables = {}
-  try {
-    variables = requirePrimerFile('dist/variables.json')
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.warn(`Unable to get variables.json from @primer/css. Replacements will need to be specified manually.`)
-  }
+export const CSS_IMPORTANT = '!important'
+export const CSS_DIRECTIONS = ['top', 'right', 'bottom', 'left']
+export const CSS_CORNERS = ['top-right', 'bottom-right', 'bottom-left', 'top-left']
 
+export function createVariableRule(ruleName, rules, url) {
   const plugin = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
     if (enabled === false) {
       return noop

package/plugins/no-display-colors.js

@@ -1,8 +1,8 @@
-const stylelint = require('stylelint')
-const matchAll = require('string.prototype.matchall')
+import stylelint from 'stylelint'
+import matchAll from 'string.prototype.matchall'
 
-const ruleName = 'primer/no-display-colors'
-const messages = stylelint.utils.ruleMessages(ruleName, {
+export const ruleName = 'primer/no-display-colors'
+export const messages = stylelint.utils.ruleMessages(ruleName, {
   rejected: varName => `${varName} is in alpha and should be used with caution with approval from the Primer team`,
 })
 
@@ -10,7 +10,7 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
 // eslint-disable-next-line no-useless-escape
 const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
 
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
+export default stylelint.createPlugin(ruleName, (enabled, options = {}) => {
   if (!enabled) {
     return noop
   }
@@ -48,6 +48,3 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
 })
 
 function noop() {}
-
-module.exports.ruleName = ruleName
-module.exports.messages = messages

package/plugins/responsive-widths.js

@@ -1,10 +1,10 @@
-const stylelint = require('stylelint')
-const declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex')
-const valueParser = require('postcss-value-parser')
+import stylelint from 'stylelint'
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.cjs'
+import valueParser from 'postcss-value-parser'
 
-const ruleName = 'primer/responsive-widths'
+export const ruleName = 'primer/responsive-widths'
 
-const messages = stylelint.utils.ruleMessages(ruleName, {
+export 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`
   },
@@ -24,7 +24,7 @@ const walkGroups = (root, validate) => {
 }
 
 // eslint-disable-next-line no-unused-vars
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
+export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
   if (!enabled) {
     return noop
   }
@@ -93,6 +93,3 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
 })
 
 function noop() {}
-
-module.exports.ruleName = ruleName
-module.exports.messages = messages

package/plugins/spacing.js

@@ -1,69 +1,60 @@
-const stylelint = require('stylelint')
-const declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex')
-const valueParser = require('postcss-value-parser')
-
-// 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 ruleName = 'primer/spacing'
-const messages = stylelint.utils.ruleMessages(ruleName, {
+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'
+
+const {
+  createPlugin,
+  utils: {report, ruleMessages, validateOptions},
+} = stylelint
+
+export const ruleName = 'primer/spacing'
+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/support/spacing`
+    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
-module.exports = 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 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
           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 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
       })
 
       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,11 +119,12 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
       }
     })
   }
+}
 
-  return lintResult
-})
-
-function noop() {}
+ruleFunction.ruleName = ruleName
+ruleFunction.messages = messages
+ruleFunction.meta = {
+  fixable: true,
+}
 
-module.exports.ruleName = ruleName
-module.exports.messages = messages
+export default createPlugin(ruleName, ruleFunction)

package/plugins/typography.js

@@ -1,6 +1,6 @@
-const {createVariableRule} = require('./lib/variable-rules')
+import {createVariableRule} from './lib/variable-rules.js'
 
-module.exports = createVariableRule(
+export default createVariableRule(
   'primer/typography',
   {
     'font-size': {

package/property-order.js

@@ -1,4 +1,4 @@
-module.exports = [
+export default [
   'all',
   'position',
   'top',

package/browsers.js

@@ -1,7 +0,0 @@
-module.exports = [
-  '> 5%',
-  'last 2 firefox versions',
-  'last 2 chrome versions',
-  'last 2 safari versions',
-  'last 2 edge versions',
-]

package/index.js

@@ -1,106 +0,0 @@
-const browsers = require('./browsers')
-const propertyOrder = require('./property-order')
-
-module.exports = {
-  extends: ['stylelint-config-standard'],
-  customSyntax: require('postcss-scss'),
-  ignoreFiles: ['**/*.js', '**/*.cjs'],
-  plugins: [
-    'stylelint-no-unsupported-browser-features',
-    'stylelint-order',
-    'stylelint-scss',
-    './plugins/borders',
-    './plugins/box-shadow',
-    './plugins/colors',
-    './plugins/no-deprecated-colors',
-    './plugins/no-experimental-vars',
-    './plugins/no-override',
-    './plugins/no-scale-colors',
-    './plugins/no-undefined-vars',
-    './plugins/no-unused-vars',
-    './plugins/responsive-widths',
-    './plugins/spacing',
-    './plugins/typography',
-    './plugins/utilities',
-    './plugins/new-color-vars-have-fallback',
-    './plugins/no-display-colors',
-  ],
-  rules: {
-    'alpha-value-notation': 'number',
-    'at-rule-disallowed-list': ['extend'],
-    'at-rule-no-unknown': null,
-    'block-no-empty': true,
-    'color-function-notation': null,
-    'color-named': 'never',
-    'color-no-invalid-hex': true,
-    'comment-no-empty': null,
-    'custom-property-pattern': null,
-    'declaration-block-no-duplicate-properties': [true, {ignore: ['consecutive-duplicates']}],
-    'declaration-block-no-redundant-longhand-properties': null,
-    'declaration-block-no-shorthand-property-overrides': true,
-    'declaration-property-value-disallowed-list': {
-      '/^transition/': ['/all/'],
-      '/^background/': ['http:', 'https:'],
-      '/^border/': ['none'],
-      '/.+/': ['initial'],
-    },
-    'function-calc-no-unspaced-operator': true,
-    'function-linear-gradient-no-nonstandard-direction': true,
-    'function-no-unknown': null,
-    'keyframes-name-pattern': null,
-    'max-nesting-depth': 3,
-    'media-feature-name-no-unknown': null,
-    'media-feature-name-no-vendor-prefix': null,
-    'no-descending-specificity': null,
-    'no-duplicate-selectors': true,
-    'no-invalid-position-at-import-rule': [true, {ignoreAtRules: ['use']}],
-    'number-max-precision': null,
-    'order/properties-order': propertyOrder,
-    'plugin/no-unsupported-browser-features': [true, {severity: 'warning', browsers}],
-    'primer/borders': true,
-    'primer/box-shadow': true,
-    'primer/colors': true,
-    'primer/no-deprecated-colors': true,
-    'primer/no-experimental-vars': [
-      true,
-      {
-        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'},
-    ],
-    'primer/no-unused-vars': [true, {severity: 'warning'}],
-    'primer/responsive-widths': true,
-    'primer/spacing': true,
-    'primer/typography': true,
-    'primer/utilities': null,
-    'primer/new-color-vars-have-fallback': [true, {severity: 'error'}],
-    'scss/at-extend-no-missing-placeholder': true,
-    'scss/at-rule-no-unknown': true,
-    'scss/declaration-nested-properties-no-divided-groups': true,
-    'scss/dollar-variable-no-missing-interpolation': true,
-    'scss/function-quote-no-quoted-strings-inside': true,
-    'scss/function-unquote-no-unquoted-strings-inside': true,
-    'scss/no-duplicate-mixins': true,
-    'scss/selector-no-redundant-nesting-selector': true,
-    'selector-class-pattern': null,
-    'selector-max-compound-selectors': 3,
-    'selector-max-id': 0,
-    'selector-max-specificity': '0,4,0',
-    'selector-max-type': 0,
-    'selector-no-qualifying-type': true,
-    'selector-pseudo-element-no-unknown': true,
-    'string-no-newline': true,
-    'unit-no-unknown': true,
-    'value-keyword-case': null,
-    'selector-not-notation': null,
-    'import-notation': ['string'],
-    'annotation-no-unknown': null,
-    'keyframe-selector-notation': ['percentage-unless-within-keyword-only-block'],
-    'media-query-no-invalid': null,
-    'media-feature-range-notation': ['prefix'],
-  },
-}