pompom

Create type-safe design-system with powerful inline styles

Pompom lets you use conditional styles like :hover, @media, and @container directly in inline styles. Inspired by CSS-Hooks.

The Problem

Inline styles can't express conditions. No :hover, no @media, no :focus. You either write a stylesheet or reach for a CSS-in-JS library or use something like tailwind which generates a stylesheet for you

The CSS Variable Trick

CSS variables have a quirk: initial is invalid and triggers the fallback, while an empty value --foo: ; is valid but does nothing.

We an use this to toggle between two values, Here's an example:

<p style="color: var(--hover-on, red) var(--hover-off, blue)">
  HOVER ME
</p>

* {
  --hover-on: initial;
  --hover-off: ;
}

*:hover {
  --hover-on: ;
  --hover-off: initial;
}

Hover me

color:var(--hover-on, red)var(--hover-off, blue)

--hover-on: ;

--hover-off: initial;

What Pompom Does

Using this technique directly is tedious: you need to manage variable names, write repetitive stylesheet rules, and deal with ugly nested var() syntax. Pompom abstracts all of this away, giving you a type-safe, auto-completing API while generating the minimal CSS needed.

Define Your Design System

Create a config with your conditions (hover, media queries, themes) and custom properties with restricted, typed values.

import { defineConfig } from "@pompom/react";

const colors = {
  background: "oklch(0.254 0.000 0.0)",
  "muted-background": "oklch(0.302 0.000 0.0)",
  foreground: "oklch(0.933 0.000 0.0)",
  // etc..
};

// export these -
// we'll render the `stylesheet` string in page
// and `style` function in components
export const { stylesheet, style } = defineConfig({
  conditions: {
    hover: "&:hover",
    mobile: "@media (max-width: 768px)",
    dark: ".dark &",
    // etc..
  },
  properties: {
    fg: (c: keyof typeof colors) => ({ color: colors[c] }),
    p: (v: number) => ({ padding: v * 4 }),
    bg: (b: keyof typeof colors) => ({
      background: colors[b],
    }),
    radius: (r: number) => ({ borderRadius: r * 4 }),
    // etc..
  },
});

Render Stylesheet in Root

The stylesheet is a static string containing the CSS variable hooks. It only controls state toggles, not presentational values, so it doesn't grow as you add more components.

import { stylesheet } from "./design-system";

function App() {
  return (
    <div>
      <style
        dangerouslySetInnerHTML={{ __html: stylesheet }}
      />
      ...
    </div>
  );
}

Use in Components

The style function returns an object you pass directly to the style prop. TypeScript ensures you only use values defined in your config.

import { style } from "./design-system";

function Example() {
  return (
    <div
      style={style({
        fg: "foreground",
        bg: "background",
        radius: 3,
        p: 4,
        hover: {
          bg: "muted-background",
        },
      })}
    >
      hover me
    </div>
  );
}

hover me