Simple and isolated CSS-in-JS for React components

by React

cease

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

npm install --save cease

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

GitHub