Using Panda generated CSS classes directly + explicit error

[0ubbe]

Thanks for the awesome work with Panda 🐼 💯 , at Odin we're big fans and we're migrating our codebase to it ❤️ .

I leave two proposals that I think could improve the DX of the library (in case they haven't been considered yet). Thanks in advance if you take time to read and reply 🙇🏽

Using generated CSS classes directly

I'm not super fan of the css({ ... }) syntax. I tend to go for the style props ( styled) approach, as is easier and way less verbose to write. To me, using css inline in JSX, makes it quite hard to read. I either tend to write it outside of the component (which adds noise to the component file) or in a separate styles.ts file, but either way feels cumbersome.

One thing I love about Tailwind is how fast you're able to write CSS, very quickly it becomes muscle memory once you learn the naming patterns of the CSS classes.

Panda also generates those, but is hard to predict their naming pattern without them being documented:

<div className="rounded_xl px_1.5rem py_1rem bg_grey.woodsmoke w_full" />

Would be awesome if Panda could generate a reference table, (plain HTML even), showing all the compiled CSS class names, so that you could write them in className directly for better speed in some cases.

Is this a good idea? Was it already considered and discarded? Do you discourage writing the generated class names directly as you would do in Tailwind?

Throw an error if not able to infer the value at build time

While I like CSS-in-JS, is true that sometimes using style props (when using styled) you can easily bite the dust, if you use variables:

<styled.div width={computedWidth} height={dynamicHeight} />

is easy to forget that in many cases it won't work as Panda won't be able to infer at compile time.

Would be nice if there was a config option to make Panda throw an error in development if it does NOT manage to infer the value of a variable at compile time? Otherwise, these types of issues can be quite tricky to catch, if it's not obvious visually on the screen that the expected styles are not being appleid.

[0ubbe]

If these ideas sound sensible, I'm happy to contribute to the library with them if helpful 👍🏽

[astahmer]

Using generated CSS classes directly

this use-case that you describe, directly using the generated classNames is something that we wanted to support at some point
you can definitely use it as of today with staticCss but then it's not practical

there's some related work being done currently in this PR to parse those classNames just like a css() call and trigger the matching CSS generation, it will also help using Panda with any template engine (not just tsx)

panda/packages/core/src/static-css.ts

Line 235 in 55a053e

const createRegex = () => createClassNameRegex(Array.from(styles.classNames.keys()))

now, that feature mostly needs docs as you mentioned, an autogenerated reference table probably makes sense at first ! it would be very helpful to have contributions on this, as it's not a top-priority for me atm

Throw an error if not able to infer the value at build time

regarding this, it's hard to do that without getting a lot of false positives. instead @anubra266 has been working on an ESLint plugin in this branch

I'd also love to revisit this PR at some point in the form of a preset that only contains a hook on the artifacts generation and dynamically updates the code to include this warning inside of Panda, in a dev-only environment