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
43
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
30
Make your JavaScript projects more accessible to newcomers
silvenon
0
73
React Hooks
silvenon
0
72
CSS Custom Properties
silvenon
0
40
Maintainable Integration Testing in React
silvenon
0
31
Writing Codemods with jscodeshift
silvenon
0
29
Other Decks in Programming
See All in Programming
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.3k
Namespace and Its Future
tagomoris
6
700
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.2k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
速いWebフレームワークを作る
yusukebe
5
1.7k
Swift Updates - Learn Languages 2025
koher
2
490
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
540
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
180
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
590
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
400
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
Designing Experiences People Love
moore
142
24k
Automating Front-end Workflow
addyosmani
1370
200k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Context Engineering - Making Every Token Count
addyosmani
3
54
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Speed Design
sergeychernyshev
32
1.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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