Yet another case of documentation saying “JS” when they mean “React, specifically”. Every single example I can see here uses React, but if this deserves the CSS-in-JS moniker, please give at least one example of usage with vanilla JS. It’s like peak jQuery all over again.
The differentiating feature of Atlassian’s @compiled package is not the “build time atomic css” - it’s that you can distribute components that use @compiled on NPM without requiring your consumer to futz with Webpack include paths for e.g. CSS files. Do I have that right? @madou is the extraction shipping yet? The docs have a few places that say “coming in 2021” - what’s the status?<p>For those interested in build-time CSS in JS, also called Zero-runtime CSS in JS, you might also want to check out:<p>- Linaria (<a href="https://github.com/callstack/linaria" rel="nofollow">https://github.com/callstack/linaria</a>) I use on my personal site. I ran into trouble/bugs trying to integrate it with Notion’s build process; the Webpack/babel bits are very brittle.<p>- Treat requires that you write the JS that computes your styles in esperare xxx.treat.js files which is annoying from my point of view - I want single file components. (<a href="https://seek-oss.github.io/treat/" rel="nofollow">https://seek-oss.github.io/treat/</a>)<p>- No idea about this one, but it’s more recent. Has some other interesting things in the inspiration section of the README <a href="https://github.com/CraigCav/css-zero" rel="nofollow">https://github.com/CraigCav/css-zero</a>
So you took something written in a regular grammar and made it into the same thing except with a very complex context free grammar with support for recursion?<p>I hate to be a grumpy puss but using this sounds like a step backwards.
Personally I'm a fan of cxs [0] which is (or purports to be) atomic among other strengths. From the readme:<p><pre><code> - 0.7 KB (gzipped)
- Zero dependencies
- High performance ("fast af")
- Deduplicates repeated styles
- Dead-code elimination
- Media queries and pseudoclasses supported
</code></pre>
Works with any framework or with none, apparently, although I've only used it with Preact. Supports themes. Everything I need and nothing I don't.<p>[0] <a href="https://github.com/cxs-css/cxs" rel="nofollow">https://github.com/cxs-css/cxs</a>
There are already quite a few alternatives in the comments, but I’ll just add that I have really come around to the Tailwind way of doing this. On my current project, I haven’t had to write much CSS at all other than a handful of animations, and it all looks consistent and custom. It’s a breath of fresh air.
I was building a similar solution 4 years ago [1] but got stuck with integration to Webpack. I’m very glad someone succeeded to do so.
[1]: <a href="https://github.com/iddan/stylesheet" rel="nofollow">https://github.com/iddan/stylesheet</a>
What was wrong again with runtime CSS? By the smell of it seems to be performance, so: can somebody point to performance comparisons, or give a brief of the advantages?
Could someone please explain the following line to me?<p>export const Button = styled.button``;<p>Why is there a string right after the field "button" of the object "styled"? How is this valid JS? What does it do?
why is there such a prevalence of mawkish phraseology in the javascript community...<p>i was reading the landing page for a js library and it said something like "battery-pack included", makes me feel kind sick....or maybe i'm just a grumpy sod