@primer/stylelint-config 13.0.0-rc.6ef7302 → 13.0.0-rc.77d8c5f

package/plugins/no-override.js

@@ -1,98 +0,0 @@
-import stylelint from 'stylelint'
-import primerJson from '@primer/css/dist/stats/primer.json' with {type: 'json'}
-
-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]+)?$/
-
-export default stylelint.createPlugin(ruleName, (enabled, options = {}) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const {ignoreSelectors = []} = options
-
-  const isSelectorIgnored =
-    typeof ignoreSelectors === 'function'
-      ? ignoreSelectors
-      : selector => {
-          return ignoreSelectors.some(pattern => {
-            return pattern instanceof RegExp ? pattern.test(selector) : selector.includes(pattern)
-          })
-        }
-
-  // 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 Set()
-  const immutableClassSelectors = new Set()
-
-  const selectors = primerJson.selectors.values
-  for (const selector of selectors) {
-    immutableSelectors.add(selector)
-    for (const classSelector of getClassSelectors(selector)) {
-      immutableClassSelectors.add(classSelector)
-    }
-  }
-
-  const messages = stylelint.utils.ruleMessages(ruleName, {
-    rejected: ({rule, selector}) => {
-      const ruleSelector = collapseWhitespace(rule.selector)
-      const context = selector === rule.selector ? '' : ` in "${ruleSelector}"`
-      return `Primer CSS class "${collapseWhitespace(selector)}" should not be overridden${context}.`
-    },
-  })
-
-  return (root, result) => {
-    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,
-              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,
-              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,51 +0,0 @@
-import stylelint from 'stylelint'
-import matchAll from 'string.prototype.matchall'
-
-export const ruleName = 'primer/no-scale-colors'
-export 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
-
-export default 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() {}

package/plugins/no-undefined-vars.js

@@ -1,118 +0,0 @@
-import fs from 'fs'
-import stylelint from 'stylelint'
-import matchAll from 'string.prototype.matchall'
-import globby from 'globby'
-import TapMap from 'tap-map'
-
-export const ruleName = 'primer/no-undefined-vars'
-export 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
-
-export default 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() {}

package/plugins/no-unused-vars.js

@@ -1,96 +0,0 @@
-import TapMap from 'tap-map'
-import globby from 'globby'
-import matchAll from 'string.prototype.matchall'
-import stylelint from 'stylelint'
-import {readFileSync} from 'fs'
-
-export const ruleName = 'primer/no-unused-vars'
-
-const cwd = process.cwd()
-const COLON = ':'
-const SCSS_VARIABLE_PATTERN = /(\$[-\w]+)/g
-
-export const messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: name => `The variable "${name}" is not referenced.`,
-})
-
-const cache = new TapMap()
-
-export default 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}`
-}

package/plugins/utilities.js

@@ -1,52 +0,0 @@
-import stylelint from 'stylelint'
-import utilities from './lib/primer-utilities.js'
-
-export const ruleName = 'primer/utilities'
-
-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
-export default stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
-  if (!enabled) {
-    return noop
-  }
-
-  const utilityReplacement = (declaration, value) => {
-    const declarationUtilities = utilities[declaration]
-    if (declarationUtilities) {
-      return declarationUtilities.find(utility => {
-        return utility.value === value
-      })
-    }
-  }
-
-  const lintResult = (root, result) => {
-    root.walkRules(rule => {
-      if (!/^\.[\w\-_]+$/.exec(rule.selector)) {
-        return
-      }
-      const decls = rule.nodes.filter(decl => decl.type === 'decl')
-
-      if (decls.length === 1) {
-        const replacement = utilityReplacement(decls[0].prop, decls[0].value)
-        if (replacement) {
-          stylelint.utils.report({
-            index: rule.sourceIndex,
-            message: messages.rejected(rule.selector, replacement.utilityClass),
-            node: rule,
-            result,
-            ruleName,
-          })
-        }
-      }
-    })
-  }
-
-  return lintResult
-})
-
-function noop() {}