PostCSS in real life

Mihael Tomić | @tomic_mihael

http://tinyurl.com/pcss-irl

Live presentation

@tomic_mihael

Just because...

...stuff.

So, what does PostCSS do?

@tomic_mihael

Nothing...

...and everything!

@tomic_mihael

It's not post-processing if it happens before hitting the browser.

Hugo Giraudel

What is PostCSS anyway?

PostCSS is a tool to transform styles with JS plugins.
These plugins can support variables and mixins, transpile future CSS syntax, nesting, minification, inline images, and more.
2014 - little under 1.4 million downloads in total
January - June 2015 - over 3.8 million downloads.
Over 2 million downloads per month.
14 500 000 downloads for entire project history.

1

@tomic_mihael

CSS Pre-processors

Pros

Syntax is very clear.
Many possibilities with functions.

Cons

Large systems with monolithic architecture.
Huge build setup.

@tomic_mihael

PostCSS

Pros

Modularity – adding your own features.
Awesome optimization with pipeline.
Plugins ecosystem.

Cons

Tendencies to become a pre-processor.

@tomic_mihael

Performance

@tomic_mihael

PostCSS

libsass

less

stylus

ruby sass

1101 ms

269 ms

179 ms

77 ms

39 ms

Source: Preprocessors benchmark

Tools

Node.js
Gulp.js
npm (node package manager)
CSS

@tomic_mihael

Plugins

Over 200 plugins and growing.
Small chunks of JS code:
- postcss-simple-vars – 122 LOC *
- postcss-nested - 88 LOC *
- postcss-mixins - 174 LOC *
Maintainable code.
Simple and easy to write plugins

@tomic_mihael

* At the moment of presentation

Usage

1. Add PostCSS to your build tool.

@tomic_mihael

var gulp = require('gulp'),
    postcss = require('gulp-postcss');

2. Select plugins and add them to your PostCSS process.

var gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    // PostCSS plugins
    mixins = require('postcss-mixins'),
    simplevars = require('postcss-simple-vars'),
    nested = require('postcss-nested'),
    atImport = require('postcss-import');

Usage

3. Setup gulp task to dist your CSS.

@tomic_mihael

// PostCSS build task 
gulp.task('cssBuild', function (){
  var postCSSPlugins = [
    // Import CSS file to be built with it's imports
    atImport ({
      from: 'src/css/app.css'
    }),
    // Add mixin PostCSS support
    mixins,
    // Add variables PostCSS support
    simplevars,
    // Add nesting PostCSS support
    nested
  ];
  return gulp.src('src/css/app.css')
    // Add PostCSS plugins to pipe
    .pipe(postcss(postCSSPlugins))
    // Processed folder file destination
    .pipe(gulp.dest('dist/css'))
});

Usage

4. Setup gulp task and watch your CSS changes.

@tomic_mihael

// Gulp watch task
gulp.task('styles', ['cssBuild',],
  function () {
    gulp.watch('src/css/*.css', ['cssBuild']);
  }
)

* There are plugins for Grunt, Gulp, webpack, Broccoli, Brunch and ENB.

@tomic_mihael

Arigato? Origano? Thank you!

Questions?