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
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
6k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
170
技術同人誌をMCP Serverにしてみた
74th
1
660
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
270
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.7k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.1k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
2
110
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
840
Team operations that are not burdened by SRE
kazatohiei
1
320
型で語るカタ
irof
0
200
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Producing Creativity
orderedlist
PRO
346
40k
Practical Orchestrator
shlominoach
189
11k
RailsConf 2023
tenderlove
30
1.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building Applications with DynamoDB
mza
95
6.5k
Unsuck your backbone
ammeep
671
58k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Making Projects Easy
brettharned
116
6.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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