fix: explicitly setting consumeCss to false should not consume css

NDLANO · Jan 6, 2025 · 629a7e1 · 629a7e1
1 parent 0554aa0
commit 629a7e1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/packages/preset-panda/src/plugins/__tests__/forwardCssProp-test.tsx b/packages/preset-panda/src/plugins/__tests__/forwardCssProp-test.tsx
@@ -266,6 +266,38 @@ describe("CSS prop forwarding", () => {
     `);
   });
 
+  test("explicitly setting consumeCss to false should not consume the css prop", () => {
+    const StyledComponent = styled("div", { base: { display: "flex" } });
+
+    const { container } = render(<StyledComponent consumeCss={false}>Hello</StyledComponent>);
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="d_flex"
+      >
+        Hello
+      </div>
+    `);
+  });
+
+  test("explicitly setting consumeCss and asChild to false should not consume the css prop", () => {
+    const StyledComponent = styled(ark.div, { base: { display: "flex" } }, { baseComponent: true });
+
+    const { container } = render(
+      <StyledComponent asChild={false} consumeCss={false}>
+        Hello
+      </StyledComponent>,
+    );
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="d_flex"
+      >
+        Hello
+      </div>
+    `);
+  });
+
   test("css prop usage should win when asChilded onto a styled component", () => {
     const StyledOuter = styled(
       ark.div,

diff --git a/packages/preset-panda/src/plugins/forwardCssPropPlugin.ts b/packages/preset-panda/src/plugins/forwardCssPropPlugin.ts
@@ -46,7 +46,7 @@ export const transformStyledFn = (args: CodegenPrepareHookArgs) => {
   factoryJs.code = factoryJs.code.replace(
     baseCode,
     `${baseCode}
-  const contextConsume = options.baseComponent ?? Dynamic.__base__ ?? typeof Dynamic === "string"`,
+  const contextConsume = options.baseComponent || Dynamic.__base__ || typeof Dynamic === "string"`,
   );
 
   const propsCode = "const { as: Element = __base__, children, ...restProps } = props";
@@ -57,7 +57,7 @@ export const transformStyledFn = (args: CodegenPrepareHookArgs) => {
 
     const consume = props.asChild
       ? consumeCss && (options.baseComponent || Dynamic.__baseComponent__)
-      : consumeCss ?? contextConsume`,
+      : consumeCss || contextConsume`,
   );
 
   const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
@@ -80,7 +80,7 @@ export const transformStyledFn = (args: CodegenPrepareHookArgs) => {
   factoryJs.code = factoryJs.code.replace(
     styledComponentForwardPropDeclaration,
     `${styledComponentForwardPropDeclaration}
-  StyledComponent.__baseComponent__ = options.baseComponent ?? Dynamic.__baseComponent__`,
+  StyledComponent.__baseComponent__ = options.baseComponent || Dynamic.__baseComponent__`,
   );
 
   const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";

diff --git a/packages/styled-system/src/jsx/factory.js b/packages/styled-system/src/jsx/factory.js
@@ -18,14 +18,14 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
   const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
   const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
   const __base__ = Dynamic.__base__ || Dynamic
-  const contextConsume = options.baseComponent ?? Dynamic.__base__ ?? typeof Dynamic === "string"
+  const contextConsume = options.baseComponent || Dynamic.__base__ || typeof Dynamic === "string"
 
   const StyledComponent = /* @__PURE__ */ forwardRef(function StyledComponent(props, ref) {
     const { as: Element = __base__, consumeCss, children, ...restProps } = props
 
     const consume = props.asChild
       ? consumeCss && (options.baseComponent || Dynamic.__baseComponent__)
-      : consumeCss ?? contextConsume
+      : consumeCss || contextConsume
 
     const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
@@ -65,7 +65,7 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
   StyledComponent.__cva__ = __cvaFn__
   StyledComponent.__base__ = __base__
   StyledComponent.__shouldForwardProps__ = shouldForwardProp
-  StyledComponent.__baseComponent__ = options.baseComponent ?? Dynamic.__baseComponent__
+  StyledComponent.__baseComponent__ = options.baseComponent || Dynamic.__baseComponent__
 
   return StyledComponent
 }