@primer/stylelint-config 12.9.1 → 12.9.2

package/index.js

@@ -23,6 +23,7 @@ module.exports = {
     './plugins/typography',
     './plugins/utilities',
     './plugins/new-color-vars-have-fallback',
+    './plugins/no-display-colors',
   ],
   rules: {
     'alpha-value-notation': 'number',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.9.1",
+  "version": "12.9.2",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",

package/plugins/no-display-colors.js

@@ -0,0 +1,53 @@
+const stylelint = require('stylelint')
+const matchAll = require('string.prototype.matchall')
+
+const ruleName = 'primer/no-display-colors'
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected: varName => `${varName} is in alpha and should be used with caution with approval from the Primer team`,
+})
+
+// Match CSS variable references (e.g var(--display-blue-fgColor))
+// 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(/^--display-.*/)) {
+            stylelint.utils.report({
+              message: messages.rejected(variableName),
+              node: decl,
+              result,
+              ruleName,
+            })
+          }
+        }
+      })
+    })
+  }
+})
+
+function noop() {}
+
+module.exports.ruleName = ruleName
+module.exports.messages = messages