my-component-library icon indicating copy to clipboard operation
my-component-library copied to clipboard

vanilla-extract 🍰

Open PeturSteinn opened this issue 1 year ago • 1 comments
trafficstars

Thank you so much for your article and repo, you mentioned that you wanted to extend the tutorial to use vanilla-extract - is there any update on that? 😄 I'm setting up a component lib that adheres to a design system that I have and I wanted to build the lib with vanilla-extract or maybe even StyleX. I'm just curious as a complete library-developer newbie what are the considerations that I have to think about if i wanted to integrate those CSS-in-JS solutions?

Thanks again!

Edit:
I'm also curious about serving fonts via the component library, in my case the library is very opinionated - not like other generic libraries such as MUI where you bring your own font family.

PeturSteinn avatar Jul 12 '24 14:07 PeturSteinn

I still want to try vanilla extract in this context, I think it should be relatively simple to do. Maybe I can find some time for it in the next weeks.

Regarding the fonts, my current approach is to ship a global css file with my component library. This is also the place where I add some normalize styles. I build the styles in a different build step like so:

"build": "tsc --p ./tsconfig-build.json && vite --config ./vite-build.config.ts build && vite --config ./vite-build-css.config.ts build --emptyOutDir false",

You can look at this project (the "components" package in the monorepo) to find out more: https://github.com/receter/sys42 The project/package is experimental and is still under heavy development. I am planing to use this as a base for the design system/component library we use at Userbrain.

receter avatar Jul 17 '24 09:07 receter