Explain how this repo is 14x smaller than the current smallest CSS-in-JS solution about goober HOT 6 CLOSED

And I actually stumbled on this repo because I was also starting a super tiny preact project and was trying to add as little bytes as possible. Was going to add emotion initially but this looks like a much better fit!

from goober.

Hey @PepijnSenders!

Thanks for asking that! 😄I'm bound to do some write-up, that's for sure. I should add an issue to track that.

So, my main motivation was the size of the current solutions - well established and popular ones. I started a project, with Preact, and I was about to add 11k to the bundle, just for generating the styles. To put things in perspective, Preact has 3.5k, so over 3x the size of my view library?! I was having none of that. So, I started experimenting on how I could have a solution, with a familiar API, ala emotion, and have it under 1KB. Initially I managed to get it under 900B, but soon I realized my CSS parser was not gonna be maintainable. So, unfortunately I had to change the taglines 😄to reflect the reality I was facing - to have it under 1KB.

Generating the css, there's a 2-step process(since v1.0.2 😄 before it was 3).

1. Parse the css string(from the tagged template) and create a AST-ish(an object basically) with the properties and blocks. https://github.com/cristianbote/goober/blob/master/src/core/parser/astish.js#L9
2. Compile[1] that object into CSS(string with each block(object) with the proper selector parsed). https://github.com/cristianbote/goober/blob/master/src/core/parser/parse.js#L9

Once I figured how to handle these really generically, so there won't be a need to go and handle each block separately, it was just a matter of matching the features of the current solutions.

Also, at the moment we sit on the shoulders of such great css-in-js tools, so lots of learnings from there as well. For example:

• https://medium.com/styled-components/v3-1-0-such-perf-wow-many-streams-c45c434dbd03
• https://github.com/cxs-css/cxs, which has a zis of 0.7KB, but doesn't support tagged templates and styled API paradigm.

Is this answering your question?
_

1. It's more a serialization really, than a compilation, but oh well.

from goober.

I just realized that you've already dabbled with these solutions 😃 https://github.com/hellofresh/css-in-js-perf-tests. Just last night I wanted to add goober to the list and do the bench.

Also, @michael-klein, is about to add support for web-components and a more straight-forward css API 🎉which I'm really excited about!

from goober.

Hey @cristianbote, wow that AST-ish stuff is some magic! Really cool. I actually worked with CXS before as well and found it to be a bit buggy at the time and the support for it kinda died. I really loved the functional syntax at the time though!

So if I understand you correctly libraries like styled-components and emotion parse a lot of stuff manually where you serialize it directly into usable CSS?

from goober.

And oh yeah that repo is a bit dead 😅, really need to start accepting some PR's again.

from goober.

Glad you considering it! 😄 There's a much tiny solution, if you use webpack or rollup, at zero B runtime size, it's https://github.com/callstack/linaria. It's extracting the css into static files and there's the leverage.

from goober.