feat: add prefer-composite-properties rule

Author: anubra266

.changeset/shy-geese-fold.md

@@ -0,0 +1,5 @@
+---
+"@pandacss/eslint-plugin": patch
+---
+
+Add `prefer-composite-properties` rule

plugin/src/rules/index.ts

@@ -10,6 +10,7 @@ import preferLonghandProperties, { RULE_NAME as PreferLonghandProperties } from
 import preferShorthandProperties, { RULE_NAME as PreferShorthandProperties } from './prefer-shorthand-properties'
 import noUnsafeTokenUsage, { RULE_NAME as NoUnsafeTokenUsage } from './no-unsafe-token-fn-usage'
 import preferAtomicProperties, { RULE_NAME as PreferAtomicProperties } from './prefer-atomic-properties'
+import preferCompositeProperties, { RULE_NAME as PreferCompositeProperties } from './prefer-composite-properties'
 
 export const rules = {
   [FileNotIncluded]: fileNotIncluded,
@@ -24,4 +25,5 @@ export const rules = {
   [PreferShorthandProperties]: preferShorthandProperties,
   [NoUnsafeTokenUsage]: noUnsafeTokenUsage,
   [PreferAtomicProperties]: preferAtomicProperties,
+  [PreferCompositeProperties]: preferCompositeProperties,
 } as any

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

@@ -40,7 +40,7 @@ const rule: Rule = createRule({
           return
 
         // Don't warn for objects. Those are conditions
-        if (isObjectExpression(node.value)) return
+        if (isObjectExpression(node.value.expression)) return
 
         if (!isPandaProp(node, context)) return
 

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

@@ -9,7 +9,7 @@ const rule: Rule = createRule({
   name: RULE_NAME,
   meta: {
     docs: {
-      description: 'Encourage the use of atomic properties instead of composite shorthand properties in the codebase.',
+      description: 'Encourage the use of atomic properties instead of composite properties in the codebase.',
     },
     messages: {
       atomic: 'Use atomic properties of `{{composite}}` instead. Prefer: \n{{atomics}}',

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

@@ -0,0 +1,65 @@
+import { isPandaAttribute, isPandaProp, isValidProperty, resolveLonghand } from '../utils/helpers'
+import { type Rule, createRule } from '../utils'
+import { compositeProperties } from '../utils/composite-properties'
+import { isIdentifier, isJSXIdentifier } from '../utils/nodes'
+
+export const RULE_NAME = 'prefer-composite-properties'
+
+const rule: Rule = createRule({
+  name: RULE_NAME,
+  meta: {
+    docs: {
+      description: 'Encourage the use of composite properties instead of atomic properties in the codebase.',
+    },
+    messages: {
+      composite: 'Use composite property of `{{atomic}}` instead. \nPrefer: {{composite}}',
+    },
+    type: 'suggestion',
+    schema: [],
+  },
+  defaultOptions: [],
+  create(context) {
+    const resolveCompositeProperty = (name: string) => {
+      const longhand = resolveLonghand(name, context) ?? name
+
+      if (!isValidProperty(longhand, context)) return
+      return Object.keys(compositeProperties).find((cpd) => compositeProperties[cpd].includes(longhand))
+    }
+
+    const sendReport = (node: any, name: string) => {
+      const cmp = resolveCompositeProperty(name)!
+
+      return context.report({
+        node,
+        messageId: 'composite',
+        data: {
+          composite: cmp,
+          atomic: name,
+        },
+      })
+    }
+
+    return {
+      JSXAttribute(node) {
+        if (!isJSXIdentifier(node.name)) return
+        if (!isPandaProp(node, context)) return
+
+        const atm = resolveCompositeProperty(node.name.name)
+        if (!atm) return
+
+        sendReport(node, node.name.name)
+      },
+
+      Property(node) {
+        if (!isIdentifier(node.key)) return
+        if (!isPandaAttribute(node, context)) return
+        const atm = resolveCompositeProperty(node.key.name)
+        if (!atm) return
+
+        sendReport(node.key, node.key.name)
+      },
+    }
+  },
+})
+
+export default rule

plugin/tests/_parsing.test.ts

@@ -74,6 +74,7 @@ const valids2 = [
   '<Circle debug={true} />',
   '<Circle color={"red"} />',
   '<Circle color={`red`} />',
+  '<Circle _hover={{ bg: "red.100" }} />',
 ]
 
 const invalids2 = ['const styles = css({ bg: color })', '<Circle debug={bool} />', '<styled.div color={color} />']

plugin/tests/prefer-composite-properties.test.ts

@@ -0,0 +1,70 @@
+import { tester } from '../test-utils'
+import rule, { RULE_NAME } from '../src/rules/prefer-composite-properties'
+
+const javascript = String.raw
+
+const valids = [
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ gap: '4' })`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+function App(){
+  return  <div className={css({ background: 'red.100' })} />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { Circle } from './panda/jsx';
+
+function App(){
+  return  <Circle _hover={{  borderTop: 'solid 1px blue' }} />;
+}`,
+  },
+]
+
+const invalids = [
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ rowGap: '4', columnGap: '4' })`,
+    errors: 2,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+function App(){
+  return  <div className={css({ bgColor: 'red.100' })} />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { Circle } from './panda/jsx';
+
+function App(){
+  return  <Circle _hover={{  borderTopStyle: 'solid', borderTopWidth: '1px', borderTopColor: 'blue' }} />;
+}`,
+    errors: 3,
+  },
+]
+
+tester.run(RULE_NAME, rule, {
+  valid: valids.map(({ code }) => ({
+    code,
+  })),
+  invalid: invalids.map(({ code, errors = 1 }) => ({
+    code,
+    errors,
+  })),
+})

sandbox/.eslintrc.cjs

@@ -13,5 +13,8 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+
+    //* Panda rules overrides
+    '@pandacss/prefer-shorthand-properties': 'off',
   },
 }

sandbox/src/App.tsx

@@ -57,7 +57,7 @@ function App() {
       })}
     >
       <panda.a href={`mailto:${1}`} />
-      <Circle size={circleSize} />
+      <Circle size={circleSize} _hover={{ bg: 'red.200' }} />
       <HStack gap="40px" debug>
         <div className={className}>Element 1</div>
         <panda.div color={color} fontWeight="bold" fontSize="50px" bg="red.200" borderTopColor={'#111'}>