@ptb/style

CSS compiler with a powerful, intuitive API that makes authoring CSS faster and easier.

• Demonstration 👈🏻
• Documentation
• Report Bugs
• Request Feature

Perfect CSS Architecture

Let’s imagine the perfect styling system. Styling should be easy, predictable, and maintainable. All the features of CSS should be usable: media queries, any & all selectors, animations, and custom properties. Modifying styles should be effortless and without side effects. It should be simple enough for a novice developer and powerful enough for the needs of an experienced team. Re-using styles should be uncomplicated or better yet, automatic. Minimized CSS output should be automatically (or easily) added to our workflow and compatible with all our current tools, whatever they may be.

Do One Thing and Do It Well

The core of @ptb/style is a single function named css, that parses JavaScript objects containing CSS styles, applies them to the current web page, and returns the class names.

Declare the styles you want and that’s it.

Stop Naming Things

• The point of CSS is not about naming things; it’s about style and design.
• Skip naming and remembering class names and let the computer do it for you.
• And it’s your choice if you’d like atomic class names or grouped class names.
• Names are generated automatically and consistently based on styles input.

Production Ready

• Zero-runtime overhead or dynamic runtime or a mix of both, automatically.
• Universal tool for rendering at build-time, server-side, or on the client.
• TypeScript definitions are extracted and built from JSDoc (same as webpack).
• Single 9 kB (gzip) ES6 file with no dependencies and 99% test coverage.

Developer Experience

• Primary css function accepts styles, selectors, media queries, and shortcuts.
• Styles are cached, de-duplicated, merged, and applied in a consistent order.
• An array of objects will be deep merged to easily override styles via props.
• Media queries can be at the top, at the bottom under the CSS property, or nested.
• Specify abbreviations for media queries or CSS properties to use in their place.
• Define snippets using $-prefixed names and re-use them anywhere else.
• Prototype and vet ideas quickly using CRA, CodeSandbox, or others with no setup.
• CSS is optimized from development and changes to deployment and maintenance.

Installation

Add @ptb/style to your project:

npm install @ptb/style   # or:  yarn add @ptb/style

Usage

Import the css function and use with the className prop:

import { css } from "@ptb/style"

export default function ({ children }) {
  return (
    <div
      className={css({
        display: "flex",
        textAlign: "center"
      })}
    >
      {children}
    </div>
  )
}

Documentation

Check out the demo and the documentation for live examples.

License

Distributed under the Apache License. See LICENSE for more information.

Acknowledgments

• Thanks to Austin Appleby for MurmurHash3.
• Thanks to Gary Court for murmurhash-js.
• Thanks to Andrey Sitnik for nanoid.