Your Docusaurus site did not load properly.

A very common reason is a wrong site baseUrl configuration.

Current configured baseUrl = / (default value)

We suggest trying baseUrl =

Introduction

๐Ÿฅœ goober, a less than 1KB css-in-js solution.

Backers on Open Collective Sponsors on Open Collective

version status gzip size downloads coverage Slack Greenkeeper badge

Usage#

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.

import { h } from 'preact';
import { styled, setup } from 'goober';
// Should be called here, and just once
setup(h);
const Icon = styled('span')`
display: flex;
flex: 1;
color: red;
`;
const Button = styled('button')`
background: dodgerblue;
color: white;
border: ${Math.random()}px solid white;
&:focus,
&:hover {
padding: 1em;
}
.otherClass {
margin: 0;
}
${Icon} {
color: black;
}
`;

Examples#

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 nameGooberStyled ComponentsEmotion
Base bundle size1.25 kB12.6 kB7.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 use goober to define scoped styles in any context. Really usefull for web-components.
  • [2] Supported only via babel-plugin-transform-goober

SSR#

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 extractCSS and targets below.

Benchmarks#

You results are included inside the build output as well.

Browser#

These are not yet measured. Need some time.

SSR#

The benchmark is testing the following scenario:

import styled from 'package';
// Create the dynamic styled component
const Foo = styled('div')((props) => ({
opacity: props.counter > 0.5 ? 1 : 0,
'@media (min-width: 1px)': {
rule: 'all'
},
'&:hover': {
another: 1,
display: 'space'
}
}));
// Serialize the component
renderToString(<Foo counter={Math.random()} />);

The results are:

goober x 169,157 ops/sec ยฑ1.29% (91 runs sampled)
styled-components x 10,558 ops/sec ยฑ7.44% (55 runs sampled)
emotion@10.0.27 x 73,287 ops/sec ยฑ3.69% (88 runs sampled)
Fastest is: goober

Browser support#

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.