Skip to content

Simple, isolated CSS-in-JS for React components

License

Notifications You must be signed in to change notification settings

steobrien/cease

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Cease

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 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.


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:

  1. 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.
  2. 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.
  3. 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.


Documentation

About

Simple, isolated CSS-in-JS for React components

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published