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
npm install --save ceaseimport 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 StyledThis 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:
- 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 leveraging browser APIs for isolation in concert with standards-compliant CSS. See more about how it works in the Guide.