Generating CSS using imported modules doesn't work
piotrblasiak opened this issue · comments
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
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
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