cease

{children}

Simple, isolated CSS-in-JS for React components.

Usage · Highlights · Why? · Documentation

Caution

Cease is currently experimental. It's working well for me so far, but I haven’t used it any serious production app yet, and you should be very careful before doing so. Please give it a try, and open an issue if you find anything broken or unexpected.

Usage

import css from "cease"
 
// define a React component
const Heading = ({ children }) => <h1>{children}</h1>
 
// apply your stylesheet to it
const Styled = css`
  h1 {
    color: red;
  }
`(Heading)
 
// use the styled version throughout your app
export default Styled

This component will now be rendered in Shadow DOM, insulating it from other styles in the app.

→ See more examples in the Guide…

Highlights

• tiny: 500 bytes, zero dependencies
• simple: powered by native browser APIs
• compilation-free: no build step required
• standard syntax: conventional CSS without gimmicks

Why?

CSS-in-JS is great. However, existing libraries have drawbacks:

1. Complication. There are many different ways to apply styles to components, leading to a large API surface area (and bugs). Additionally, compilers like Babel and Webpack are often required to run the code.
2. Lack of isolation. CSS scales best when components don't interfere with each other. Although many libraries promote scoping, edge cases always exist allowing styles to leak.
3. Performance gotchas. Common usage patterns can impact render latency.

Cease is an experiment to keep things simple by leveraging browser APIs for isolation in concert with standards-compliant CSS. See more about how it works in the Guide.

Documentation

• Guide
  • Installation
  • Styling simple components
  • How isolation works
  • Styling dynamic components
  • Performance
  • Processing & vendor prefixing
  • Caveats
• API Reference
  • css