PostCSS
• like Babel, but for CSS
• what it basically does:
1. “understands” CSS code
2. changes it using plugins
Slide 3
Slide 3 text
Autoprefixer
.postcssrc.yml
plugin
configuration
Slide 4
Slide 4 text
Autoprefixer
Slide 5
Slide 5 text
Autoprefixer
Slide 6
Slide 6 text
Easing gradients
Slide 7
Slide 7 text
Easing gradients
Slide 8
Slide 8 text
Easing gradients
Slide 9
Slide 9 text
Easing gradients
Slide 10
Slide 10 text
Sass? Less? Stylus?
• you can combine them with PostCSS
• or create a subset of their features using plugins
Slide 11
Slide 11 text
Nesting
Slide 12
Slide 12 text
Nesting
Slide 13
Slide 13 text
Nesting
Slide 14
Slide 14 text
How PostCSS works
• reads CSS file content
• converts it to an abstract syntax tree (AST)
• plugins perform transformations on the AST
• new AST is converted back into CSS file content
Slide 15
Slide 15 text
CSS syntax
selector
property
value
declaration
rule
etc.
Slide 16
Slide 16 text
Abstract syntax tree (AST)
Slide 17
Slide 17 text
A good PostCSS plugin
• follows a specification (ideally)
• makes your code better without you being aware of it
• isn’t magic, doesn’t invent new syntax
Slide 18
Slide 18 text
Other use cases
for PostCSS
Slide 19
Slide 19 text
stylelint
• like ESLint, but for CSS
• used for detecting mistakes and discouraging patterns