PostCSS

Transcript

1. PostCSS
2. PostCSS • like Babel, but for CSS • what it basically does: 1. “understands” CSS code 2. changes it using plugins
3. Autoprefixer .postcssrc.yml plugin configuration
4. Autoprefixer
5. Autoprefixer
6. Easing gradients
7. Easing gradients
8. Easing gradients
9. Easing gradients
10. Sass? Less? Stylus? • you can combine them with PostCSS • or create a subset of their features using plugins
11. Nesting
12. Nesting
13. Nesting
14. 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
15. CSS syntax selector property value declaration rule etc.
16. Abstract syntax tree (AST)
17. 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
18. Other use cases for PostCSS
19. stylelint • like ESLint, but for CSS • used for detecting mistakes and discouraging patterns
20. stylelint-a11y
21. stylelint-a11y
22. postcss.org