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?

PostCSS in real life

By Mihael Tomić

Made with Slides.com

PostCSS in real life

What is PostCSS? What are pros and cons of preprocessors and PostCSS in project workflow and how to set up and run simple PostCSS gulp environment.

  • 1,881

More from Mihael Tomić