Made With ❤️ in NH

Manage CSS Like a Boss. Declare Your Styles and You’re Done.

@ptb/style is a CSS compiler with a powerful, intuitive API that makes authoring CSS faster and easier.


No More Naming

Skip naming and remembering class or component names. Names are generated automatically and consistently based on styles input.

One Core Function

The core function, named css, parses and deduplicates all styles, returns class names, and dynamically applies them to the current web page.

Setup Not Required

Perfect for prototyping ideas quickly. No theme providers, wrappers, special components, props, plugins, or build configurations needed.

Separation of Concerns

Styles are separate from structure. Imagine having to use a special type of component just to use Redux. Styles should be simple.

Consistent Results

In any order, the same input will result in the same output, whether rendered at build time, server-side, or at runtime in the browser.

No More Conflicts

Declare your styles and those styles are applied. No more specificity issues, naming collisions, or side effects from cascading styles.


Any Selector or None

Use any selector: type, class, ID, universal, attribute, adjacent sibling, child, or descendant selectors, pseudo classes and elements.

Real Media Queries

Media queries can be used at the top of a group of styles, at the bottom under a CSS property, or nested inside of other media queries.

Override Styles Easily

Provide an array of styles and they will be deep merged. Start with a base set of styles followed by any modifications for easy variants.

Sass-Style Nesting

Nested rules can be complex and combined with commas. Each nested selector is combined separately and merged back into the selector list.

Built-In Abbreviations

Styled System inspired shorthand properties are built-in. Several common media queries have abbreviations and you can add your own.

DIY Shortcuts

Define abbreviations for CSS properties (using $properties), conditional queries ($media or $supports), and vendor prefixes ($prefixes).


Atomic or Group Names

Automatically creates atomic class names per style declaration or group styles under a single class name. Or both, you get to choose.

CSR, SSR, or Build-Time

Universal tool that works with modern browsers and Node.js. Render at build-time (SSG), server-side (SSR), or on the client (SPA).

Variables and Snippets

Define theme variables or blocks of styles using $-prefixed key names and reuse them later without needing a context or theme provider.

React Or Any Framework

Works great with React or any other JavaScript framework or even plain JavaScript. It’s just a function and returns class names.



Use the Babel macro to extract static styles to a CSS file. Styles are “compiled away” leaving just class names for a zero-runtime footprint.

Optimized Output

Styles are ordered simply and consistently. Selectors are parsed, de-duplicated, and grouped with identical declarations automatically.

Modern CSS for Pros

Simple enough for a novice developer and powerful enough for the needs of an experienced team. Optimized from development to delivery.