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
28
Make your JavaScript projects more accessible to newcomers
silvenon
0
72
React Hooks
silvenon
0
71
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
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
580
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Deep Dive into ~/.claude/projects
hiragram
10
1.9k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
590
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
590
ニーリーにおけるプロダクトエンジニア
nealle
0
630
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
520
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
520
Featured
See All Featured
Practical Orchestrator
shlominoach
188
11k
How to Ace a Technical Interview
jacobian
277
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Scaling GitHub
holman
459
140k
Building an army of robots
kneath
306
45k
The Cult of Friendly URLs
andyhume
79
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Adaptive Systems
keathley
43
2.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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