🥜 goober, a less than 1KB css-in-js solution.
The API is inspired by emotion,
styled function. Meaning, you call it with your
tagName and returns a vDOM component for that tag. Note,
setup is needed to be run before the
styled function is used.
#Comparison and tradeoffs
In this section I would like to describe as objectively as I can the comparision between the two most known css-in-js packages: styled-component and emotion. The latest versions to date.
I would use the follwing markers to reflect the state of each point:
- ✅ Supported
- 🟡 Partially supported
- 🛑 Not supported
Here we go:
|Feature name||Goober||Styled Components||Emotion|
|Base bundle size||1.25 kB||12.6 kB||7.4 kB|
|Render with target *1||✅||🛑||🛑|
goobercan render in any dom target. Meaning you can use
gooberto define scoped styles in any context. Really usefull for web-components.
-  Supported only via
You can get the critical CSS for SSR, via
extractCss. Take a look at this example: CodeSandbox: SSR with Preact and goober and read the full explanation for
You results are included inside the build output as well.
These are not yet measured. Need some time.
The benchmark is testing the following scenario:
The results are:
goober supports all major browsers (Chrome, Edge, Firefox, Safari).
To support IE 11 and older browsers, make sure to use a tool like Babel to transform your code into code that works in the browsers you target.