♿️ PostCSS plugin for Crips that are too lazy to write.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
gulpfile.js
index.js
package.json

README.md

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