Add noOpacity option to no-hardcoded-color rule

Author: anubra266

.changeset/quiet-pumas-tap.md

@@ -0,0 +1,5 @@
+---
+"@pandacss/eslint-plugin": patch
+---
+
+Add `noOpacity` option to `no-hardcoded-color` rule

README.md

@@ -75,7 +75,8 @@ Or enable all rules in extends:
 
 ## Rules
 
-Where rules are included in the configs `recommended`, or `all` it is indicated below.
+Rules with ⚙️ have options. Click on the rule to see the options. Where rules are included in the configs `recommended`,
+or `all` it is indicated below.
 
 | Rule                                                                                     | `recommended` |
 | ---------------------------------------------------------------------------------------- | ------------- |
@@ -84,7 +85,7 @@ Where rules are included in the configs `recommended`, or `all` it is indicated
 | [`@pandacss/no-debug`](docs/rules/no-debug.md)                                           | ✔️            |
 | [`@pandacss/no-dynamic-styling`](docs/rules/no-dynamic-styling.md)                       | ✔️            |
 | [`@pandacss/no-escape-hatch`](docs/rules/no-escape-hatch.md)                             |               |
-| [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md)                       |               |
+| [`@pandacss/no-hardcoded-color`](docs/rules/no-hardcoded-color.md) ⚙️                    |               |
 | [`@pandacss/no-important`](docs/rules/no-important.md)                                   |               |
 | [`@pandacss/no-invalid-token-paths`](docs/rules/no-invalid-token-paths.md)               | ✔️            |
 | [`@pandacss/no-invalid-nesting`](docs/rules/no-invalid-nesting.md)                       | ✔️            |

README.md.template

@@ -74,6 +74,7 @@ Or enable all rules in extends:
 
 ## Rules
 
+Rules with ⚙️ have options. Click on the rule to see the options.
 Where rules are included in the configs `recommended`, or `all` it is indicated below.
 
 <!-- rules -->

docs/rules/no-hardcoded-color.md

@@ -60,6 +60,13 @@ function App(){
 }
 ```
 
+❌ Examples of **incorrect** code with `[{"noOpacity":true}]` options:
+```js
+import { css } from './panda/css';
+
+const styles = css({ color: 'red.100/30' });
+```
+
 ## Resources
 
 * [Rule source](/plugin/src/rules/no-hardcoded-color.ts)

docs/templates/optionsAndSettings.ejs

@@ -1,4 +1,6 @@
 <% if ( data.options || data.settings ) { _%>
+ with<% if ( data.options ) { %> `<%- data.options %>` options<% } _%>
+<% if ( data.settings ) { %><% if ( data.options ) { %> and<% } %> `<%- data.settings %>` settings<% } _%>
 <% } _%>
 <% if ( data.filename ) { _%>
  for a file named `<%- data.filename %>`<% } %>

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

@@ -14,10 +14,25 @@ const rule: Rule = createRule({
       invalidColor: '`{{color}}` is not a valid color token.',
     },
     type: 'suggestion',
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          noOpacity: {
+            type: 'boolean',
+          },
+        },
+      },
+    ],
   },
-  defaultOptions: [],
+  defaultOptions: [
+    {
+      noOpacity: false,
+    },
+  ],
   create(context) {
+    const noOpacity = context.options[0]?.noOpacity
+
     const isTokenFn = (value?: string) => {
       if (!value) return false
       const tokens = extractTokens(value)
@@ -27,7 +42,9 @@ const rule: Rule = createRule({
     const testColorToken = (value?: string) => {
       if (!value) return false
       const color = value?.split('/')
-      return isColorToken(color[0], context)
+      const isOpacityToken = !!color[1]?.length
+      const isValidToken = isColorToken(color[0], context)
+      return noOpacity ? isValidToken && !isOpacityToken : isValidToken
     }
 
     return {

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

@@ -10,6 +10,7 @@ import { css } from './panda/css';
 
 const styles = css({ color: 'red.100' })`,
   },
+
   {
     code: javascript`
 import { css } from './panda/css';
@@ -44,6 +45,14 @@ import { css } from './panda/css';
 const styles = css({ color: '#FEE2E2' })`,
   },
 
+  {
+    options: [{ noOpacity: true }],
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ color: 'red.100/30' })`,
+  },
+
   {
     code: javascript`
 import { css } from './panda/css';
@@ -67,8 +76,13 @@ tester.run(RULE_NAME, rule, {
   valid: valids.map(({ code }) => ({
     code,
   })),
-  invalid: invalids.map(({ code }) => ({
-    code,
-    errors: 1,
-  })),
+  invalid: invalids.map(({ code, options }) =>
+    options
+      ? {
+          code,
+          options,
+          errors: 1,
+        }
+      : { code, errors: 1 },
+  ),
 })

sandbox/.eslintrc.cjs

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