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
70
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
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
ニーリーにおけるプロダクトエンジニア
nealle
0
140
Claude Codeの使い方
ttnyt8701
1
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
490
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
860
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
GraphRAGの仕組みまるわかり
tosuri13
7
480
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
18
3.4k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
190
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing for Performance
lara
609
69k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Code Reviewing Like a Champion
maltzj
524
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Building Adaptive Systems
keathley
43
2.6k
GraphQLとの向き合い方2022年版
quramy
47
14k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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