EffCSS v5: Type-Safe CSS-in-TS Built on Native Browser APIs
EffCSS v5 is a zero-dependency CSS-in-TS library using CSSStyleSheet and adoptedStyleSheets, offering a contract-first, framework-agnostic styling approach.
EffCSS is a zero-dependency, framework-agnostic CSS-in-TS library that relies on native browser APIs—CSSStyleSheet and adoptedStyleSheets—instead of runtime injection or build plugins. Version 5 abandons v4's useStyleProvider/TStyleSheetMaker pattern in favor of standalone utility functions such as variable, animation, layer, container, and font, which generate @property, @keyframes, @layer, @container, and @font-face rules respectively.
The library's standout feature is its contract-first approach: developers define their design system as a TypeScript type, then use attributes or classNames to generate scoped selectors that match that contract, making typos in selector names essentially impossible while enabling full autocompletion. Lower-level helpers like className and attribute allow for ad-hoc CSS rules, and serialize converts stylesheets into HTML strings for SSR scenarios.
EffCSS is aimed at design-system libraries, component libraries, and teams that prioritize TypeScript developer experience. It represents a different paradigm from Tailwind's utility-first model—component-scoped styling with a small runtime footprint of about 3.7 KB minzipped, distinguishing it from fully zero-runtime solutions like Linaria or vanilla-extract. Its default style isolation also makes it well suited for micro-frontend and multi-team setups.