g o o b e r
The Great Shave Off Challenge
import { styled } from 'goober';
const Button = styled('button')`
border: 0;
background: dodgerblue;
span {
color: white;
}
&:hover {
background: tomato;
span {
color: black;
}
}
`;npm install goober
Features
Even though small in size goober has got you covered, feature wise.
Lightweight
As the subtitle notes, this is the smallest and fullest featured css-in-js solution out there. Weighing at 1KB and once bundled it's gonna be less due to tree-shake.
Familiar API
goober is built on the shoulders of well established solutions. That means the API has been paved and we need to follow it. You'll find as , forwardRef , css , keyframes , styled and so much more.
Theming
Easily access your common sizes, colors, anything really with the use of a theme.
Performant
goober does more with less! Since the code measure less in size, it's served, read and ran quicker.
Server-Side Rendering
On the server you can easily extract the css for the current state with extractCss .
Why the 🥜
The initial thought of goober was a css-in-js solution at the cost of peanuts. Hence the peanuts emoji.
Build more
By using goober , you are practically getting back space in size to build more of the needed features.