Replies: 2 comments
-
If these ideas sound sensible, I'm happy to contribute to the library with them if helpful 👍🏽 |
Beta Was this translation helpful? Give feedback.
-
Using generated CSS classes directlythis use-case that you describe, directly using the generated classNames is something that we wanted to support at some point there's some related work being done currently in this PR to parse those classNames just like a panda/packages/core/src/static-css.ts Line 235 in 55a053e 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 timeregarding 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 |
Beta Was this translation helpful? Give feedback.
-
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, usingcss
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 separatestyles.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:
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: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.
Beta Was this translation helpful? Give feedback.
All reactions