Documentation

Hypergood CSS

The smallest CSS compiler.

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,
    },
  }}
/>

Sub-atomic CSS.

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.

CSS required for the Spotlight homepage
Style-for-style clone, excluding CSS resets, brotli compressed
  • 4.4kb
  • 3.0kb
  • 2.7kb
  • 2.3kb
Panda
Tailwind
StyleX
Hypergood
48% smaller

Instant type-safe styled components with Variants.

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",
  },
});

All of CSS.

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>

Utils

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

Read the docs