@primer/stylelint-config 12.9.2 → 13.0.0-rc.0a1e1bd

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/plugins/utilities.js

@@ -1,16 +1,16 @@
-const stylelint = require('stylelint')
-const utilities = require('./lib/primer-utilities')
+import stylelint from 'stylelint'
+import utilities from './lib/primer-utilities.js'
 
-const ruleName = 'primer/utilities'
+export const ruleName = 'primer/utilities'
 
-const messages = stylelint.utils.ruleMessages(ruleName, {
+export 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
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
+export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
   if (!enabled) {
     return noop
   }
@@ -50,6 +50,3 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
 })
 
 function noop() {}
-
-module.exports.ruleName = ruleName
-module.exports.messages = messages

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'],
-  },
-}

package/plugins/lib/primer.js

@@ -1,26 +0,0 @@
-const {existsSync} = require('fs')
-const {join} = require('path')
-
-module.exports = {
-  getPrimerModuleDir,
-  requirePrimerFile,
-}
-
-function getPrimerModuleDir() {
-  const cwd = process.cwd()
-  const localPackageJson = join(cwd, 'package.json')
-  if (existsSync(localPackageJson)) {
-    // eslint-disable-next-line import/no-dynamic-require
-    const {name} = require(localPackageJson)
-    if (name === '@primer/css') {
-      return cwd
-    }
-  }
-  return '@primer/css'
-}
-
-function requirePrimerFile(path) {
-  const fullPath = join(getPrimerModuleDir(), path)
-  // eslint-disable-next-line import/no-dynamic-require
-  return require(fullPath)
-}

package/plugins/new-color-vars-have-fallback.js

@@ -1,39 +0,0 @@
-const stylelint = require('stylelint')
-
-const ruleName = 'primer/new-color-vars-have-fallback'
-const messages = stylelint.utils.ruleMessages(ruleName, {
-  expectedFallback: variable =>
-    `Expected a fallback value for CSS variable ${variable}. New color variables fallbacks, check primer.style/primitives to find the correct value`,
-})
-
-module.exports = stylelint.createPlugin(ruleName, enabled => {
-  const variables = require('./lib/new-color-css-vars-map.json')
-
-  if (!enabled) {
-    return noop
-  }
-
-  return (root, result) => {
-    root.walkDecls(node => {
-      for (const variable of variables) {
-        if (node.value.includes(`var(${variable})`)) {
-          // Check if the declaration uses a CSS variable from the JSON
-          const match = node.value.match(new RegExp(`var\\(${variable},(.*)\\)`))
-          if (!match || match[1].trim() === '') {
-            stylelint.utils.report({
-              ruleName,
-              result,
-              node,
-              message: messages.expectedFallback(variable),
-            })
-          }
-        }
-      }
-    })
-  }
-})
-
-function noop() {}
-
-module.exports.ruleName = ruleName
-module.exports.messages = messages

package/plugins/no-deprecated-colors.js

@@ -1,103 +0,0 @@
-const stylelint = require('stylelint')
-const matchAll = require('string.prototype.matchall')
-
-const ruleName = 'primer/no-deprecated-colors'
-const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: (varName, replacement, property) => {
-    if (replacement === null) {
-      return `Variable ${varName} is deprecated for property ${property}. Please consult the primer color docs for a replacement. https://primer.style/primitives/storybook/?path=/story/migration-tables`
-    }
-
-    return `Variable ${varName} is deprecated for property ${property}. Please use the replacement ${replacement}.`
-  },
-})
-
-// Match CSS variable references (e.g var(--color-text-primary))
-// eslint-disable-next-line no-useless-escape
-const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
-
-const replacedVars = {}
-const newVars = {}
-
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
-  const {inlineFallback = false} = options
-
-  if (!enabled) {
-    return noop
-  }
-
-  const {verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-
-  // Keep track of declarations we've already seen
-  const seen = new WeakMap()
-
-  // eslint-disable-next-line import/no-dynamic-require
-  const variableChecks = require(options.deprecatedFile || './lib/primitives-v8.json')
-
-  const lintResult = (root, result) => {
-    // Walk all declarations
-    root.walk(node => {
-      if (seen.has(node)) {
-        return
-      } else {
-        seen.set(node, true)
-      }
-
-      // walk these nodes
-      if (node.type !== 'decl') {
-        return
-      }
-
-      for (const [, variableName] of matchAll(node.value, variableReferenceRegex)) {
-        if (variableName in variableChecks) {
-          let replacement = variableChecks[variableName]
-          if (typeof replacement === 'object') {
-            if (node.prop) {
-              for (const prop of replacement) {
-                // Check if node.prop starts with one of the props array elements
-                if (prop['props'].some(p => node.prop.startsWith(p))) {
-                  replacement = prop['replacement']
-                  break
-                }
-              }
-            }
-            if (typeof replacement === 'object') {
-              replacement = null
-            }
-          }
-
-          if (context.fix && replacement !== null) {
-            replacement = `${replacement}${inlineFallback ? `, var(${variableName})` : ''}`
-            replacedVars[variableName] = true
-            newVars[replacement] = true
-            if (node.type === 'atrule') {
-              node.params = node.params.replace(variableName, replacement)
-            } else {
-              node.value = node.value.replace(variableName, replacement)
-            }
-            continue
-          }
-
-          stylelint.utils.report({
-            message: messages.rejected(variableName, replacement, node.prop),
-            node,
-            ruleName,
-            result,
-          })
-        }
-      }
-    })
-  }
-
-  log(
-    `${Object.keys(replacedVars).length} deprecated variables replaced with ${Object.keys(newVars).length} variables.`,
-  )
-  return lintResult
-})
-
-function noop() {}
-
-module.exports.ruleName = ruleName
-module.exports.messages = messages

package/plugins/no-experimental-vars.js

@@ -1,47 +0,0 @@
-const stylelint = require('stylelint')
-const declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex')
-
-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
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop
-  }
-
-  // eslint-disable-next-line import/no-dynamic-require
-  const designTokens = require(options.designTokens)
-
-  let experimentalVars = null
-  for (const tokenType of Object.keys(designTokens)) {
-    experimentalVars = new Set(designTokens[tokenType].map(t => t['name']))
-  }
-
-  const lintResult = (root, result) => {
-    root.walkDecls(decl => {
-      for (const expVar of experimentalVars) {
-        if (decl.value.includes(`var(--${expVar})`)) {
-          stylelint.utils.report({
-            index: declarationValueIndex(decl),
-            message: messages.rejected(expVar),
-            node: decl,
-            result,
-            ruleName,
-          })
-        }
-      }
-    })
-  }
-
-  return lintResult
-})
-
-function noop() {}
-
-module.exports.ruleName = ruleName
-module.exports.messages = messages

package/plugins/no-override.js

@@ -1,120 +0,0 @@
-const stylelint = require('stylelint')
-const {requirePrimerFile} = require('./lib/primer')
-
-const ruleName = 'primer/no-override'
-const CLASS_PATTERN = /(\.[-\w]+)/
-const CLASS_PATTERN_ALL = new RegExp(CLASS_PATTERN, 'g')
-const CLASS_PATTERN_ONLY = /^\.[-\w]+(:{1,2}[-\w]+)?$/
-
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {bundles = ['utilities'], ignoreSelectors = []} = options
-
-  const isSelectorIgnored =
-    typeof ignoreSelectors === 'function'
-      ? ignoreSelectors
-      : selector => {
-          return ignoreSelectors.some(pattern => {
-            return pattern instanceof RegExp ? pattern.test(selector) : selector.includes(pattern)
-          })
-        }
-
-  const primerMeta = requirePrimerFile('dist/meta.json')
-  const availableBundles = Object.keys(primerMeta.bundles)
-
-  // These map selectors to the bundle in which they're defined.
-  // If there's no entry for a given selector, it means that it's not defined
-  // in one of the *specified* bundles, since we're iterating over the list of
-  // bundle names in the options.
-  const immutableSelectors = new Map()
-  const immutableClassSelectors = new Map()
-
-  for (const bundle of bundles) {
-    if (!availableBundles.includes(bundle)) {
-      continue
-    }
-    const stats = requirePrimerFile(`dist/stats/${bundle}.json`)
-    const selectors = stats.selectors.values
-    for (const selector of selectors) {
-      immutableSelectors.set(selector, bundle)
-      for (const classSelector of getClassSelectors(selector)) {
-        immutableClassSelectors.set(classSelector, bundle)
-      }
-    }
-  }
-
-  const messages = stylelint.utils.ruleMessages(ruleName, {
-    rejected: ({rule, selector, bundle}) => {
-      const definedIn = ` (defined in @primer/css/${bundle})`
-      const ruleSelector = collapseWhitespace(rule.selector)
-      const context = selector === rule.selector ? '' : ` in "${ruleSelector}"`
-      return `"${collapseWhitespace(selector)}" should not be overridden${context}${definedIn}.`
-    },
-  })
-
-  return (root, result) => {
-    if (!Array.isArray(bundles) || bundles.some(bundle => !availableBundles.includes(bundle))) {
-      const invalidBundles = Array.isArray(bundles)
-        ? `"${bundles.filter(bundle => !availableBundles.includes(bundle)).join('", "')}"`
-        : '(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',
-      })
-    }
-
-    const report = subject =>
-      stylelint.utils.report({
-        message: messages.rejected(subject),
-        node: subject.rule,
-        result,
-        ruleName,
-      })
-
-    root.walkRules(rule => {
-      const {selector} = rule
-      if (immutableSelectors.has(selector)) {
-        if (isClassSelector(selector)) {
-          if (!isSelectorIgnored(selector)) {
-            return report({
-              rule,
-              bundle: immutableSelectors.get(selector),
-              selector,
-            })
-          }
-        } else {
-          // console.log(`not a class selector: "${selector}"`)
-        }
-      }
-      for (const classSelector of getClassSelectors(selector)) {
-        if (immutableClassSelectors.has(classSelector)) {
-          if (!isSelectorIgnored(classSelector)) {
-            return report({
-              rule,
-              bundle: immutableClassSelectors.get(classSelector),
-              selector: classSelector,
-            })
-          }
-        }
-      }
-    })
-  }
-})
-
-function getClassSelectors(selector) {
-  const match = selector.match(CLASS_PATTERN_ALL)
-  return match ? [...match] : []
-}
-
-function isClassSelector(selector) {
-  return CLASS_PATTERN_ONLY.test(selector)
-}
-
-function collapseWhitespace(str) {
-  return str.trim().replace(/\s+/g, ' ')
-}
-
-function noop() {}

package/plugins/no-scale-colors.js

@@ -1,54 +0,0 @@
-const stylelint = require('stylelint')
-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`,
-})
-
-// Match CSS variable references (e.g var(--color-text-primary))
-// eslint-disable-next-line no-useless-escape
-const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
-
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-
-  // Keep track of declarations we've already seen
-  const seen = new WeakMap()
-
-  return (root, result) => {
-    root.walkRules(rule => {
-      rule.walkDecls(decl => {
-        if (seen.has(decl)) {
-          return
-        } else {
-          seen.set(decl, true)
-        }
-
-        for (const [, variableName] of matchAll(decl.value, variableReferenceRegex)) {
-          log(`Found variable reference ${variableName}`)
-          if (variableName.match(/^--color-(scale|auto)-/)) {
-            stylelint.utils.report({
-              message: messages.rejected(variableName),
-              node: decl,
-              result,
-              ruleName,
-            })
-          }
-        }
-      })
-    })
-  }
-})
-
-function noop() {}
-
-module.exports.ruleName = ruleName
-module.exports.messages = messages

package/plugins/no-undefined-vars.js

@@ -1,121 +0,0 @@
-const fs = require('fs')
-const stylelint = require('stylelint')
-const matchAll = require('string.prototype.matchall')
-const globby = require('globby')
-const TapMap = require('tap-map')
-
-const ruleName = 'primer/no-undefined-vars'
-const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: varName => `${varName} is not defined`,
-})
-
-// Match CSS variable definitions (e.g. --color-text-primary:)
-const variableDefinitionRegex = /^\s*(--[\w|-]+):/gm
-
-// Match CSS variables defined with the color-variables mixin
-const colorModeVariableDefinitionRegex = /^[^/\n]*\(["']?([^'"\s,]+)["']?,\s*\(light|dark:/gm
-
-// Match CSS variable references (e.g var(--color-text-primary))
-// eslint-disable-next-line no-useless-escape
-const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g
-
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {files = ['**/*.scss', '!node_modules'], verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-  const globalDefinedVariables = getDefinedVariables(files, log)
-  // Keep track of declarations we've already seen
-  const seen = new WeakMap()
-
-  return (root, result) => {
-    const fileDefinedVariables = new Set()
-
-    function checkVariable(variableName, node, allowed) {
-      if (!allowed.has(variableName)) {
-        stylelint.utils.report({
-          message: messages.rejected(variableName),
-          node,
-          result,
-          ruleName,
-        })
-      }
-    }
-
-    root.walkAtRules(rule => {
-      if (rule.name === 'include' && rule.params.startsWith('color-variables')) {
-        const innerMatch = [...matchAll(rule.params, variableReferenceRegex)]
-        if (!innerMatch.length) {
-          return
-        }
-
-        for (const [, variableName] of innerMatch) {
-          checkVariable(variableName, rule, new Set([...globalDefinedVariables, ...fileDefinedVariables]))
-        }
-      }
-    })
-
-    root.walkRules(rule => {
-      const scopeDefinedVaribles = new Set()
-
-      rule.walkDecls(decl => {
-        // Add CSS variable declarations within the source text to the list of allowed variables
-        if (decl.prop.startsWith('--')) {
-          scopeDefinedVaribles.add(decl.prop)
-          if (decl.parent.selector === ':root' || decl.parent.selector === ':host') {
-            fileDefinedVariables.add(decl.prop)
-          }
-        }
-
-        if (seen.has(decl)) {
-          return
-        } else {
-          seen.set(decl, true)
-        }
-
-        for (const [, variableName] of matchAll(decl.value, variableReferenceRegex)) {
-          checkVariable(
-            variableName,
-            decl,
-            new Set([...globalDefinedVariables, ...fileDefinedVariables, ...scopeDefinedVaribles]),
-          )
-        }
-      })
-    })
-  }
-})
-
-const cwd = process.cwd()
-const cache = new TapMap()
-
-function getDefinedVariables(globs, log) {
-  const cacheKey = JSON.stringify({globs, cwd})
-  return cache.tap(cacheKey, () => {
-    const definedVariables = new Set()
-
-    const files = globby.sync(globs)
-    log(`Scanning ${files.length} SCSS files for CSS variables`)
-    for (const file of files) {
-      log(`==========\nLooking for CSS variable definitions in ${file}`)
-      const css = fs.readFileSync(file, 'utf-8')
-      for (const [, variableName] of matchAll(css, variableDefinitionRegex)) {
-        log(`${variableName} defined in ${file}`)
-        definedVariables.add(variableName)
-      }
-      for (const [, variableName] of matchAll(css, colorModeVariableDefinitionRegex)) {
-        log(`--color-${variableName} defined via color-variables in ${file}`)
-        definedVariables.add(`--color-${variableName}`)
-      }
-    }
-
-    return definedVariables
-  })
-}
-
-function noop() {}
-
-module.exports.ruleName = ruleName
-module.exports.messages = messages