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
42
PostCSS
Matija Marohnić
May 21, 2019
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
130
Cypress vs. Playwright
silvenon
0
150
Studying Strapi: an open source head headless CMS
silvenon
0
33
CSS Specificity
silvenon
0
26
Make your JavaScript projects more accessible to newcomers
silvenon
0
71
React Hooks
silvenon
0
69
CSS Custom Properties
silvenon
0
39
Maintainable Integration Testing in React
silvenon
0
29
Writing Codemods with jscodeshift
silvenon
0
27
Other Decks in Programming
See All in Programming
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
2.7k
複数アプリケーションを育てていくための共通化戦略
irof
9
3.6k
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
260
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.9k
イベントストーミングから始めるドメイン駆動設計
jgeem
4
780
XSLTで作るBrainfuck処理系
makki_d
0
170
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
5
520
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
190
カクヨムAndroidアプリのリブート
numeroanddev
0
390
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
170
Gleamという選択肢
comamoca
6
640
PT AI без купюр
v0lka
0
220
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Code Review Best Practice
trishagee
68
18k
Scaling GitHub
holman
459
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Speed Design
sergeychernyshev
30
980
BBQ
matthewcrist
89
9.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
470
How STYLIGHT went responsive
nonsquared
100
5.6k
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