no-dynamic-styling rule should report the dynamic properties (#137)

Co-authored-by: anubra266 <[email protected]>

Author: nusuke

.changeset/fuzzy-points-invent.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/eslint-plugin': patch
+---
+
+Let `no-dynamic-styling` rule, report dynamic properties.

docs/rules/no-dynamic-styling.md

@@ -41,6 +41,28 @@ import { styled } from './panda/jsx';
 function App(){
   const color = 'red.100';
   return <styled.div color={color} />;
+};
+```
+```js
+
+import { css } from './panda/css';
+
+const property = 'background';
+const styles = css({ [property]: 'red.100' });
+```
+```js
+
+import { cva,sva } from './panda/css';
+
+function App(){
+  const computedValue = "value"
+  const heading = cva({
+    variants: {
+      [computedValue]: {
+        color: "red.100",
+      }
+    }
+  });
 }
 ```
 

plugin/src/rules/no-dynamic-styling.ts

@@ -1,5 +1,6 @@
+import type { TSESTree } from '@typescript-eslint/utils'
 import { type Rule, createRule } from '../utils'
-import { isPandaAttribute, isPandaProp } from '../utils/helpers'
+import { isInPandaFunction, isPandaAttribute, isPandaProp, isRecipeVariant } from '../utils/helpers'
 import {
   isIdentifier,
   isJSXExpressionContainer,
@@ -19,6 +20,8 @@ const rule: Rule = createRule({
     },
     messages: {
       dynamic: 'Remove dynamic value. Prefer static styles',
+      dynamicProperty: 'Remove dynamic property. Prefer static style property',
+      dynamicRecipeVariant: 'Remove dynamic variant. Prefer static variant definition',
     },
     type: 'suggestion',
     schema: [],
@@ -50,6 +53,15 @@ const rule: Rule = createRule({
         })
       },
 
+      'Property[computed=true]'(node: TSESTree.Property) {
+        if (!isInPandaFunction(node, context)) return
+
+        context.report({
+          node: node.key,
+          messageId: isRecipeVariant(node, context) ? 'dynamicRecipeVariant' : 'dynamicProperty',
+        })
+      },
+
       Property(node) {
         if (!isIdentifier(node.key)) return
         if (isLiteral(node.value)) return

plugin/tests/no-dynamic-styling.test.ts

@@ -64,6 +64,30 @@ import { styled } from './panda/jsx';
 function App(){
   const color = 'red.100';
   return <styled.div color={color} />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const property = 'background';
+const styles = css({ [property]: 'red.100' })`,
+  },
+
+  {
+    code: javascript`
+import { cva,sva } from './panda/css';
+
+function App(){
+  const computedValue = "value"
+  const heading = cva({
+    variants: {
+      [computedValue]: {
+        color: "red.100",
+      }
+    }
+  });
 }`,
   },
 ]