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?

For those interested in build-time CSS in JS, also called Zero-runtime CSS in JS, you might also want to check out:

- Linaria (https://github.com/callstack/linaria) 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.

- 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. (https://seek-oss.github.io/treat/)

- No idea about this one, but it’s more recent. Has some other interesting things in the inspiration section of the README https://github.com/CraigCav/css-zero

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?

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:

  - 0.7 KB (gzipped)
  - Zero dependencies
  - High performance ("fast af")
  - Deduplicates repeated styles
  - Dead-code elimination
  - Media queries and pseudoclasses supported

[0] https://github.com/cxs-css/cxs

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]: https://github.com/iddan/stylesheet

Doesn't @emotion's babel plugin already do this, or am I missing something?

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?

hamburger emoji for a menu icon is for sure an underused design pattern

Could someone please explain the following line to me?

export const Button = styled.button``;

Why is there a string right after the field "button" of the object "styled"? How is this valid JS? What does it do?

Isn't this the same as Styletron is doing? https://www.styletron.org

why is there such a prevalence of mawkish phraseology in the javascript community...

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

why? css exists because one shoud not need js just for styling! js is dangerous for me!