PostCSS plugin Shorthand properties for Crips that are too lazy to write.
Installation
$ npm install postcss-crip --save-devQuick 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; }