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
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
130
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
9
3.8k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
1
120
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
はじめてのMaterial3 Expressive
ym223
2
260
私の後悔をAWS DMSで解決した話
hiramax
4
210
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
310
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
Building Applications with DynamoDB
mza
96
6.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Faster Mobile Websites
deanohume
309
31k
The Invisible Side of Design
smashingmag
301
51k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Git: the NoSQL Database
bkeepers
PRO
431
66k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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