npm

Need private packages and team management tools?Check out npm Orgs. »

css-zero

0.2.2 • Public • Published

CSS-Zero

Features

  • All of the benefits of writing CSS-in-JS, but with zero runtime code
  • Write your styles with familiar CSS Syntax
  • Generates optimized, atomic CSS with no duplicated style rules
  • Style resolution based on order of application, rather than the cascade
  • Zero config server-side rendering for applications that support CSS Modules
  • Easy composition of styles, with property name collisions eliminated via static analysis
  • Theme support via CSS variables, allowing the cost of theming to be proportional to the size of the color palette
  • Fast parsing of styles, with CSS downloaded and parsed separately from JS.
  • Works without JavaScript, as styles are extracted at build-time.

These benefits are in addition to the more general benefits of using CSS-in-JS:

  • Scoped selectors to avoid accidental collision of styles
  • Styles co-located with your component reduces context switching
  • Refactor with confidence when changing/removing styles
  • Detect unused styles with EsLint, just like normal JS variables
  • Declarative dynamic styling with React

Installation

Since CSS-Zero has no runtime, it can be installed purely as a devDependency:

npm install css-zero --save-dev

Setup

The simplest way to run CSS-Zero in a React application is using our Babel Macro:

import {css, styled} from 'css-zero/macro';

For applications created using Create React App (which supports both Babel Macros and CSS Modules out-of-the-box), no further setup or configuration is needed.

For usage with other front-end frameworks, CSS-Zero can be set up with our babel-plugin.

Syntax

The basic usage of CSS-Zero looks like this:

import {css, styles} from 'css-zero';
 
// Write your styles using the `css` tag
const blue = css`
  color: blue;
`;
 
const base = css`
  color: red;
  font-size: 16px;
`;
 
// then use the `styles` helper to compose your styles and generate class names
export default props => <div className={styles(base, props.isBlue && blue)} />;
 
      ↓ ↓ ↓ ↓ ↓ ↓ Compiles to  ↓ ↓ ↓ ↓ ↓ ↓
 
export default props => <div className={(props.isBlue ? "x1vong5g" : "x1dqz7z3") + " " + "x1e4w2a9"} />
 
// along with a the following .zero.css file:
.x1vong5g {color:blue}
.x1dqz7z3 {color:red}
.x1e4w2a9 {font-size:16px}

Demo

Edit CSS-Zero Create React App Example

Inspiration

install

npm i css-zero

Downloadsweekly downloads

33

version

0.2.2

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability