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

11–20 of 51 posts

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

#11

Post by jitl »

niksmac wrote: post #5

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

Styletron create “atomic” (single property) CSS classes as your application runs in production because it has no macro, compiler, or bundled plugin. “Build-time” means the CSS is somehow extracted from the JS files and inserted into HTML or static CSS files during the bundling process, so that the JS to compute the styles never runs on the client/production. There’s only whatever code is needed to add the generated class names to the DOM nodes created by React (etc) when the app runs.

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

#13

Post by jitl »

swiley wrote: post #2

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.

Well, in the long run we’ve learned that maintaining a large and complex UI’s CSS by hand is very tedious and error-prone. A miss configured style that, for example, makes the Airbnb “Book It” unreadable for some % of the population can lose millions of dollars, but never throw a stack trace.

So, engineers working on UI toolkits often reach for CSS code generation to ease maintenance. At first it was all PHP templates. Then it was Sass (206), is a popular purpose-built language for generating CSS which saw a lot of use in the Rails community. Sass is very good at its job because it handles a lot of CSS niceties in nice ways, but it’s a lot of extremely domain specific complexity. A whole new Turing-complete language JUST for CSS? Not ideal.

The next step is to move all the UI definition into a single place, i using a single language that abstracts the underlying HTML/CSS/JS files & semantics. We do that by writing JS, and having a compiler program extract the CSS bits. This gets us ideal performance & ideal maintainability at the cost of build complexity. This is a worth while trade, because in the long run the compiler will get so good that the cost becomes minimal; compare to other ecosystems, for example the Kotlin compiler is quite complex, but I never think about x86 assembly when writing Kotlin.

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

#15

Post by nwienert »

jitl wrote: post #7

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…

I’ve been working on one that runs on top of React Native Web. Compiles to atomic CSS on web, and StyleSheet on native.

It marries in-line style props (like JSXStyle) with SwiftUI style stack views.

It’s very much alpha, on my GitHub.

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

#17

Post by have_faith »

jitl wrote: post #7

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…

Have also been using Linaria on a side project recently, enjoying it a lot so far. I skipped most of the other css-in-js solutions when I saw they where using runtime js to manipulate styling which intuitively just feels unnecessary for 99% of the pages style. Very happy with Linaria so far.

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

#18

Post by tobr »

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.

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

#19

Post by austinjp »

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

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

#20

Post by ljm »

tobr wrote: post #18

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.

We're probably at that point again where a developer 'knows' React but will completely flounder when faced with anything outside of that ecosystem. Same with jQuery, same with Rails and Ruby.
Post reply on HN