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 thecd
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
orblur
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
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. @import
s 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 typepleeease 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.Frequently Asked Questions on CSS Post-Processing
What is the difference between CSS pre-processing and post-processing?
CSS pre-processing involves writing CSS in an extended language that allows for variables, nesting, and mixins. This code is then compiled into standard CSS. On the other hand, CSS post-processing takes standard CSS and then applies transformations to it. This can include tasks like auto-prefixing, minification, and more. While pre-processing helps in writing more maintainable and DRY (Don’t Repeat Yourself) code, post-processing helps in optimizing the CSS for production.
Why should I use a CSS post-processor?
CSS post-processors can help optimize your CSS for production. They can automatically add vendor prefixes, minify your CSS, and even optimize your CSS for better performance. This can save you a lot of time and effort, and ensure that your CSS works across different browsers and devices.
How does Pleeease work as a CSS post-processor?
Pleeease is a CSS post-processor that helps you write future-proof CSS. It takes your standard CSS and applies a series of transformations to it. These transformations include auto-prefixing, minification, and more. Pleeease also allows you to use next-generation CSS features today, by transforming them into CSS that browsers can understand.
What are vendor prefixes and why are they important?
Vendor prefixes are a way for browser makers to add new CSS features before they become part of the official CSS specifications. They are important because they allow developers to use new CSS features while still ensuring compatibility with older browsers. However, managing vendor prefixes can be a hassle, which is why CSS post-processors like Pleeease can automatically add them for you.
How can I use Pleeease in my project?
To use Pleeease in your project, you first need to install it using npm. Once installed, you can use it in your build process to transform your CSS. Pleeease can be integrated with task runners like Gulp and Grunt, or used directly from the command line.
What are the benefits of using CSS post-processors like Pleeease over traditional CSS?
CSS post-processors like Pleeease offer several benefits over traditional CSS. They can automatically add vendor prefixes, minify your CSS, and optimize it for better performance. They also allow you to use next-generation CSS features today, by transforming them into CSS that browsers can understand.
Can I use CSS pre-processors and post-processors together?
Yes, you can use CSS pre-processors and post-processors together. In fact, they complement each other quite well. You can use a pre-processor to write more maintainable and DRY code, and then use a post-processor to optimize that code for production.
What are some alternatives to Pleeease for CSS post-processing?
There are several alternatives to Pleeease for CSS post-processing. These include tools like Autoprefixer, cssnano, and PostCSS. Each of these tools has its own strengths and weaknesses, so you should choose the one that best fits your needs.
How does Pleeease handle errors in my CSS?
Pleeease is designed to be very forgiving of errors in your CSS. If it encounters an error, it will try to fix it automatically. If it can’t fix the error, it will simply ignore it and move on to the next part of your CSS.
Can I customize the transformations that Pleeease applies to my CSS?
Yes, you can customize the transformations that Pleeease applies to your CSS. Pleeease provides a configuration file where you can specify which transformations to apply, and how to apply them. This allows you to tailor Pleeease to your specific needs.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.