@primer/stylelint-config 12.9.2-rc.46fe2e1 → 13.0.0-rc.0068ca3

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

package/plugins/no-unused-vars.js

@@ -1,96 +0,0 @@
-const TapMap = require('tap-map')
-const globby = require('globby')
-const matchAll = require('string.prototype.matchall')
-const stylelint = require('stylelint')
-const {readFileSync} = require('fs')
-
-const ruleName = 'primer/no-unused-vars'
-
-const cwd = process.cwd()
-const COLON = ':'
-const SCSS_VARIABLE_PATTERN = /(\$[-\w]+)/g
-
-const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: name => `The variable "${name}" is not referenced.`,
-})
-
-const cache = new TapMap()
-
-module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {files = ['**/*.scss', '!node_modules'], variablePattern = SCSS_VARIABLE_PATTERN, verbose = false} = options
-  // eslint-disable-next-line no-console
-  const log = verbose ? (...args) => console.warn(...args) : noop
-  const cacheOptions = {files, variablePattern, cwd}
-  const {refs} = getCachedVariables(cacheOptions, log)
-
-  return (root, result) => {
-    root.walkDecls(decl => {
-      for (const [name] of matchAll(decl.prop, variablePattern)) {
-        if (!refs.has(name)) {
-          stylelint.utils.report({
-            message: messages.rejected(name),
-            node: decl,
-            result,
-            ruleName,
-          })
-        } else {
-          const path = stripCwd(decl.source.input.file)
-          log(`${name} declared in ${path} ref'd in ${pluralize(refs.get(name).size, 'file')}`)
-        }
-      }
-    })
-  }
-})
-
-function getCachedVariables(options, log) {
-  const key = JSON.stringify(options)
-  return cache.tap(key, () => {
-    const {files, variablePattern} = options
-    const decls = new TapMap()
-    const refs = new TapMap()
-
-    log(`Looking for variables in ${files} ...`)
-    for (const file of globby.sync(files)) {
-      const css = readFileSync(file, 'utf8')
-      for (const match of matchAll(css, variablePattern)) {
-        const after = css.substr(match.index + match[0].length)
-        const name = match[0]
-        if (after.startsWith(COLON)) {
-          decls.tap(name, set).add(file)
-        } else {
-          refs.tap(name, set).add(file)
-        }
-      }
-    }
-    log(`Found ${decls.size} declarations, ${pluralize(refs.size, 'reference')}.`)
-
-    for (const [name, filesList] of decls.entries()) {
-      const fileRefs = refs.get(name)
-      if (fileRefs) {
-        log(`variable "${name}" declared in ${pluralize(filesList.size, 'file')}, ref'd in ${fileRefs.size}`)
-      } else {
-        log(`[!] variable "${name}" declared in ${Array.from(filesList)[0]} is not referenced`)
-      }
-    }
-
-    return {decls, refs}
-  })
-}
-
-function noop() {}
-
-function set() {
-  return new Set()
-}
-
-function stripCwd(path) {
-  return path.startsWith(cwd) ? path.substr(cwd.length + 1) : path
-}
-
-function pluralize(num, str, plural = `${str}s`) {
-  return num === 1 ? `${num} ${str}` : `${num} ${plural}`
-}