Allow CSS variables in no-hardcoded-color rule (#278)

Author: anubra266

.changeset/allow-css-variables.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-panda": patch
+---
+
+Allow CSS variables in no-hardcoded-color rule. CSS variables like `var(--something-here)` are now recognized as valid color values and will not trigger the no-hardcoded-color rule error.

.gitignore

@@ -1,5 +1,6 @@
 **/node_modules/**
 node_modules
+package-lock.json
 
 dist
 styled-system

plugin/src/rules/no-hardcoded-color.ts

@@ -82,6 +82,11 @@ const rule: Rule = createRule({
       return tokens.length > 0
     }
 
+    const isCssVariable = (value: string): boolean => {
+      if (!value) return false
+      return value.trim().startsWith('var(')
+    }
+
     const isValidColorToken = (value: string): boolean => {
       if (!value) return false
       const [colorToken, opacity] = value.split('/')
@@ -104,6 +109,7 @@ const rule: Rule = createRule({
     const checkColorValue = (node: TSESTree.Node, value: string, attributeName: string) => {
       if (!isColorAttribute(attributeName)) return
       if (isTokenFunctionUsed(value)) return
+      if (isCssVariable(value)) return
       if (isValidColorToken(value)) return
 
       reportInvalidColor(node, value)

plugin/tests/no-hardcoded-color.test.ts

@@ -33,6 +33,38 @@ import { Circle } from './panda/jsx';
 
 function App(){
   return <Circle _hover={{  borderColor: 'gray.100' }} />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ color: 'var(--my-color)' })`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ backgroundColor: 'var(--bg-color)' })`,
+  },
+
+  {
+    code: javascript`
+import { Circle } from './panda/jsx';
+
+function App(){
+  return <Circle borderColor='var(--border-color)' />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+function App(){
+  return <div className={css({ color: 'var(--text-primary)' })} />;
 }`,
   },
 ]