pleeease

3.x.x

Process CSS with ease

Workflow

Node.js

You can use the process function with 2 parameters:

It returns fixed CSS as string.

var pleeease = require('pleeease'),
    fs       = require('fs');

var css = fs.readFileSync('app.css', 'utf8');

// define options here
var options = {};

var fixed = pleeease.process(css, options);

fs.writeFile('app.min.css', fixed, function (err) {
  if (err) {
    throw err;
  }
  console.log('File saved!');
});

You can also use Pleeease as a PostCSS plugin. For example, if you want to use another minifier:

var postcss  = require('postcss'),
    pleeease = require('pleeease');

var options = {
  minifier: false
};

var fixed = postcss().use(pleeease(options)).use(minifier).process('a{}').css;

With Brunch

If you're using Brunch (good point), you may want to use brunch-pleeease.

Add this plugin as a dependency in your package.json

{
  "dependencies": {
    "brunch-pleeease": "^1.0.0"
  }
}

Or install it:

$ npm install --save brunch-pleeease

Now, the module does its job. You can set it in Brunch configuration file, for example:

plugins:
  pleeease:
    autoprefixer: true
    rem: false
    pseudoElements: false
    import: true
    minifier: true
    mqpacker: true

Note that brunch-pleeease is an optimizer plugin, so it only works when optimize: true is set. The --production environment activates optimizers.

If you want sourcemaps, from CSS or from a preprocessor like Sass, you can activate them in configuration file, like so:

sourceMaps: true
plugins:
  pleeease:
    sourcemaps: true

The first sourceMaps option enable sourcemaps from Brunch (for Sass brunch for example). The second one plugins.pleeease.sourcemaps enable sourcemaps for Pleeease (basically @import'ed file). You can now have a full sourcemaps chain!

You can also use the pre-configured Pleeease skeleton.

With Gulp

You can use gulp-pleeease. Here is a Gulpfile.js example, with Sass and sourcemaps support:

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var pleeease = require('gulp-pleeease');

var SassOptions = {
    sourcemap: true,
    style: "compact"
};
// set minifier to false to keep Sass sourcemaps support
var PleeeaseOptions = {
    optimizers: {
        minifier: false
    }
};

gulp.task('awesome_css', function () {
    gulp.src('./scss/main.scss')
        .pipe(sass(SassOptions))
        .pipe(pleeease(PleeeaseOptions))
        .pipe(gulp.dest('./public'));
});

Note: This is based on @ddprrt's article for sourcemaps support. You can also use gulp-sass (based on libsass) if you don't need sourcemaps.

With Grunt

You can use grunt-pleeease.