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
Reading Rails 1.0 Source Code
okuramasafumi
0
250
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
testingを眺める
matumoto
1
140
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Statistics for Hackers
jakevdp
799
220k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Documentation Writing (for coders)
carmenintech
74
5k
Being A Developer After 40
akosma
90
590k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
KATA
mclloyd
32
14k
Balancing Empowerment & Direction
lara
3
620
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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