PostCSS primer on how to use this CSS processing library and how to transition from SASS. Introduction to plugin architecture and how to extend with own plugins. Bring future CSS features to your workflow now. Held at FrontendUnited Conference in Ghent May 2016.

1. FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS
http://postcss.org/

2. FrontendUnited Conference | PostCSS Ghent 2016-06-27
There’s a new library every minute (second)
https://www.flickr.com/photos/ksayer/

3. FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS WHY?
● Fast
● Well adopted
● Modular - Just what you need
● Easy transition from SASS or ….
● Easy to extend
● The future NOW

4. FrontendUnited Conference | PostCSS Ghent 2016-06-27
FAST
https://www.flickr.com/photos/sponselli/

5. FrontendUnited Conference | PostCSS Ghent 2016-06-27
It’s fast
https://github.com/postcss/benchmark

6. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Well adopted
https://www.flickr.com/photos/robertdouglass/

7. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Well adopted
http://npm-stat.com/charts.html?package=postcss

8. FrontendUnited Conference | PostCSS Ghent 2016-06-27
autoprefixer
●
So you are probably already using PostCSS without knowing it.

9. FrontendUnited Conference | PostCSS Ghent 2016-06-27
How does it work?

10. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Execution

11. FrontendUnited Conference | PostCSS Ghent 2016-06-27
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)

12. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Examples
https://www.flickr.com/photos/debord/

13. FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS-Nested

14. FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSS MQPacker

15. FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSNano

16. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Easy transition

17. FrontendUnited Conference | PostCSS Ghent 2016-06-27
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?

18. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Easy to extend
https://www.flickr.com/photos/-imax-/

19. FrontendUnited Conference | PostCSS Ghent 2016-06-27
It’s just JavaScript
https://github.com/postcss/postcss-mixins

20. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Extend - new plugin
https://github.com/postcss/postcss-plugin-boilerplate

21. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Example: postcss-focus
https://github.com/postcss/postcss-focus

22. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Here be dragons
Nothing is stopping you to produce spaghetti.
https://www.flickr.com/photos/jeremyiah/

23. FrontendUnited Conference | PostCSS Ghent 2016-06-27
handle with care

24. FrontendUnited Conference | PostCSS Ghent 2016-06-27
The future - now!

25. FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSnext

26. FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSnext
http://cssnext.io/features/#custom-properties-var

27. FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSS is not a programming language
It really isn’t, however:
calc()
color()
var()
conditionals? :not, :matches

28. FrontendUnited Conference | PostCSS Ghent 2016-06-27
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

29. FrontendUnited Conference | PostCSS Ghent 2016-06-27
Andreas Sahle (@pixelmord)
@wunderkraut_de
https://wunder.io/de/