postcss-crip

PostCSS plugin Shorthand properties for Crips too lazy to write

Usage no npm install needed!

<script type="module">
  import postcssCrip from 'https://cdn.skypack.dev/postcss-crip';
</script>

README

PostCSS Crip Build Status

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

Installation

$ npm install postcss-crip --save-dev

Quick Start

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

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

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

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

Or just:

var 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.

var options = {
  'az': ['azimuth']
}

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

input.css

td { 
  az: far-right 
}

output.css

td { 
  azimuth: far-right 
}

Usage

Grunt

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    postcss: {
      options: {
        processors: [
          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin
          require('postcss-crip')(),
        ]
      },
      dist: {
        src: ['src/*.css'],
        dest: 'build/grunt.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);
}

Gulp

var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var crip = require('postcss-crip')
var autoprefixer = require('autoprefixer-core')

gulp.task('default', function () {
    var processors = [
        autoprefixer({ browsers: ['> 0%'] }), //Other plugin
        crip()
    ];
    gulp.src('src/*.css')
        .pipe(postcss(processors))
        .pipe(rename('gulp.css'))
        .pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);

Contributing

Fork, work on a branch, install dependencies & run tests before submitting a PR.

$ git clone https://github.com/YOU/postcss-crip.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License