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
44
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
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
Devoxx BE - Local Development in the AI Era
kdubois
0
130
XP, Testing and ninja testing ZOZ5
m_seki
3
660
チームの境界をブチ抜いていけ
tokai235
0
180
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
230
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
420
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
920
株式会社 Sun terras カンパニーデック
sunterras
0
310
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
1
320
明日から始めるリファクタリング
ryounasso
0
140
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Building Adaptive Systems
keathley
44
2.8k
The Invisible Side of Design
smashingmag
302
51k
Site-Speed That Sticks
csswizardry
12
900
Building Applications with DynamoDB
mza
96
6.7k
The Cost Of JavaScript in 2023
addyosmani
55
9k
BBQ
matthewcrist
89
9.8k
Faster Mobile Websites
deanohume
310
31k
Into the Great Unknown - MozCon
thekraken
40
2.1k
How to Think Like a Performance Engineer
csswizardry
27
2k
Designing for Performance
lara
610
69k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
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