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
30
Make your JavaScript projects more accessible to newcomers
silvenon
0
74
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
30
Other Decks in Programming
See All in Programming
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
580
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
200
Catch Up: Go Style Guide Update
andpad
0
230
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
320
Developer Joy - The New Paradigm
hollycummins
1
200
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Devoxx BE 2025 Loom lab
josepaumard
0
110
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
Go言語はstack overflowの夢を見るか?
logica0419
0
480
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5.1k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
280
品質ワークショップをやってみた
nealle
0
560
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Designing for Performance
lara
610
69k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
It's Worth the Effort
3n
187
28k
Automating Front-end Workflow
addyosmani
1371
200k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
BBQ
matthewcrist
89
9.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
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