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
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Git Rebase
bkuhlmann
11
1.6k
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
780
Ruby Pattern Matching
bkuhlmann
0
930
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
PHPはいつから死んでいるかの調査
chiroruxx
1
400
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Rethinking UI building strategies @ SFI 2024
letelete
0
270
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
270
Goのエラースタックトレースの歴史と今後
sonatard
7
1.3k
Featured
See All Featured
BBQ
matthewcrist
80
8.8k
4 Signs Your Business is Dying
shpigford
175
21k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
GitHub's CSS Performance
jonrohan
1025
450k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
The Invisible Side of Design
smashingmag
294
49k
Embracing the Ebb and Flow
colly
80
4.1k
How STYLIGHT went responsive
nonsquared
92
4.8k
Automating Front-end Workflow
addyosmani
1356
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