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?