@primer/stylelint-config 12.8.0 → 12.9.0-rc.ea3b36b

package/index.js

@@ -22,6 +22,7 @@ module.exports = {
     './plugins/spacing',
     './plugins/typography',
     './plugins/utilities',
+    './plugins/new-color-vars-have-fallback',
   ],
   rules: {
     'alpha-value-notation': 'number',
@@ -75,6 +76,7 @@ module.exports = {
     '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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.8.0",
+  "version": "12.9.0-rc.ea3b36b",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -41,9 +41,9 @@
     "@changesets/changelog-github": "0.4.7",
     "@changesets/cli": "2.26.1",
     "@github/prettier-config": "0.0.6",
-    "@primer/css": "^20.0.0",
+    "@primer/css": "^21.0.8",
     "@primer/primitives": "^7.11.11",
-    "dedent": "0.7.0",
+    "dedent": "1.5.1",
     "eslint": "8.39.0",
     "eslint-plugin-github": "4.8.0",
     "eslint-plugin-jest": "27.2.3",

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

@@ -0,0 +1,52 @@
+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`,
+})
+
+const fs = require('fs')
+const path = require('path')
+
+const jsonFilePath = 'node_modules/@primer/primitives/tokens-next-private/docs/functional/themes/light.json'
+let jsonContent
+
+try {
+  const fileContent = fs.readFileSync(path.resolve(jsonFilePath), 'utf8')
+  jsonContent = JSON.parse(fileContent)
+  // console.log('JSON content:', jsonContent) // Log to see the content
+} catch (error) {
+  // eslint-disable-next-line no-console
+  console.error('Error reading JSON file:', error)
+}
+
+module.exports = stylelint.createPlugin(ruleName, enabled => {
+  if (!enabled) {
+    return noop
+  }
+
+  return (root, result) => {
+    root.walkDecls(decl => {
+      for (const key of Object.keys(jsonContent)) {
+        if (decl.value.includes(`var(--${key})`)) {
+          // Check if the declaration uses a CSS variable from the JSON
+          const match = decl.value.match(/var\(--\w+,(.*)\)/)
+          if (!match || match[1].trim() === '') {
+            stylelint.utils.report({
+              ruleName,
+              result,
+              node: decl,
+              message: messages.expectedFallback(`--${key}`),
+            })
+          }
+        }
+      }
+    })
+  }
+})
+
+function noop() {}
+
+module.exports.ruleName = ruleName
+module.exports.messages = messages