PostCSS Crip

PostCSS plugin Shorthand properties for Crips that are too lazy to write.

Installation

$ npm install postcss-crip --save-dev

Quick Start

// Dependencies
const fs = require('fs');
const postcss = require('postcss');
const crip = require('postcss-crip');

// CSS to be processed
const css = fs.readFileSync('input.css', 'utf8');

// Process our crip css using postcss-crip
const output = postcss().use(crip()).process(css).css;

console.log('\n===>Output CSS:\n', output);

Or just:

const output = postcss(crip()).process(css).css;

Input:

/* Input example */
body {
  f: 24px/16px red normal Helvetica, serif;
  bg: #000 url('holy/crip/its/a/crapple.png') top left no-repeat;
  bgz: cover;
}

.crip {
  w: 100px;
  h: 100px;
  pos: relative;
  p: 10px;
  m: 20px;
}

Output:

/* Output example */
body {
  font: 24px/16px red normal Helvetica, serif;
  background: #000 url('holy/crip/its/a/crapple.png') top left no-repeat;
  background-size: cover;
}

.crip {
  width: 100px;
  height: 100px;
  position: relative;
  padding: 10px;
  margin: 20px;
}

See the full list of abbreviations

Options

(default: {})

You can create your own crip properties. Not all CSS properties are available in the module. So feel free to add your own.

const options = {
  az: ['azimuth'],
};

const output = postcss(crip(options)).process(css).css;

input.css

td {
  az: far-right;
}

output.css

td {
  azimuth: far-right;
}

Changelog

License