Closes #31

Allow opacity color tokens

Author: anubra266

.changeset/four-elephants-grab.md

@@ -0,0 +1,5 @@
+---
+"@pandacss/eslint-plugin": patch
+---
+
+Allow color opacity in `no-hardcoded-color` rule

docs/rules/no-hardcoded-color.md

@@ -41,6 +41,12 @@ const styles = css({ color: 'red.100' });
 
 import { css } from './panda/css';
 
+const styles = css({ color: 'red.100/30' });
+```
+```js
+
+import { css } from './panda/css';
+
 function App(){
   return <div className={css({ background: 'green.300' })} />;
 };

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

@@ -24,6 +24,12 @@ const rule: Rule = createRule({
       return tokens.length > 0
     }
 
+    const testColorToken = (value?: string) => {
+      if (!value) return false
+      const color = value?.split('/')
+      return isColorToken(color[0], context)
+    }
+
     return {
       JSXAttribute(node) {
         if (!isJSXIdentifier(node.name)) return
@@ -33,7 +39,7 @@ const rule: Rule = createRule({
           isLiteral(node.value) &&
           isColorAttribute(node.name.name, context) &&
           !isTokenFn(node.value.value?.toString()) &&
-          !isColorToken(node.value.value?.toString(), context)
+          !testColorToken(node.value.value?.toString())
         ) {
           context.report({
             node: node.value,
@@ -50,7 +56,7 @@ const rule: Rule = createRule({
           isLiteral(node.value.expression) &&
           isColorAttribute(node.name.name, context) &&
           !isTokenFn(node.value.expression.value?.toString()) &&
-          !isColorToken(node.value.expression.value?.toString(), context)
+          !testColorToken(node.value.expression.value?.toString())
         ) {
           context.report({
             node: node.value.expression,
@@ -69,7 +75,7 @@ const rule: Rule = createRule({
         if (!isPandaAttribute(node, context)) return
         if (!isColorAttribute(node.key.name, context)) return
         if (isTokenFn(node.value.value?.toString())) return
-        if (isColorToken(node.value.value?.toString(), context)) return
+        if (testColorToken(node.value.value?.toString())) return
 
         context.report({
           node: node.value,

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

@@ -3,15 +3,19 @@ import rule, { RULE_NAME } from '../src/rules/no-hardcoded-color'
 
 const javascript = String.raw
 
-// TODO Watch out for color opacity in the future
-
 const valids = [
   {
     code: javascript`
 import { css } from './panda/css';
 
 const styles = css({ color: 'red.100' })`,
   },
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ color: 'red.100/30' })`,
+  },
 
   {
     code: javascript`

sandbox/.eslintrc.cjs

@@ -17,5 +17,6 @@ module.exports = {
     //* Panda rules overrides
     '@pandacss/no-debug': 'off',
     '@pandacss/no-margin-properties': 'warn',
+    '@pandacss/no-hardcoded-color': 'error',
   },
 }

sandbox/src/App.tsx

@@ -53,6 +53,7 @@ function App() {
         textAlign: ta,
         justify: justify,
         _hover: {
+          color: 'green.300/40',
           backgroundColor: 'green.300',
         },
       })}