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

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.

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.

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

Core API

• css
• cx
• keyframes
• injectGlobal
• Global

Styled Components

• styled

Theming

• ThemeProvider
• withTheme
• useTheme
• themeFn

SSR

• extractCritical
• hydrate
• renderStylesToString

Jest

• pretty-lights/jest

Babel

• pretty-lights/babel

ESLint

• eslint-plugin-pretty-lights