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

// Weave 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, normalizing and splitting values, creating the most compressible class names, everything. Weave CSS produces smaller files and smaller bundles than any other library, even post-compression.

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 Weave CSS, you have the full power of CSS. Any selector, any @ rule, any property,

<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