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
30
PostCSS
Matija Marohnić
May 21, 2019
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
94
Cypress vs. Playwright
silvenon
0
120
Studying Strapi: an open source head headless CMS
silvenon
0
23
CSS Specificity
silvenon
0
20
Make your JavaScript projects more accessible to newcomers
silvenon
0
47
React Hooks
silvenon
0
57
CSS Custom Properties
silvenon
0
25
Maintainable Integration Testing in React
silvenon
0
15
Writing Codemods with jscodeshift
silvenon
0
18
Other Decks in Programming
See All in Programming
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
150
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Ruby GitHub Packages
bkuhlmann
0
640
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
Site Reliability Engineering for GMO
pyama86
8
1.1k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
Netty Chicago Java User Group 2024-04-17
sullis
0
200
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Making Projects Easy
brettharned
109
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Debugging Ruby Performance
tmm1
70
11k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
Product Roadmaps are Hard
iamctodd
45
9.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Six Lessons from altMBA
skipperchong
22
3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Automating Front-end Workflow
addyosmani
1357
200k
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