Bundle-time, inline, hackable, type-safe CSS-in-JSX for React and Solid.
// Tailwind CSS
<button
{...props}
className={'inline-flex h-9 items-center justify-center rounded-md bg-slate-600 dark:bg-slate-100 dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-slate-200 disabled:cursor-not-allowed disabled:opacity-50 ' + props.class}
/>
// Hypergood CSS
<button
{...props}
css={{
display: "inline-flex",
h: 36,
items: "center",
justify: "center",
rounded: 6,
bg: colors.slate800,
":hover": {
bg: colors.slate700,
},
"@dark": {
bg: colors.slate100,
color: colors.slate900,
":hover": {
bg: colors.slate200,
},
},
"[disabled]": {
cursor: "not-allowed",
opacity: 0.5,
},
}}
/>
We treat CSS as a compilation target and optimize every aspect, from normalizing and splitting values to creating the most compressible class names. Hypergood CSS produces smaller files and smaller bundles than any other library, even post-compression. Genuinely. No NueJS bullshit.
Runtime size? 250 bytes.
const Button = styled("button", {
// base styles
variants: {
color: {
gray: {
bg: "gainsboro",
},
blue: {
bg: "dodgerblue",
},
},
size: {
md: {
h: 25,
},
lg: {
h: 35,
},
},
},
compoundVariants: [
{
color: "blue",
size: "lg",
css: {
bg: "purple",
},
},
],
defaultVariants: {
color: "gray",
size: "md",
},
});
You don't have to wait for an update to @tailwindcss/typography just to change your heading sizes. With Hypergood CSS, you have the full power of CSS. Any selector, any @ rule, any property, it just works.
<table
css={{
'th': {
textAlign: 'left',
fontWeight: 'bold',
},
'th, td': {
py: 4,
px: 8,
borderB: '1px solid #ddd',
},
'> tr:nth-of-type(odd), :hover': {
bg: '#f9f9f9',
},
}}
>
<thead>{/* ... */}</thead>
<tbody>{/* ... */}</tbody>
</table>
Zero-cost abstractions over the annoying parts.
Remember a tricky syntax:
export const config: StyleConfig = {
utils: {
// ...
supportsBlur: (css: CSS) => ({
"@supports (backdrop-filter: blur(20px))": css,
}),
// ...
},
};
Or invent a whole new syntax!
export const config: StyleConfig = {
utils: {
// ...
backgroundColor: (color) => ({
backgroundColor: color,
"--current-background": color,
}),
color: (color) => ({
color:
color === "current-background"
? "var(--current-background)"
: color,
}),
// ...
},
};
You can even invent a time machine and fix the official list of css mistakes
export const config: StyleConfig = {
utils: {
// ...
cornerRadius: (radius) => ({
borderRadius: radius,
}),
whiteSpace: (space) => ({
borderRadius: space === "no-wrap" ? "nowrap" : space,
}),
// We actually include this one by default 😁
size: (size) => ({
width: size,
height: size,
}),
// ...
},
};
npm i @hypergood/css