DEV Community

Discussion on: Using CSS-in-JS with Preact

Collapse
emma profile image
Emma Goto 🍙 Author

Hi Adam, if the library works with React, then it should work with Preact (if you use the method I outlined in this post).

In terms of how it fits into styled components - it seems like your library would be used standalone, and not together with a CSS-in-JS library. Styled-components lets you pass in props to change CSS so I think it would cover at least part of what your library can do.

Collapse
adam_cyclones profile image
Adam Crockett • Edited

Thanks Emma taking a look! I wrote a Vue version which I suspect will be similar to the React Hook version I will write today. I'm not a react developer but I'd love to hear if I got it right.

In the Vue version basically, a prop of type CSSProp is declared giving access to the functionality of the library. Changing the CSS variable from devtools caused a Vue lifecycle to fire meaning I have successfully made CSS reactive, this opens the door for bi-directional communication between js and CSS and storing styling configuration in CSS or SCSS files to drive the JavaScript styling logic.
I'm going to bodly say the big advantage of my library over a CSS in JS library would be that you can style before even JS is loaded then hand over control to JavaScript then start using it just like a CSS in JS library, passing props ect.

The idea of stylesheets driving styling logic in JavaScript is super exciting to me and I hope it might gain traction.

Thanks for being a great person and for the post it was helpful in my design.

Thread Thread
emma profile image
Emma Goto 🍙 Author

I'm going to bodly say the big advantage of my library over a CSS in JS library would be that you can style before even JS is loaded

I think if there is a performance benefit to be had you should definitely make sure to highlight that in your docs! e.g. do a performance comparison against other popular libraries.