Introduction
🥜 goober, a less than 1KB css-in-js solution.
#
UsageThe 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.
#
Examples#
Comparison and tradeoffsIn 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 |
Framework agnostic | ✅ | 🛑 | 🛑 |
Render with target *1 | ✅ | 🛑 | 🛑 |
css api | ✅ | ✅ | ✅ |
css prop | ✅ | ✅ | ✅ |
styled | ✅ | ✅ | ✅ |
styled.<tag> | ✅ *2 | ✅ | ✅ |
as | ✅ | ✅ | ✅ |
.withComponent | 🛑 | ✅ | ✅ |
.attrs | 🛑 | ✅ | 🛑 |
shouldForwardProp | ✅ | ✅ | ✅ |
keyframes | ✅ | ✅ | ✅ |
Labels | 🛑 | 🛑 | ✅ |
ClassNames | 🛑 | 🛑 | ✅ |
Global styles | ✅ | ✅ | ✅ |
SSR | ✅ | ✅ | ✅ |
Theming | ✅ | ✅ | ✅ |
Tagged Templates | ✅ | ✅ | ✅ |
Object styles | ✅ | ✅ | ✅ |
Dynamic styles | ✅ | ✅ | ✅ |
Footnotes
- [1]
goober
can render in any dom target. Meaning you can usegoober
to define scoped styles in any context. Really usefull for web-components. - [2] Supported only via
babel-plugin-transform-goober
#
SSRYou 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 extractCSS
and targets
below.
#
BenchmarksYou results are included inside the build output as well.
#
BrowserThese are not yet measured. Need some time.
#
SSRThe benchmark is testing the following scenario:
The results are:
#
Browser supportgoober
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.