Simple and isolated CSS-in-JS for React components

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