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.