pleeease

Pleeease

Postprocess CSS with ease.

Pleeease is the best toolchain for your CSS. Just write DRY, future-proof CSS and Pleeease does the job for you.

For now, it adds prefixes, variables, pseudo-elements and rem unit support, packs same media-query in one @media rule, inline @import styles and minify the result.

Pleeease is based on PostCSS postprocessor.

http://pleeease.io

##Example

You write foo.css:

@import url("bar.css");
*,
*::after,
*::before {
	box-sizing: border-box;
}
:root {
	--color-primary: red;
	--color-secondary: blue;
}
.elem {
	font-size: 2rem;
	background: var(--color-primary);
	width: calc(100% - 50px);
}
@media screen and (min-width: 36em) {
	.elem {
		color: var(--color-secondary)
	}
}
@media screen and (min-width: 36em) {
	.classe {
		background: linear-gradient(green, blue);
	}
}

You get baz.css (with all options set to true, except minifier)

.bar {
	/* imported styles */
}
/* pseudo-elements are converted */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
:root {
	--color-primary: red;
	--color-secondary: blue;
}
.elem {
	font-size: 32px; /* fallback for rem support */
	font-size: 2rem;
	background: red; /* resolve variables */
	width: -webkit-calc(100% - 50px); /* add prefixes */
	width: calc(100% - 50px);
}
/* pack same media-queries */
@media screen and (min-width: 36em) {
	.elem {
		color: blue
	}
	.classe {
		background: -webkit-gradient(linear, left top, left bottom, from(green), to(blue));
		background: -webkit-linear-gradient(green, blue);
		background: linear-gradient(green, blue);
	}
}

##Installation

$ npm install pleeease

##Usage

###Programmatic

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!');
});

###CLI

Install Pleeease globally

$ npm install -g pleeease

Or use alternate syntax

$ node ./bin/pleeease

Compile all CSS files from the root projet to app.min.css

$ pleeease compile
$ pleeease compile *.css to app.min.css

Compile foo.css to bar.css

$ pleeease compile foo.css to bar.css

Compile multiple files to app.min.css

$ pleeease compile foo.css bar.css

Compile css/ folder to public/css/app.min.css (if folders doesn't exist, they will be created)

$ pleeease compile css/ to public/css/app.min.css

You can also watch (with the same syntax) for live compilation.

$ pleeease watch foo.css

Pleeease options can be set in a .pleeeaserc file (JSON-like), for example:

{
	"input": ["foo.css"],
	"output": "bar.css",
	"fallbacks": {
		"autoprefixer": true
	},
	"optimizers": {
		"minifier": false
	}
}

• input is an array of files (default [*.css])
• output is the path to the compiled file (default app.min.css)

For other options, see below.

###With Brunch

If you're using Brunch, see pleeease-brunch

##Options

These are the default options for now:

• fallbacks:
  • autoprefixer: true
  • variables: true
  • rem: true
  • pseudoElements: true
• optimizers:
  • import: true
  • minifier: true
  • mqpacker: true

All options can be disabled with false keyword or modified using each postprocessor options.

###fallbacks.autoprefixer

Add support for Autoprefixer that add vendor prefixes to CSS. Add options as an array:

// set options
var options = {
	fallbacks: {
		autoprefixer: ['last 4 versions', 'Android 2.3']
	}
}

// .pleeeaserc file
{
	"fallbacks": {
		"autoprefixer": ["last 4 versions", "Android 2.3"]
	}
}

See available options for Autoprefixer.

###fallbacks.variables

Add support for a "not so bad" CSS variables polyfill. There are no options.

###fallbacks.rem

Add support for pixrem that generates pixel fallbacks for rem units. Add options as an array:

// set options
var options = {
	fallbacks: {
		rem: ['16px', {replace: true}]
	}
}

// .pleeeaserc file
{
	"fallbacks": {
		"rem": ["16px", {"replace": true}]
	}
}

See available options for pixrem.

For now, this uses a fork from pixrem until the PR will be accepted or not.

###fallbacks.pseudoElements

Convert pseudo-elements using CSS3 syntax (two-colons notation like ::after, ::before, ::first-line and ::first-letter) with the old one, using only one colon (useful for IE8 support).

.element::after {
	/* you write */
}

.element:after {
	/* you get */
}

###optimizers.import

Inline @import styles with relative paths (absolute ones will be unaffected). @import including media-queries are not changed either.

You can use the CSS syntax you want:

@import "file.css";
@import url(file.css);
@import url("http://foo.com/bar.css"); /* not imported */
@import url("file.css") screen and (max-width: 35em); /* not imported */

###optimizers.minifier

Add support for CSS Wring, a CSS minifier. There are no options.

###optimizers.mqpacker

Add support for MQ Packer that pack same CSS media query rules into one media query rule. There are no options.

##More

More postprocess tasks are coming, mainly fallbacks (eg. CSS filters, rgba/hsla functions, etc.). If you want more, open an issue!

##Changelog

###0.3.0 (2014-05-19)

• Add @import processor
• Refactor default options

##Licence

MIT

Vincent De Oliveira

Changelog

0.3.0 - 2014-05-19

• Added:
  • @import processor
• Changed:
  • Refactor default options