pleeease

Pleeease is a Node.js application that easily process your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintenability. This means no more Compass for prefixes, no more rem mixins, and so on. Everything is getting simpler now and almost magic*.

Write plain CSS or choose your favorite CSS preprocessor (Sass, LESS or Stylus) and let Pleeease do its job:

• preprocess CSS (experimental)
• 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
• generates sourcemaps from pre- to postprocessors

Pleeease is the easy way to combine preprocessors and postprocessors.

Get started

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

Note that if you already have an advanced workflow, you can learn how to improve it.

To use CLI: First, you have to install Node.js that usually comes with npm, its module manager. Then, install pleeease-cli globally on your system:

$ npm install -g pleeease-cli

You're now ready to learn how to use it.

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!