pleeease

1.1.x

Postprocess CSS with ease

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

Pleeease is a CSS post-processor. It simplifies the use of preprocessors and helps keep stylesheets as small as possible for a better maintenability. This means no more Compass for prefixes, no more rem mixins, and so on. Everything is getting simpler now and almost magic*.

Pleeease is also a great tool if you want to write plain CSS as it helps support older browsers. Just see how to configure it and let Pleeease do its job:

  • adds prefixes, based on Autoprefixer
  • provides fallbacks for rem unit, CSS3 pseudo-elements notation
  • adds opacity filter for IE8
  • converts CSS shorthand filters to SVG equivalent
  • packs same media-query in one @media rule
  • inlines @import styles
  • minifies the result

Pleeease.NEXT goes even further and allows you to use some of the future CSS's features today:

  • provides fallbacks for CSS custom properties (aka CSS variables) and custom media-queries
  • reduces calc() whenever possible
  • adds some features from CSS4 colors module: color(), hwb(), #RRGGBBAA notation and more

Note: be careful that Pleeease.NEXT's features are at risk. Learn more.

* not real magic though

Get started

The simplest way to use Pleeease is to use CLI (command-line interface) and a configuration file.

First, you have to install Node.js that usually comes with npm, its module manager. Then, install Pleeease globally on your system:

$ npm install -g pleeease

And that's all! You're ready to learn how to use it.

If you don't want to use CLI, you can also learn how to improve your workflow.

How it (simply) works

Pleeease does not modifiy your code. It simply creates another file that increases browser support. What you have to do is to configure the input and output files.

For example, let's say you have "styles.css" that you want to compile to "styles.fixed.css", create a new configuration file with:

{
  "in": "style.css",
  "out": "styles.fixed.css"
}

And run Pleeease

$ pleeease compile

If "styles.css" is:

@import url("bar.css");

*, *::after, *::before {
  box-sizing: border-box;
}

.a {
  font-size: 2rem;
  width: calc(100% - 50px);
}

@media (min-width: 36em) {
  .a {
    color: red;
  }
}

@media (min-width: 36em) {
  .b {
    color: blue;
  }
}

"styles.fixed.css" will be:

.bar {
  /* imported styles */
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.a {
  font-size: 32px;
  font-size: 2rem;
  width: -webkit-calc(100% - 50px);
  width: calc(100% - 50px);
}

@media (min-width: 36em) {
  .a {
    color: red;
  }
  .b {
    color: blue;
  }
}

Pretty cool, isn't it?

If you're ready to use it, you now need to learn how to create a configuration file, and then see full features support!