Generating CSS using imported modules doesn't work

[Piotr]

Description

I want to do <div className={css(h2, { paddingBottom: 22 })}> where h2 is imported at the top of the file like

import { h2 } from "./css.ts";

I do this because h2 already has paddingBottom set, and I want to override it.

The resulting css generated by panda does not include the styles from h2. I am guessing the panda parser does not support imports?

I tried using patterns and recipes but that moves the problem to a specificity problem instead. I know stylex handles this quite nicely, and I don't see why panda shouldn't be able to as well or is this a intended limitation?

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-s7ftcl?file=src%2Fstyles.ts,src%2FApp.tsx&terminal=dev

Steps to reproduce

No response

JS Framework

React (TS)

Panda CSS Version

0.42.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[Segun Adebayo]

You guessed right. This is a design limitation in Panda compiler. We don’t use a bundler (webpack, Vite, babel, etc) like StyleX or alternative solution.

Given the static and bundlerless nature of the compiler, it doesn’t work across file imports. I recommend designing a recipe for these kinds of use case.

Thanks for understanding

[Segun Adebayo]

You can also wrap the h2 styles with css.raw() which is an identity function but serves as a compiler hint for Panda.

That should make it work