new attempt

Author: langermank

package-lock.json

@@ -0,0 +1,43 @@
+const rule = require('../no-color-css-vars')
+const {RuleTester} = require('eslint')
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
+
+// report all strings that start with 'var(--color-'
+// autofix strings: 'var(--color-fg-default)' -> 'fg.default'
+
+{
+  /* <Button sx={{zIndex: 1, color: 'var(--color-fg-muted)'}}> */
+}
+
+{
+  /* <Box sx={{
+        '&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
+          color: 'var(--color-accent-fg)',
+        },
+      }}
+></Box> */
+}
+
+ruleTester.run('no-color-css-vars', rule, {
+  valid: [`{color: 'fg.default'}`],
+  invalid: [
+    {
+      code: `{color: 'var(--color-fg-default)'}`,
+      output: `{color: 'fg.default'}`,
+      errors: [
+        {
+          message: 'Replace var(--color-fg-default) with fg.default'
+        }
+      ]
+    }
+  ]
+})

src/rules/__tests__/no-color-css-vars.test.js

@@ -14,6 +14,19 @@ const ruleTester = new RuleTester({
 // report all strings that start with 'var(--color-'
 // autofix strings: 'var(--color-fg-default)' -> 'fg.default'
 
+{
+  /* <Button sx={{zIndex: 1, color: 'var(--color-fg-muted)'}}> */
+}
+
+{
+  /* <Box sx={{
+        '&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
+          color: 'var(--color-accent-fg)',
+        },
+      }}
+></Box> */
+}
+
 ruleTester.run('no-deprecated-colors', rule, {
   valid: [`{color: 'text.primary'}`],
   invalid: [

src/rules/__tests__/no-css-vars.test.js

@@ -0,0 +1,51 @@
+const cssVars = require('../temp-fix.json')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    hasSuggestions: true,
+    fixable: 'code',
+    docs: {
+      description: 'Disallow the use of CSS color variables in React'
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          skipImportCheck: {
+            type: 'boolean'
+          },
+          checkAllStrings: {
+            type: 'boolean'
+          }
+        },
+        additionalProperties: false
+      }
+    ]
+  },
+  create(context) {
+    return {
+      Literal(node) {
+        const stringValue = node.value
+
+        if (typeof stringValue !== 'string') {
+          return
+        }
+
+        Object.keys(cssVars).forEach(cssVar => {
+          if (stringValue.includes(`var(${cssVar}`)) {
+            const fixedString = stringValue.replace(`var(${cssVar})`, cssVars[cssVar])
+
+            context.report({
+              node,
+              message: `Replace var(${cssVar}) with ${cssVars[cssVar]}`,
+              fix: function(fixer) {
+                return fixer.replaceText(node, `'${fixedString}'`)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+}

src/rules/no-color-css-vars.js

@@ -0,0 +1,6 @@
+{
+  "--color-fg-default": "fg.default",
+  "--color-fg-muted": "fg.muted",
+  "--color-fg-subtle": "fg.subtle",
+  "--color-fg-onEmphasis": "fg.onEmphasis"
+}