All the annoying CSS stuff we don't want to do in 1 tool.

One tool for stylesheets

Laziness tends to get in the way of progress, but it doesn’t have to! There is now a tool to help out with all of those steps in the CSS process that we don’t want to take. This is especially important now that we have mobile-first orientation in web-development. We should make a lot of optimizations for our code to decrease page loading time and make our users happy. New useful tools are created every day and staying up to date with all of them is really hard. That is exactly why programmers try to collect as many tools as possible, all in one. Pleeease is the perfect example of this kind of tool, it is actually a web-development Swiss Army knife.

What is it?

Pleeease is a CSS post-processor based on Node.js and it contains a lot of CSS tools in it. It can really do magic to make your stylesheets better for production usage and it also corrects the consequences of CSS pre-processors(sass, less or stylus) usage. You can use it as separate tool from Node prompt or as Gulp.js plugin in your tasks. To use it you must install Node.js to you system and Gulp.js if you prefer to use Pleeease automatically in your project task. It has simple JSON-like configuration file. If you need to change some defaults, just create .pleeeaserc file in your project folder or declare the settings directly in gulpfile if you use it.

What can it do?

The first thing that you can do is set in the config file the source and destination using “in” and “out” parameters. Example:

{
 "in": "*.CSS",
 "out": "app.min.CSS",
}

So let’s explore all of the amazing features that Pleeease has in it arsenal.

Autoprefixer

It sets the correct browser prefixes for CSS3 properties according to the browser support that you need and it sets only necessary prefixes with CanIUse database to help instead of some tools like Compass that set all of them. You can specify the version of browser, min or max version, browsers with some global usage percent and much more! All available settings can be found at the official GitHub page. By default Pleeease use all browsers with global usage more than 1%, the last 2 versions of all browsers, Firefox ESR and Opera 12.1. Example of post-processing with defaults:

background: linear-gradient(red, blue);

in the output file:

background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));

background: -webkit-linear-gradient(red, blue);

background: linear-gradient(red, blue);

Filters

CSS filters effects is a part of CSS3 draft and only WebKit-based browsers support them now. Firefox uses SVG fallback and old IE uses its own filters, modern IE(10-11), Opera mini and native Android browser have no support at all. But, you can use them now in parts of your project that will not affect the functionality, but add some wow-effect to your pages for users with “good” browsers.

Pleeease makes it simple to declare in your CSS, just use the standard syntax and the tool will add prefixes to it, create the svg fallback and old IE filter syntax if you set “filters”: {“oldIE”: true}, because by default it is set to false.

Example with blur filter:

Before

filter: blur(3px);

After

filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
-webkit-filter: blur(3px);
filter: blur(3px);
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=3);

rem units

CSS3 provides us with root em units that are close to standard em but only the font-size of root elements affect them; instead of the parent for em. Unfortunately, there is still lackluster browser support of it.  Pleeease finds all rem declarations in our files and adds a pixel fallback to them, so old browser users are still happy.

Before

h1 {
 font-size: 2rem;
}

After

h1 {
 font-size: 32px;
 font-size: 2rem;
}

Pseudo-elements

It converts CSS3 syntax for declaring pseudo-elements with the old ones for back-compatibility of old browsers like IE8, modern browsers support both syntaxes, for example ::after will be converted to :after to avoid bugs.

Opacity effect

Old IE’s have their own filter properties for an opacity effect, they do not have a friendly syntax, but Pleeease will help you with it. This tool automatically supplements all opacity properties with filter. Lets see how it works in practice:

Before

h2 {
 opacity: .25;
}

After

h2 {
 opacity: .25;
 filter: alpha(opacity=25);
}

Media query packer

Preprocessor tools provide us with the opportunity to write media query breakpoints directly with other CSS properties. This makes our code more readable and maintainable so we can see all of the element changes and throw all breakpoints in one place. But, the generated CSS after writing code this way is not as pretty as we’d like it to be. Our tool can help us in this situation again, it will analyze CSS code, find all @media declarations, match them and concatenate them in one so our CSS will be look great again and performance will grow too. Here is the simple example of how it works:

Before:

h1 {
font-size: 2em;
 @media screen and (min-width: 768px) {
   font-size: 1.5em;
 }
}

h2 {
font-size: 1.75em;
 @media screen and (min-width: 768px) {
   font-size: 1.25em;
 }
}

After:

h1 {
font-size: 2em;
}

h2 {
 font-size: 1.75em;
}

@media screen and (min-width: 768px) {

 h1 {
  }

 h2 {
  font-size: 1.25em;
 }

}

Source maps, imports, minifier

And finally Pleeease can inline all of your import declarations, generate source maps that allow you to use browser direct editing in debugging tools and minify CSS code to decrease output file size. I hope that it will have a lot of more useful features in future.

Why should I use it? 

There are several reasons, the first: it is just one tool for all stylesheets stuff except compilation of sass, less, stylus, whatever, but it works for specialized pre-processing tools. The second: there are even more features to come, because this list of functions is not totally complete, you can read about experimental features that will soon be added to Pleeease on their website. The Pleeease web-site also provides native CSS variables, colors functions and a lot of other new CSS features support. Also, this tool can decrease you gulpfile code if you build a project with Gulp because it replaces a lot of separate gulp plugins so you can process your style with only with 2 actions: preprocessing sass, less or stylus code and postprocessing CSS code. So enjoy your virtual all in one web development tool! I think it’s pretty cool! If you have any questions about how it all works, contact us, we'd like to help!