chore: add whitelist to rules

Author: anubra266

.changeset/eight-pigs-bathe.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/eslint-plugin': patch
+---
+
+Add whitelist option to rules

README.md

@@ -123,14 +123,14 @@ Where rules are included in the configs `recommended`, or `all` it is indicated
 | [`@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)                       | ✔️            |
-| [`@pandacss/no-margin-properties`](docs/rules/no-margin-properties.md)                   |               |
-| [`@pandacss/no-physical-properties`](docs/rules/no-physical-properties.md)               |               |
+| [`@pandacss/no-margin-properties`](docs/rules/no-margin-properties.md) ⚙️                |               |
+| [`@pandacss/no-physical-properties`](docs/rules/no-physical-properties.md) ⚙️            |               |
 | [`@pandacss/no-property-renaming`](docs/rules/no-property-renaming.md)                   | ✔️            |
 | [`@pandacss/no-unsafe-token-fn-usage`](docs/rules/no-unsafe-token-fn-usage.md)           | ✔️            |
-| [`@pandacss/prefer-longhand-properties`](docs/rules/prefer-longhand-properties.md)       |               |
-| [`@pandacss/prefer-shorthand-properties`](docs/rules/prefer-shorthand-properties.md)     |               |
-| [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md)           |               |
-| [`@pandacss/prefer-composite-properties`](docs/rules/prefer-composite-properties.md)     |               |
+| [`@pandacss/prefer-longhand-properties`](docs/rules/prefer-longhand-properties.md) ⚙️    |               |
+| [`@pandacss/prefer-shorthand-properties`](docs/rules/prefer-shorthand-properties.md) ⚙️  |               |
+| [`@pandacss/prefer-atomic-properties`](docs/rules/prefer-atomic-properties.md) ⚙️        |               |
+| [`@pandacss/prefer-composite-properties`](docs/rules/prefer-composite-properties.md) ⚙️  |               |
 | [`@pandacss/prefer-unified-property-style`](docs/rules/prefer-unified-property-style.md) |               |
 
 ## Settings

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

@@ -29,6 +29,14 @@ const rule: Rule = createRule({
           noOpacity: {
             type: 'boolean',
           },
+          whitelist: {
+            type: 'array',
+            items: {
+              type: 'string',
+              minLength: 0,
+            },
+            uniqueItems: true,
+          },
         },
         additionalProperties: false,
       },
@@ -37,13 +45,15 @@ const rule: Rule = createRule({
   defaultOptions: [
     {
       noOpacity: false,
+      whitelist: [],
     },
   ],
   create(context) {
     const noOpacity = context.options[0]?.noOpacity
+    const whitelist: string[] = context.options[0]?.whitelist ?? []
 
     // Caches for isColorToken and isColorAttribute results
-    const colorTokenCache = new Map<string, boolean | undefined>()
+    const colorTokenCache = new Map<string, boolean | undefined>(whitelist?.map((item) => [item, true]))
     const colorAttributeCache = new Map<string, boolean>()
 
     // Cached version of isColorToken

plugin/src/rules/no-margin-properties.ts

@@ -17,10 +17,31 @@ const rule: Rule = createRule({
         'Use flex or grid with the `gap` property to define spacing in parent elements for a more resilient layout.',
     },
     type: 'suggestion',
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          whitelist: {
+            type: 'array',
+            items: {
+              type: 'string',
+              minLength: 0,
+            },
+            uniqueItems: true,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
   },
-  defaultOptions: [],
+  defaultOptions: [
+    {
+      whitelist: [],
+    },
+  ],
   create(context) {
+    const whitelist: string[] = context.options[0]?.whitelist ?? []
+
     // Cache for resolved longhand properties
     const longhandCache = new Map<string, string>()
 
@@ -41,6 +62,7 @@ const rule: Rule = createRule({
     }
 
     const sendReport = (node: TSESTree.Identifier | TSESTree.JSXIdentifier) => {
+      if (whitelist.includes(node.name)) return
       if (!isMarginProperty(node.name)) return
 
       context.report({

plugin/src/rules/no-physical-properties.ts

@@ -19,10 +19,31 @@ const rule: Rule = createRule({
     },
     type: 'suggestion',
     hasSuggestions: true,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          whitelist: {
+            type: 'array',
+            items: {
+              type: 'string',
+              minLength: 0,
+            },
+            uniqueItems: true,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
   },
-  defaultOptions: [],
+  defaultOptions: [
+    {
+      whitelist: [],
+    },
+  ],
   create(context) {
+    const whitelist: string[] = context.options[0]?.whitelist ?? []
+
     // Cache for resolved longhand properties
     const longhandCache = new Map<string, string>()
 
@@ -68,6 +89,7 @@ const rule: Rule = createRule({
     }
 
     const sendReport = (node: TSESTree.Identifier | TSESTree.JSXIdentifier) => {
+      if (whitelist.includes(node.name)) return
       const longhandName = getLonghand(node.name)
       if (!(longhandName in physicalProperties)) return
 

plugin/src/rules/prefer-atomic-properties.ts

@@ -16,10 +16,31 @@ const rule: Rule = createRule({
       atomic: 'Use atomic properties instead of `{{composite}}`. Prefer: \n{{atomics}}',
     },
     type: 'suggestion',
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          whitelist: {
+            type: 'array',
+            items: {
+              type: 'string',
+              minLength: 0,
+            },
+            uniqueItems: true,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
   },
-  defaultOptions: [],
+  defaultOptions: [
+    {
+      whitelist: [],
+    },
+  ],
   create(context) {
+    const whitelist: string[] = context.options[0]?.whitelist ?? []
+
     // Cache for resolved longhand properties
     const longhandCache = new Map<string, string>()
 
@@ -87,6 +108,7 @@ const rule: Rule = createRule({
     }
 
     const sendReport = (node: TSESTree.Identifier | TSESTree.JSXIdentifier, composite: string) => {
+      if (whitelist.includes(node.name)) return
       const atomics = compositeProperties[composite].map((name) => `\`${name}\``).join(',\n')
 
       context.report({

plugin/src/rules/prefer-composite-properties.ts

@@ -16,10 +16,31 @@ const rule: Rule = createRule({
       composite: 'Use composite property instead of `{{atomic}}`. Prefer: `{{composite}}`.',
     },
     type: 'suggestion',
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          whitelist: {
+            type: 'array',
+            items: {
+              type: 'string',
+              minLength: 0,
+            },
+            uniqueItems: true,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
   },
-  defaultOptions: [],
+  defaultOptions: [
+    {
+      whitelist: [],
+    },
+  ],
   create(context) {
+    const whitelist: string[] = context.options[0]?.whitelist ?? []
+
     // Cache for resolved longhand properties
     const longhandCache = new Map<string, string>()
 
@@ -85,6 +106,7 @@ const rule: Rule = createRule({
     }
 
     const sendReport = (node: TSESTree.Identifier | TSESTree.JSXIdentifier, composite: string) => {
+      if (whitelist.includes(node.name)) return
       context.report({
         node,
         messageId: 'composite',

plugin/src/rules/prefer-longhand-properties.ts

@@ -18,10 +18,31 @@ const rule: Rule = createRule({
     },
     type: 'suggestion',
     hasSuggestions: true,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          whitelist: {
+            type: 'array',
+            items: {
+              type: 'string',
+              minLength: 0,
+            },
+            uniqueItems: true,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
   },
-  defaultOptions: [],
+  defaultOptions: [
+    {
+      whitelist: [],
+    },
+  ],
   create(context) {
+    const whitelist: string[] = context.options[0]?.whitelist ?? []
+
     // Cache for resolved longhand properties
     const longhandCache = new Map<string, string | undefined>()
 
@@ -66,6 +87,7 @@ const rule: Rule = createRule({
     }
 
     const sendReport = (node: TSESTree.Identifier | TSESTree.JSXIdentifier) => {
+      if (whitelist.includes(node.name)) return
       const longhand = getLonghand(node.name)
       if (!longhand || longhand === node.name) return
 

plugin/src/rules/prefer-shorthand-properties.ts

@@ -18,10 +18,31 @@ const rule: Rule = createRule({
     },
     type: 'suggestion',
     hasSuggestions: true,
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          whitelist: {
+            type: 'array',
+            items: {
+              type: 'string',
+              minLength: 0,
+            },
+            uniqueItems: true,
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
   },
-  defaultOptions: [],
+  defaultOptions: [
+    {
+      whitelist: [],
+    },
+  ],
   create(context) {
+    const whitelist: string[] = context.options[0]?.whitelist ?? []
+
     // Cache for resolved longhand properties
     const longhandCache = new Map<string, string | undefined>()
 
@@ -78,6 +99,7 @@ const rule: Rule = createRule({
     }
 
     const sendReport = (node: TSESTree.Identifier | TSESTree.JSXIdentifier) => {
+      if (whitelist.includes(node.name)) return
       const longhand = getLonghand(node.name)
       if (longhand) return // If it's already shorthand, no need to report
 

sandbox/v9/eslint.config.mjs

@@ -36,7 +36,7 @@ export default tseslint.config({
     ...panda.configs.recommended.rules,
     '@pandacss/no-margin-properties': 'warn',
     '@pandacss/no-physical-properties': 'error',
-    '@pandacss/no-hardcoded-color': ['error', { noOpacity: true }],
+    '@pandacss/no-hardcoded-color': ['error', { noOpacity: true, whitelist: ['inherit'] }],
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },
 })

sandbox/v9/src/App.tsx

@@ -35,6 +35,7 @@ function App() {
     margin: '4',
     pt: token('sizes.4'),
     paddingBlockEnd: ['4', pbe],
+    borderColor: 'inherit',
   })
 
   const color = 'red'