Ignore no-unsafe-token-fn-usage rule in css variables

Closes #68

Author: anubra266

.changeset/slimy-cougars-press.md

@@ -0,0 +1,5 @@
+---
+"@pandacss/eslint-plugin": patch
+---
+
+Ignore `no-unsafe-token-fn-usage` rule in css variables

plugin/src/rules/no-unsafe-token-fn-usage.ts

@@ -107,6 +107,8 @@ const rule: Rule = createRule({
       },
 
       Property(node) {
+        // Ignore css variables
+        if (isLiteral(node.key) && node.key.value?.toString().startsWith('--')) return
         if (!isCallExpression(node.value) && !isLiteral(node.value) && !isTemplateLiteral(node.value)) return
         if (!isPandaAttribute(node, context)) return
 

plugin/src/utils/helpers.ts

@@ -98,6 +98,7 @@ const isValidStyledProp = <T extends Node | string>(node: T, context: RuleContex
 
 export const isPandaIsh = (name: string, context: RuleContext<any, any>) => {
   const imports = getImports(context)
+  if (imports.length === 0) return false
   return syncAction('matchFile', getSyncOpts(context), name, imports)
 }
 

plugin/tests/no-unsafe-token-fn-usage.test.ts

@@ -29,6 +29,12 @@ function App(){
   return <Circle _hover={{  border: 'solid 1px {colors.blue.400}' }} />;
 }`,
   },
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ '--my-var': '{spacing.8}' })`,
+  },
 ]
 
 const invalids = [