goober
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 installgoober
Features
Even though small in sizegooberhas 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
gooberis built on the shoulders of well established solutions. That means the API has been paved and we need to follow it. You'll findas,forwardRef,css,keyframes,styledand so much more.
Theming
Easily access your common sizes, colors, anything really with the use of a theme.
Performant
gooberdoes 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 withextractCss.
Why the 🥜
The initial thought ofgooberwas 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.