Pretty-lights NPM

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