Satchel-css NPM

Satchel

Satchel is a tiny collection of CSS-in-JS utilities that automates common patterns, saves time, encourages consistency, and makes developers' lives easier.

Features

All of Satchel’s utilities return plain strings, so they work almost everywhere. The only prerequisite is that your environment supports nested CSS selectors. Popular CSS-in frameworks like styled-components, Emotion, Linaria, and any other tool built on top of the Stylis preprocessor work out of the box.

Installation & Usage

Install Satchel from NPM

npm i satchel-css

Import Satchel’s utilities and embed them in CSS template strings by wrapping them in ${ } braces.

While Satchel’s utilities will work in plain strings, to support nested selectors out of the box you’ll probably want to use them alongside a CSS-in-JS library like Emotion or styled-components.

import { css } from '@emotion/core';
import { reset, fluid } from 'satchel-css';

const buttonStyles = css`
  ${reset('button')}
  background: blue;
  color: white;
`;

const headingStyles = css`
  ${fluid('font-size', '2rem', '3.5rem')};
`;