Pompom

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.

No build step required. The style API returns a modified object with minimal runtime overhead. It also does not inject stylesheets into the DOM like CSS-in-JS libraries do.

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 = {
  accent: "red",
  foreground: "white",
};

export const { stylesheet, style } = defineConfig({
  conditions: {
    hover: "&:hover",
  },
  properties: {
    color: (c: keyof typeof colors) => ({
      color: colors[c],
    }),
  },
});

Render stylesheet in root

stylesheet is a static string that contains the magic to make the conditions work on inline styles

import { stylesheet } from "./config";

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.

import { style } from "./config";

function Example() {
  return (
    <div
      style={style({
        color: "foreground",
        hover: {
          color: "accent",
        },
      })}
    >
      hover me!
    </div>
  );
}

hover me!