pretty-lights

Pretty Lights is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Pretty Lights has a great developer experience and great performance with heavy caching in production.


Installation

``sh
npm i --save pretty-lights
yarn add pretty-lights
`

Usage

To use it, import what you need.

$3

Use css to create class names with styles.

`js
import { css } from 'pretty-lights';

const className = css
color: hotpink;
;

const SomeComponent = ({ children }) => (


styled is a way to create React components that have styles attached to them.

`js
import { styled } from 'pretty-lights';

const Button = styled('button')
color: hotpink;
;

render(This is a hotpink button.);
`

$3

Pretty Lights has an optional Babel plugin that optimizes styles by compressing and hoisting them and creates a better developer experience with source maps and labels.

Instructions on using the Babel plugin: docs

Documentation

[https://nytimes.github.io/pretty-lights]

$3

- css
- cx
- keyframes
- injectGlobal
- Global

$3

- styled

$3

- ThemeProvider
- withTheme
- useTheme
- themeFn

$3

- extractCritical
- hydrate
- renderStylesToString

$3

- pretty-lights/jest

$3

- pretty-lights/babel

$3

- eslint-plugin-pretty-lights`