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
35
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
30
Writing Codemods with jscodeshift
silvenon
0
27
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
650
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
730
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
720
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
PicoRuby on Rails
makicamel
2
130
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.7k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
Team operations that are not burdened by SRE
kazatohiei
1
310
Featured
See All Featured
Bash Introduction
62gerente
614
210k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
Building Adaptive Systems
keathley
43
2.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Embracing the Ebb and Flow
colly
86
4.7k
Optimizing for Happiness
mojombo
379
70k
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