Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Compiled, buildtime atomic CSS in JavaScript and all your favorite APIs

compiledcssinjs.com

Post reply on HN
Print view View original

1–10 of 51 posts

Re: Show HN: Compiled, buildtime atomic CSS in JavaScript and all your favorite APIs

#7

Post by jitl »

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

Re: Show HN: Compiled, buildtime atomic CSS in JavaScript and all your favorite APIs

#8

Post by lf-non »

fastball wrote: post #4

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

Not quite. Emotion doesn't do the atomic splitting - ie. one class name per style rule. This splitting results in ugly looking HTML but if two components are using some common subset of CSS rules they will partially reuse the same css classes.

It is closer to https://www.styletron.org/ in that regard.

Post reply on HN