Output static class names

[thomasdigby]

What's the reason for outputting the original function call and all nested CSS declarations for css and styled calls?

Given a React component like below:

const Container = styled('div', {
  base: {
    bg: 'red',
    height: 100,
    width: 100
  }
})

const App = () => (
  <Container>
    <div className={css({ fontSize: "2xl", fontWeight: 'bold' })}>
      Hello 🐼!
    </div>
  </Container>
)

I would expect the output JS to be something equivalent to:

const App = () => jsx('div', {
  className: 'height-100 width-100 bg-red',
  children: jsx('div', {
    className: 'fontSize-2xl fontWeight-bold',
    children: 'Hello 🐼!'
  })
})

But instead it seems like it still calculates the class names at runtime (minified code below but you can see the Kf/Sr calls for styled and css respectively)

const bf = Kf(),
  Zf = bf('div', { base: { height: 100, width: 100, bg: 'red' } })

function Jf() {
  return Nl.jsx(Zf, {
    children: Nl.jsx('div', {
      className: Sr({ fontSize: '2xl', fontWeight: 'bold' }),
      children: 'Hello 🐼!'
    })
  })
}

I assumed that all the relevant information would be available to Panda to be able to remove this runtime step and just output static class names with the element? Especially as we're not doing anything dynamic here.

Thanks

[adbutterfield]

I guess the easy fix is to put the css() call outside the component if there's nothing dynamic.

So like:

const styles = css({ fontSize: "2xl", fontWeight: 'bold' });

const App = () => (
  <Container>
    <div className={styles}>
      Hello 🐼!
    </div>
  </Container>
)

That's what I'm doing for the component library I'm building.

[astahmer]

making a bundler plugins with source code transformations is a whole different beast than "just" using static analysis and generating a CSS sheet based on that

it means you have:

• to support potentially complex transformations (what do you do for conditionals ?, how do you transform a cva call ? what hapens if xxx is not statically extractable in css(xxx) ? etc)
• support HMR in different bundler (vite/rollup webpack/next parcel etc), in different environements (CSR, SSR, both)

fwiw it's exactly what I started exploring a while ago here, but I don't want to have to maintain this on my own, contributions are welcome and the foundations are here

[thomasdigby]

Thanks @astahmer.

Totally understand the complexity with this work, I guess I had just assumed that Panda would output that alongside the static CSS files. I also thought I might have been doing something wrong or that there were some constraints with the React/JSX output.

I'll take a look at the work you linked, with static output I think this would be the best of all worlds, amazing DX and a small footprint of native CSS.