Is this a bug? Or is this the wrong way to use this library?

[jaekwak02]

I'm trying to create some reusable chunks of CSS as there are a lot of places I end up repeating myself. This feels like it should work since it's all defined statically, but when I try this:

// reusable.ts

export const ReusableChunk = css.raw({
    h: 9,
    px: 4,
    bg: "blue",
})

// ex1.ts

import { ReusableChunk } from "./reusable.ts"

export const mystyle = cva({
    base: {
        ...ReusableChunk,
        bg: "red",
    }
})

// ex2.ts

import { ReusableChunk } from "./reusable.ts"

export const mystyle = css({
    '& [data-active]': {
        ...ReusableChunk,
        bg: "red",
    }
})

Basically, sometimes it works, and sometimes it doesn't. Like, ex1 will work, but ex2 will work only until I make a change to the config. Then styles that were working up to a second ago will inexplicably disappear. It all works, however, if I colocate everything inside the same component.

Yes, I have run codegen and am running panda --watch.

Honestly, reading the discussions, I'm very confused about how Panda does static analysis. This example shows css being passed between multiple files, but this answer explains that files are not traversed to look for definitions? Am I understanding that wrong? Is this broken no matter what? Or is it only broken for custom selectors like I'm doing in ex2?

A big appeal of CSS in JS is that styles like this are easily composable using simple objects. Is there a correct way to do this (outside of the config because I'm using cva) that is somehow different from what I'm doing?

[kiruushaaa]

css.raw() returns string type 😁

[astahmer]

css.raw() returns string type 😁

please update your panda version (currently at 0.40.1), it's a bug introduced in 0.39.0 and fixed in 0.39.1 (sorry about that !)

[kiruushaaa]

wow, i thought it was a "feature"

thanks!

[jaekwak02]

I got around this by using utilities, seems like that is the best tool for my intention here. Originally, I wanted to figure out these objects so that I can have reusable variants that I spread into multiple recipes, but it ended up being messier than I had hoped anyway.

[astahmer]

hey, it's not a bug as this (currently) cannot work due to the way Panda statically analyze style usage

This example shows css being passed between multiple files

this works due to the styles being in the same condition (which is none in this case), by condition I mean CSS selector/at-rules

---

that being said, there's an opportunity for us to make that work in the future