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
34
PostCSS
Matija Marohnić
May 21, 2019
Tweet
Share
More Decks by Matija Marohnić
See All by Matija Marohnić
Introduction to Remix
silvenon
0
120
Cypress vs. Playwright
silvenon
0
140
Studying Strapi: an open source head headless CMS
silvenon
0
27
CSS Specificity
silvenon
0
21
Make your JavaScript projects more accessible to newcomers
silvenon
0
62
React Hooks
silvenon
0
62
CSS Custom Properties
silvenon
0
32
Maintainable Integration Testing in React
silvenon
0
21
Writing Codemods with jscodeshift
silvenon
0
19
Other Decks in Programming
See All in Programming
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
150
知られざるNaNの世界
hole
3
1.1k
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
200
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
1
240
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
950
perl for shell, awk and sed programmers
mackee
2
1k
Workflow automationによるインシデント原因調査の自動化
showwin
1
110
Debugging: A Few Things You Should Know
jmatsu
1
140
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
1
330
Piniaの現状と今後
waka292
5
1.1k
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
410
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
3
150
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Typedesign – Prime Four
hannesfritz
39
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
How STYLIGHT went responsive
nonsquared
95
5.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Statistics for Hackers
jakevdp
796
220k
Visualization
eitanlees
143
15k
Music & Morning Musume
bryan
46
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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