pretty-lights
v1.1.0
Published
CSS-in-JS with a reliable API
Downloads
61,425
Readme
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]