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