React-scoped-css NPM

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 probably shouldn’t either. Please try it out though, and open an issue if you find anything broken.

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: under 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:

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.
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.
Performance gotchas. Common usage patterns can impact render latency.

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