postcss - process css in a modular way

FrontendUnited Conference | PostCSS Ghent 2016-06-27

PostCSS

http://postcss.org/

http://postcss.org/


There’s a new library every minute (second)

https://www.flickr.com/photos/ksayer/


PostCSS WHY?

● Fast ● Well adopted ● Modular - Just what you need ● Easy transition from SASS or …. ● Easy to extend ● The future NOW


FAST

https://www.flickr.com/photos/sponselli/


It’s fast

https://github.com/postcss/benchmark

https://github.com/postcss/benchmark


Well adopted

https://www.flickr.com/photos/robertdouglass/


Well adopted

http://npm-stat.com/charts.html?package=postcss

http://npm-stat.com/charts.html?package=postcss


autoprefixer

●So you are probably already using PostCSS without knowing it.


How does it work?


Execution


Execution

var postCSS = require('postcss');

var inputCSS = '.myClass { color: red}' //your CSS

var plugins = [ A, B, C, D, E, F, G, H];

postCSS(plugins)

.process(inputCSS)

.then(doStuff)


Examples

https://www.flickr.com/photos/debord/


PostCSS-Nested


CSS MQPacker


CSSNano


Easy transition


From SCSS to PostCSS

●https://github.com/postcss/postcss-import

●https://github.com/postcss/postcss-simple-vars

●https://github.com/postcss/postcss-nested

●https://github.com/postcss/postcss-mixins

● You said goodbye to compass a while ago, right?

https://github.com/postcss/postcss-import

https://github.com/postcss/postcss-simple-vars

https://github.com/postcss/postcss-nested

https://github.com/postcss/postcss-mixins


Easy to extend

https://www.flickr.com/photos/-imax-/


It’s just JavaScript




Extend - new plugin

https://github.com/postcss/postcss-plugin-boilerplate

https://github.com/postcss/postcss-plugin-boilerplate


Example: postcss-focus

https://github.com/postcss/postcss-focus

https://github.com/postcss/postcss-focus


Here be dragonsNothing is stopping you to produce spaghetti.

https://www.flickr.com/photos/jeremyiah/


handle with care


The future - now!


CSSnext


CSSnext

http://cssnext.io/features/#custom-properties-var

http://cssnext.io/features/#custom-properties-var


CSS is not a programming language

It really isn’t, however:

calc()

color()

var()

conditionals? :not, :matches


LINKS

https://www.smashingmagazine.com/2015/12/introduction-to-postcss/ https://github.com/postcss/postcss https://github.com/postcss/postcss/blob/master/docs/plugins.md http://postcss.parts/ https://github.com/wunderkraut/gulp-task-postcss

https://www.smashingmagazine.com/2015/12/introduction-to-postcss/

https://github.com/postcss/postcss

https://github.com/postcss/postcss/blob/master/docs/plugins.md

http://postcss.parts/

https://github.com/wunderkraut/gulp-task-postcss


Andreas Sahle (@pixelmord) @wunderkraut_de

https://wunder.io/de/

https://wunder.io/de/

postcss - process css in a modular way

Internet