chore: fix array syntax in no-dynamic-styling (#143)

Author: anubra266

.changeset/tender-chefs-help.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/eslint-plugin': patch
+---
+
+Fix array syntax in `no-dynamic-styling`

docs/rules/no-dynamic-styling.md

@@ -20,6 +20,13 @@ const styles = css({ bg: color });
 ```
 ```js
 
+import { css } from './panda/css';
+
+const size = '8';
+const styles = css({ padding: ['4', size] });
+```
+```js
+
 import { stack } from './panda/patterns';
 
 const align = 'center';
@@ -74,6 +81,12 @@ const styles = css({ bg: 'gray.900' });
 ```
 ```js
 
+import { css } from './panda/css';
+
+const styles = css({ padding: ['4', '8'] });
+```
+```js
+
 import { Circle } from './panda/jsx';
 
 function App(){

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

@@ -2,6 +2,7 @@ import type { TSESTree } from '@typescript-eslint/utils'
 import { type Rule, createRule } from '../utils'
 import { isInPandaFunction, isPandaAttribute, isPandaProp, isRecipeVariant } from '../utils/helpers'
 import {
+  isArrayExpression,
   isIdentifier,
   isJSXExpressionContainer,
   isLiteral,
@@ -44,6 +45,9 @@ const rule: Rule = createRule({
 
         // Don't warn for objects. Those are conditions
         if (isObjectExpression(node.value.expression)) return
+        if (isArrayExpression(node.value.expression)) {
+          return checkElements(node.value.expression, context)
+        }
 
         if (!isPandaProp(node, context)) return
 
@@ -53,6 +57,7 @@ const rule: Rule = createRule({
         })
       },
 
+      // Dynamic properties
       'Property[computed=true]'(node: TSESTree.Property) {
         if (!isInPandaFunction(node, context)) return
 
@@ -71,6 +76,9 @@ const rule: Rule = createRule({
 
         // Don't warn for objects. Those are conditions
         if (isObjectExpression(node.value)) return
+        if (isArrayExpression(node.value)) {
+          return checkElements(node.value, context)
+        }
 
         if (!isPandaAttribute(node, context)) return
 
@@ -83,4 +91,17 @@ const rule: Rule = createRule({
   },
 })
 
+function checkElements(array: TSESTree.ArrayExpression, context: Parameters<(typeof rule)['create']>[0]) {
+  array.elements.forEach((node) => {
+    if (!node) return
+    if (isLiteral(node)) return
+    if (isTemplateLiteral(node) && node.expressions.length === 0) return
+
+    context.report({
+      node: node,
+      messageId: 'dynamic',
+    })
+  })
+}
+
 export default rule

plugin/src/utils/nodes.ts

@@ -11,6 +11,8 @@ export const isLiteral = isNodeOfType(AST_NODE_TYPES.Literal)
 
 export const isTemplateLiteral = isNodeOfType(AST_NODE_TYPES.TemplateLiteral)
 
+export const isArrayExpression = isNodeOfType(AST_NODE_TYPES.ArrayExpression)
+
 export const isObjectExpression = isNodeOfType(AST_NODE_TYPES.ObjectExpression)
 
 export const isMemberExpression = isNodeOfType(AST_NODE_TYPES.MemberExpression)

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

@@ -11,6 +11,13 @@ import { css } from './panda/css';
 const styles = css({ bg: 'gray.900' })`,
   },
 
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ padding: ['4', '8'] })`,
+  },
+
   {
     code: javascript`
 import { Circle } from './panda/jsx';
@@ -39,6 +46,14 @@ const color = 'red.100';
 const styles = css({ bg: color })`,
   },
 
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const size = '8';
+const styles = css({ padding: ['4', size] })`,
+  },
+
   {
     code: javascript`
 import { stack } from './panda/patterns';

sandbox/v9/src/App.tsx

@@ -24,6 +24,7 @@ console.log(keyframes, literal)
 
 const LocalFactoryComp = panda('button')
 
+const pbe = '4'
 function App() {
   const className = css({
     bg: 'red.100',
@@ -33,6 +34,7 @@ function App() {
     marginTop: '{spacings.4} token(spacing.600)',
     margin: '4',
     pt: token('sizes.4'),
+    paddingBlockEnd: ['4', pbe],
   })
 
   const color = 'red'
@@ -69,6 +71,7 @@ function App() {
           bg="red.200"
           borderColor="red.500"
           borderTopColor={'#111'}
+          paddingBlockEnd={['4', color]}
         >
           Element 2
         </panda.div>