- Видео 1
- Просмотров 3 847
Matt Jones
Добавлен 21 май 2011
Vanilla Extract - CSS in JS at compile time
This is my talk from React India 2021. It goes over what Vanilla Extract is, how it works and some cools things you can do with it.
Просмотров: 3 849
It would be nice if this was legible on a smaller screen.
Thank you
Thank you Matt for this wonderful video. I want to create a component library for my current project. Definitely a good option, looking forward to any more updates.
Can we make the browser update the styles without refreshing the page each time we change styles?
Thanks for video! I wonder vanilla extract modules are not included in bundled js even if we use run time theme or sprinkles in directly in component?
They're never included in the runtime bundles. In the case of sprinkles or anything using function serialisation there will be an essential piece of runtime that's included though. However that code doesn't generate CSS, it just creates an API over the data structures created by the functions.
@@larrybonzel I see. appreciate respond!
Even though I'm distracted working on something else. I got to give it you, you have excellent audio and voice over.
Thank you Matt for this lovely demo! I *really* appreciate you taking the time to go under the hood with how Vanilla Extract works, that was both fascinating and very helpful to understand some of the "magic" behind Vanilla Extract. This was really the first time that some of the Vanilla Extract concepts really clicked with me 😃
Hey Matt hope you are well, lm really finding it hard to understand the shorthand API of the sprinkles package. Does it work like the createStitches utils API in stitches? Is there perhaps an example sandbox project you have to demonstrate it in use.
Hey Bud, I assume you've read the docs for the utils prop? vanilla-extract.style/documentation/packages/sprinkles/#shorthands I'd say it's less powerful than stitches utils. It just allows you to combine properties that have the same values together. This commonly used for combining paddingLeft and paddingRight into a paddingX prop. In this case setting paddingX will apply both the paddingLeft and paddingRight values.
@@larrybonzel Thanks you so much
Vanilla extract is awesome ❤❤