Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PostCSS
Search
Matija Marohnić
May 21, 2019
Programming
0
44
PostCSS
Matija Marohnić
May 21, 2019
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
140
Cypress vs. Playwright
silvenon
0
160
Studying Strapi: an open source head headless CMS
silvenon
0
38
CSS Specificity
silvenon
0
31
Make your JavaScript projects more accessible to newcomers
silvenon
0
75
React Hooks
silvenon
0
73
CSS Custom Properties
silvenon
0
40
Maintainable Integration Testing in React
silvenon
0
32
Writing Codemods with jscodeshift
silvenon
0
31
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
280
Introduce Hono CLI
yusukebe
6
3.1k
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
260
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
540
理論と実務のギャップを超える
eycjur
0
180
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
740
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Catch Up: Go Style Guide Update
andpad
0
250
技術的負債の正体を知って向き合う
irof
0
260
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Speed Design
sergeychernyshev
32
1.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Statistics for Hackers
jakevdp
799
220k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Being A Developer After 40
akosma
91
590k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How to Ace a Technical Interview
jacobian
280
24k
Transcript
PostCSS
PostCSS • like Babel, but for CSS • what it
basically does: 1. “understands” CSS code 2. changes it using plugins
Autoprefixer .postcssrc.yml plugin configuration
Autoprefixer
Autoprefixer
Easing gradients
Easing gradients
Easing gradients
Easing gradients
Sass? Less? Stylus? • you can combine them with PostCSS
• or create a subset of their features using plugins
Nesting
Nesting
Nesting
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
CSS syntax selector property value declaration rule etc.
Abstract syntax tree (AST)
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
Other use cases for PostCSS
stylelint • like ESLint, but for CSS • used for
detecting mistakes and discouraging patterns
stylelint-a11y
stylelint-a11y
postcss.org