pretty-lights/README.md

CSS-in-JS with a reliable API

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

[![Build Status](https://drone.dv.nyt.net/api/badges/nytimes/pretty-lights/status.svg)](https://drone.dv.nyt.net/nytimes/pretty-lights)

## Installation

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

## Usage

To use it, import what you need.

### `css`

Use `css` to create class names with styles.

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

const className = css`
  color: hotpink;
`;

const SomeComponent = ({ children }) => (
  <div className={className}>Some hotpink text.{children}</div>
);

const anotherClassName = css({
  textDecoration: 'underline',
});

const AnotherComponent = () => <div className={anotherClassName}>Some text with an underline.</div>;
```

### `styled`

`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(<Button>This is a hotpink button.</Button>);
```

### `pretty-lights/babel`

Pretty Lights has an optional [Babel](https://babeljs.io/) 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](https://nytimes.github.io/pretty-lights/docs/integrations/babel)

## Documentation

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

### Core API

- [`css`](https://nytimes.github.io/pretty-lights/docs/api/css)
- [`cx`](https://nytimes.github.io/pretty-lights/docs/api/cx)
- [`keyframes`](https://nytimes.github.io/pretty-lights/docs/api/keyframes)
- [`injectGlobal`](https://nytimes.github.io/pretty-lights/docs/api/injectGlobal)
- [`Global`](https://nytimes.github.io/pretty-lights/docs/api/global)

### Styled Components

- [`styled`](./src/styled/README.md)

### Theming

- [`ThemeProvider`](https://nytimes.github.io/pretty-lights/docs/theming/ThemeProvider)
- [`withTheme`](https://nytimes.github.io/pretty-lights/docs/theming/withTheme)
- [`useTheme`](https://nytimes.github.io/pretty-lights/docs/theming/useTheme)
- [`themeFn`](https://nytimes.github.io/pretty-lights/docs/theming/themeFn)

### SSR

- [`extractCritical`](https://nytimes.github.io/pretty-lights/docs/ssr/extractCritical)
- [`hydrate`](https://nytimes.github.io/pretty-lights/docs/ssr/hydrate)
- [`renderStylesToString`](https://nytimes.github.io/pretty-lights/docs/ssr/renderStylesToString)

### Jest

- [`pretty-lights/jest`](https://nytimes.github.io/pretty-lights/docs/integrations/jest)

### Babel

- [`pretty-lights/babel`](https://nytimes.github.io/pretty-lights/docs/integrations/babel)

### ESLint

- [`eslint-plugin-pretty-lights`](https://nytimes.github.io/pretty-lights/docs/integrations/eslint)