@primer/stylelint-config 12.5.0-rc.95b13e5 → 12.6.0-rc.95fce9c

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 12.6.0
+
+### Minor Changes
+
+- [#272](https://github.com/primer/stylelint-config/pull/272) [`9104062`](https://github.com/primer/stylelint-config/commit/91040626d2195cbb63f1e302ae53acdd4ba5b361) Thanks [@langermank](https://github.com/langermank)! - Add no-experimental-vars plugin
+
 ## 12.5.0
 
 ### Minor Changes

package/index.js

@@ -13,6 +13,7 @@ module.exports = {
     './plugins/box-shadow',
     './plugins/colors',
     './plugins/no-deprecated-colors',
+    './plugins/no-experimental-vars',
     './plugins/no-override',
     './plugins/no-scale-colors',
     './plugins/no-undefined-vars',
@@ -61,6 +62,12 @@ module.exports = {
     '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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.5.0-rc.95b13e5",
+  "version": "12.6.0-rc.95fce9c",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -43,7 +43,7 @@
     "@changesets/cli": "2.22.0",
     "@github/prettier-config": "0.0.4",
     "@primer/css": "^20.0.0",
-    "@primer/primitives": "^7.0.1",
+    "@primer/primitives": "^7.8.3",
     "dedent": "0.7.0",
     "eslint": "8.14.0",
     "eslint-plugin-github": "4.3.5",

package/plugins/no-experimental-vars.js

@@ -0,0 +1,47 @@
+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