Blogs

CSS Post-Processing With Pleeease

Craig Buckler
Share

Pre-processors such as Sass, Less, and Stylus have revolutionized CSS development. If you’re a pre-processor skeptic like I was, try using Sass for a project or two: you won’t ever return to raw CSS again. Despite this attention, developers rarely consider post-processors. Pleeease could change that perception…

What’s a CSS Post-Processor?

A post-processor applies changes to a CSS file after it’s been hand-coded or generated by a pre-processor. A basic example is minification: your CSS file is parsed to remove white space, comments, and unnecessary dimensions, e.g. margin: 0px 0px 0px 0px; becomes margin:0;. The result is saved to a new, smaller file, e.g. styles.min.css.

Pleeease is a Node.js application that combines a selection of great post-processors into one handy command-line tool that works on any platform.

Command-line? No Thanks!

Don’t be afraid; Pleeease is not complicated to install or run. That said, if you cannot bear the thought of typing a few commands, try the Pleeease online playground; you won’t get all the benefits but you can test the system using cut-and-paste.

Installing Pleeease

First, install Node.js from nodejs.org. You can download installers for Windows, Mac OS, and Linux or use a package manager.

Next, open a command-line/terminal window and enter the following command on Windows:

npm install -g pleeease

or, on Mac/Linux:

sudo npm install -g pleeease

Note the unique spelling of “pleeease”, which has four e’s with three in the middle.

Using Pleeease

From the command line you now need to navigate using the cd command to a web project folder where your CSS files reside. Assuming you have a folder named ‘myproject\styles’ in the Windows C: drive, you’d enter:

c:
cd \myproject\styles

or, on Mac/Linux, if you have a ‘myproject/styles’ folder in your home folder, you’d enter:

cd ~/myproject/styles

Normally the prompt will change to show which folder you’re in. To run Pleeease, now enter:

pleeease compile

By default, Pleeease will join all the CSS files into one and create a new app.min.css file in the same folder. Open that file in an editor to see what has been done.

What Does Pleeease Do?

Pleeease runs the following processors on your CSS source.

Inline @import
If you’re not using a pre-processor you may have @import declarations to include additional stylesheets. Pleeease will inline all files to create a single stylesheet that reduces HTTP requests and bandwidth.

Autoprefixer
The amazing Autoprefixer allows you to forget about vendor prefixes forever. You state which browsers must be supported and autoprefixer adds appropriate prefixes using information from caniuse.com. By default, Pleeease adds prefixes for Firefox ESR, Opera 12.1, the last 2 versions of every browser, and those with a market share greater than 1%.

Personally, I wouldn’t bother with pre-processor prefix-generating mixins or autoprefixer editor plugins; Pleeease will add support as necessary every time you run it. The number of vendor prefixes will therefore reduce over time.

Pack media-queries into single rules
I love this. You probably have the same media query rules littered throughout your CSS. Pre-processors encourage you to split CSS into modular files, which exacerbates the problem. Pleeease uses MQPacker to apply all declarations in a single media query. Be wary this can change the CSS application order, so testing is vital.

rem fallback
rem font size units are relative to the root element (see The New CSS3 Relative Font Sizing Units). Unfortunately, the unit fails in IE8 and below so Pleeease applies a pixel fallback based on a default 16px font-size.

Minify the code
Pleeease uses CSSWring to remove every unnecessary byte from your CSS. You’ll be glad to hear it doesn’t suffer the minification muddles found in some other systems.

Miscellaneous changes
If that’s not enough, Pleeease can also:

  • apply CSS3 filters such as grayscale or blur using SVG fallbacks
  • convert 2-colon pseudo elements such as ::after, ::before and ::first-line to a single colon for IE8 compatibility
  • add IE8 filters for opacity
  • generate source maps

Finally, there are some experimental features that can be enabled to transform native CSS variables, apply CSS4 color functions, and resolve calc() equations where possible.

Custom Configurations

If you’re lucky, Pleeease will work without additional configuration — but you can change options by creating a .pleeeaserc file in your stylesheet folder. This contains JSON code that looks like the following:

{
	"in": ["styles.css", "extra.css"],
	"out": "styles.min.css",
	"import": true,
	"autoprefixer": {"browsers": ["last 2 versions"]},
	"mqpacker": true,
	"minifier": true,
	"rem": ["14px", {"replace": false}],
	"pseudoElements": true,
	"opacity": false,
	"filters": false,
	"sourcemaps": false,
	"next": false
}

In this example, we’ll combine styles.css and extra.css in that order, ignoring all other CSS files to generate a file named styles.min.css. @imports will be inlined, prefixes will be added for the last two versions of every browser, identical media queries are merged, and the result is minified. We’re not overly concerned with IE8,l but we’ll replace pseudo-element double colons and provide rem unit fallbacks based on a base size of 14px.

The Pleeease documentation describes all the options.

File Watching

If you don’t want to type pleeease compile every time you make a CSS update, run the following command:

pleeease watch

Pleeease will monitor all input files and re-generate the output file when a change occurs. Press Ctrl/Cmd + C to stop the process.

Grunt, Gulp, and Brunch Integration

If you’ve adopted Grunt, Gulp, or Brunch as build tools, you can also use Pleeease within your workflow. Admittedly, you could set up each Pleeease component separately, but it would take longer and not every post-processor is available for all tools. For more information, refer to the Pleeease workflow documentation.

Pleeease may not do anything you couldn’t have done before, but it’s packaged so it’s easy to use and works with any project regardless of age or technology stack. Recommended.