by tobr on 1/2/21, 9:37 AM
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.
by jitl on 1/2/21, 7:46 AM
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
by swiley on 1/2/21, 7:09 AM
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.
by austinjp on 1/2/21, 10:29 AM
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
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.
[0] https://github.com/cxs-css/cxs
by christophilus on 1/2/21, 1:41 PM
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.
by iddan on 1/2/21, 8:11 AM
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/stylesheetby fastball on 1/2/21, 7:29 AM
Doesn't @emotion's babel plugin already do this, or am I missing something?
by pestatije on 1/2/21, 8:31 AM
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?
by pii on 1/2/21, 8:38 AM
hamburger emoji for a menu icon is for sure an underused design pattern
by Traubenfuchs on 1/2/21, 4:49 PM
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?
by niksmac on 1/2/21, 7:43 AM
by mouzogu on 1/2/21, 3:40 PM
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
by crituquie on 1/2/21, 7:51 AM
why? css exists because one shoud not need js just for styling! js is dangerous for me!