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.
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.
- 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.
- 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.
- Primary
cssfunction 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.
Add @ptb/style to your project:
npm install @ptb/style # or: yarn add @ptb/styleImport 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>
)
}Check out the demo and the documentation for live examples.
Distributed under the Apache License. See LICENSE for more information.
- Thanks to Austin Appleby for MurmurHash3.
- Thanks to Gary Court for murmurhash-js.
- Thanks to Andrey Sitnik for nanoid.