CSS in TypeScript, compiled away
cssints turns typed style calls into atomic, content-hashed classes in one stylesheet when you build. The browser gets class names, not a styling library.
npm install --save-dev cssints@nextWhat you write, what you get
This is the compiler's output, made when this site was built: the file on the left went through the same plugin as your code.
import type { Style } from "cssints";
import * as css from "cssints" with { type: "cssints" };
const wide = css.media("(width >= 40rem)");
const base: Style = css.cn(
css.flex().alignItems("center").gap(2),
css.p(3),
css.bg("rebeccapurple"),
css.color("white"),
css.hover(css.bg("#3178c6")),
);
export const button = css.cv({ base, variants: { size: { lg: wide(css.p(5)) } } });import { _cv as __cv } from "cssints/browser";
const wide = null;
const base = "_1s47490 _1ob5z5m _g2iyum _lu37hg _lexhew _1binn6n _1u36g2c";
export const button = __cv({
"base": "_1s47490 _1ob5z5m _g2iyum _lu37hg _lexhew _1binn6n _1u36g2c",
"variants": { "size": { "lg": "_gw3er4" } },
"defaultVariants": {}
});@layer _.k, _.a, _.b, _.c, _.d, _.e;
@layer _.a {
._lu37hg{padding:0.75rem}
._g2iyum{gap:0.5rem}
._1binn6n{color:white}
._1ob5z5m{align-items:center}
._1s47490{display:flex}
._lexhew{background-color:rebeccapurple}
}
@layer _.b {
._1u36g2c:hover{background-color:#3178c6}
@media (width >= 40rem) {
._gw3er4{padding:1.25rem}
}
}Why cssints
Typed values, checked twice
Every value is checked against the spec grammars of mdn-data: in the editor through the types, and again in the build. A typo is an error, with the file and the line.
The errors you can getcolor: unexpected "rebeccapurpel" in "rebeccapurpel", expected <color>Nothing of it at runtime
Each call is replaced by a class string. Only
Without runtimecxand the few lines behindcvship, and they just join class names.Tokens, themes, contrast
Typed design tokens, themes on a class or a media query, and
Tokens and themescheck.contrast, which fails the build when text is hard to read.Plugins on one small API
Fluid type, layout, fonts, reset, gradients, motion, masonry, icons and more: plugin packages that run at build time too.
Plugin packagesDevtools and agents
An overlay in the dev server shows the cascade of any element, and an MCP server lets your coding agent check a value or compile a module.
The devtoolsA playground in the page
The real engine in a web worker, over wasm builds of oxc and LightningCSS, beside Monaco with the types of cssints. Nothing to install.
Open the playground