fix: remove extraneous classes on nested styled composition (#2341)

* fix: remove extraneous classes on nested styled composition * chore: add changeset
chakra-ui · Mar 10, 2024 · 4576a60 · 4576a60
1 parent 39f529e
commit 4576a60
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 36 deletions.
diff --git a/.changeset/few-dragons-retire.md b/.changeset/few-dragons-retire.md
@@ -0,0 +1,28 @@
+---
+'@pandacss/generator': patch
+'@pandacss/studio': patch
+---
+
+Fix nested `styled` factory composition
+
+```tsx
+import { styled } from '../styled-system/jsx'
+
+const BasicBox = styled('div', { base: { fontSize: '10px' } })
+const ExtendedBox1 = styled(BasicBox, { base: { fontSize: '20px' } })
+const ExtendedBox2 = styled(ExtendedBox1, { base: { fontSize: '30px' } })
+
+export const App = () => {
+  return (
+    <>
+      {/* ✅ fs_10px */}
+      <BasicBox>text1</BasicBox>
+      {/* ✅ fs_20px */}
+      <ExtendedBox1>text2</ExtendedBox1>
+      {/* BEFORE: ❌ fs_10px fs_30px */}
+      {/* NOW: ✅ fs_30px */}
+      <ExtendedBox2>text3</ExtendedBox2>
+    </>
+  )
+}
+```
diff --git a/packages/generator/src/artifacts/preact-jsx/jsx.string-literal.ts b/packages/generator/src/artifacts/preact-jsx/jsx.string-literal.ts
@@ -12,12 +12,13 @@ export function generatePreactJsxStringLiteralFactory(ctx: Context) {
     ${ctx.file.import('css, cx', '../css/index')}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
         const styles = css.raw(template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-         
+          const { as: Element = __base__, ...elementProps } = props
+
           function classes() {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           }
@@ -29,11 +30,11 @@ export function generatePreactJsxStringLiteralFactory(ctx: Context) {
           })
         })
 
-        const name = getDisplayName(Dynamic)
-        
+        const name = getDisplayName(__base__)
+
         ${componentName}.displayName = \`${factoryName}.\${name}\`
         ${componentName}.__styles__ = styles
-        ${componentName}.__base__ = Dynamic
+        ${componentName}.__base__ = __base__
 
         return ${componentName}
       }

diff --git a/packages/generator/src/artifacts/preact-jsx/jsx.ts b/packages/generator/src/artifacts/preact-jsx/jsx.ts
@@ -30,9 +30,10 @@ export function generatePreactJsxFactory(ctx: Context) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+        const { as: Element = __base__, children, ...restProps } = props
 
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
@@ -64,11 +65,11 @@ export function generatePreactJsxFactory(ctx: Context) {
         }, combinedProps.children ?? children)
       })
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}

diff --git a/packages/generator/src/artifacts/qwik-jsx/jsx.string-literal.ts b/packages/generator/src/artifacts/qwik-jsx/jsx.string-literal.ts
@@ -11,14 +11,15 @@ export function generateQwikJsxStringLiteralFactory(ctx: Context) {
     ${ctx.file.import('css, cx', '../css/index')}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
           const styles = css.raw(template)
-          
+
           const ${componentName} = (props) => {
-            const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-            
+            const { as: Element = __base__, ...elementProps } = props
+
             function classes() {
-              return cx(css(Dynamic.__styles__, styles), elementProps.className)
+              return cx(css(__base__.__styles__, styles), elementProps.className)
             }
 
             return h(Element, {
@@ -27,12 +28,12 @@ export function generateQwikJsxStringLiteralFactory(ctx: Context) {
             })
           }
 
-          const name = getDisplayName(Dynamic)
-        
+          const name = getDisplayName(__base__)
+
           ${componentName}.displayName = \`${factoryName}.\${name}\`
           ${componentName}.__styles__ = styles
-          ${componentName}.__base__ = Dynamic
-  
+          ${componentName}.__base__ = __base__
+
           return ${componentName}
         }
     }

diff --git a/packages/generator/src/artifacts/qwik-jsx/jsx.ts b/packages/generator/src/artifacts/qwik-jsx/jsx.ts
@@ -28,9 +28,10 @@ export function generateQwikJsxFactory(ctx: Context) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = function ${componentName}(props) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, className, ...restProps } = props
+        const { as: Element = __base__, children, className, ...restProps } = props
 
         const combinedProps = Object.assign({}, defaultProps, restProps)
 
@@ -61,11 +62,11 @@ export function generateQwikJsxFactory(ctx: Context) {
         }, combinedProps.children ?? children)
       }
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}

diff --git a/packages/generator/src/artifacts/react-jsx/jsx.string-literal.ts b/packages/generator/src/artifacts/react-jsx/jsx.string-literal.ts
@@ -11,14 +11,15 @@ export function generateReactJsxStringLiteralFactory(ctx: Context) {
     ${ctx.file.import('css, cx', '../css/index')}
 
     function createStyledFn(Dynamic) {
+      const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
         const styles = css.raw(template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = Dynamic.__base__ || Dynamic, ...elementProps } = props
-          
+          const { as: Element = __base__, ...elementProps } = props
+
           function classes() {
-            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            return cx(css(__base__.__styles__, styles), elementProps.className)
           }
 
           return createElement(Element, {
@@ -28,12 +29,12 @@ export function generateReactJsxStringLiteralFactory(ctx: Context) {
           })
         })
 
-        const name = getDisplayName(Dynamic)
-        
+        const name = getDisplayName(__base__)
+
         ${componentName}.displayName = \`${factoryName}.\${name}\`
         ${componentName}.__styles__ = styles
-        ${componentName}.__base__ = Dynamic
-        
+        ${componentName}.__base__ = __base__
+
         return ${componentName}
       }
     }

diff --git a/packages/generator/src/artifacts/react-jsx/jsx.ts b/packages/generator/src/artifacts/react-jsx/jsx.ts
@@ -28,9 +28,10 @@ export function generateReactJsxFactory(ctx: Context) {
 
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+        const { as: Element = __base__, children, ...restProps } = props
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
@@ -61,11 +62,11 @@ export function generateReactJsxFactory(ctx: Context) {
         }, combinedProps.children ?? children)
       })
 
-      const name = getDisplayName(Dynamic)
+      const name = getDisplayName(__base__)
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}

diff --git a/packages/studio/styled-system/jsx/factory.mjs b/packages/studio/styled-system/jsx/factory.mjs
@@ -17,9 +17,10 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
 
   const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
   const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+  const __base__ = Dynamic.__base__ || Dynamic
 
   const PandaComponent = /* @__PURE__ */ forwardRef(function PandaComponent(props, ref) {
-    const { as: Element = Dynamic.__base__ || Dynamic, children, ...restProps } = props
+    const { as: Element = __base__, children, ...restProps } = props
 
     const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
@@ -50,11 +51,11 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
     }, combinedProps.children ?? children)
   })
 
-  const name = getDisplayName(Dynamic)
+  const name = getDisplayName(__base__)
 
   PandaComponent.displayName = `panda.${name}`
   PandaComponent.__cva__ = __cvaFn__
-  PandaComponent.__base__ = Dynamic
+  PandaComponent.__base__ = __base__
   PandaComponent.__shouldForwardProps__ = shouldForwardProp
 
   return PandaComponent

diff --git a/sandbox/codegen/__tests__/frameworks/preact.styled-factory.test.tsx b/sandbox/codegen/__tests__/frameworks/preact.styled-factory.test.tsx
@@ -187,7 +187,7 @@ describe('styled factory - cva', () => {
     const { firstChild } = container as HTMLElement
     expect(firstChild).toMatchInlineSnapshot(`
       <button
-        class="font_semibold h_10 font_semibold h_20 color-palette_red border-w_4px border_currentColor px_12 fs_32px"
+        class="font_semibold h_20 color-palette_red border-w_4px border_currentColor px_12 fs_32px"
       >
         Click me
       </button>
@@ -201,7 +201,7 @@ describe('styled factory - cva', () => {
       ).container.firstChild,
     ).toMatchInlineSnapshot(`
       <button
-        class="font_semibold h_10 font_semibold h_20 color-palette_blue border-w_4px text_white px_20 fs_40px"
+        class="font_semibold h_20 color-palette_blue border-w_4px text_white px_20 fs_40px"
       >
         Click me
       </button>

diff --git a/sandbox/codegen/__tests__/frameworks/qwik.styled-factory.test.tsx b/sandbox/codegen/__tests__/frameworks/qwik.styled-factory.test.tsx
@@ -199,7 +199,7 @@ describe('styled factory - cva', async () => {
       </WithOverrides>,
     )
     const container = screen.querySelector('button')!
-    expect(container.outerHTML).toMatchInlineSnapshot(`"<button class="font_semibold h_10 font_semibold h_20 color-palette_red border-w_4px border_currentColor px_12 fs_32px">Click me</button>"`)
+    expect(container.outerHTML).toMatchInlineSnapshot(`"<button class="font_semibold h_20 color-palette_red border-w_4px border_currentColor px_12 fs_32px">Click me</button>"`)
 
     const second = await createDOM()
     await second.render(
@@ -208,7 +208,7 @@ describe('styled factory - cva', async () => {
       </WithOverrides>,
     )
     const container2 = second.screen.querySelector('button')!
-    expect(container2.outerHTML).toMatchInlineSnapshot(`"<button class="font_semibold h_10 font_semibold h_20 color-palette_blue border-w_4px text_white px_20 fs_40px">Click me</button>"`)
+    expect(container2.outerHTML).toMatchInlineSnapshot(`"<button class="font_semibold h_20 color-palette_blue border-w_4px text_white px_20 fs_40px">Click me</button>"`)
   })
 
   test('html props', async () => {