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
Introduction to PostCSS
Search
Masaaki Morishita
May 08, 2015
Programming
6
1.7k
Introduction to PostCSS
at CodeGrid 3rd anniversary party
Masaaki Morishita
May 08, 2015
Tweet
Share
More Decks by Masaaki Morishita
See All by Masaaki Morishita
PostCSS: Build your own CSS processor
morishitter
6
4.6k
Houdini: Abracadabra CSS
morishitter
1
780
Modern CSS: architecture, future specs and build flow
morishitter
13
2.5k
PostCSS and cssnext
morishitter
11
1.7k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.4k
CSSfmt
morishitter
2
200
Introduction to CSS Architecture
morishitter
3
330
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
cmp.Or に感動した
otakakot
3
200
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Outline View in SwiftUI
1024jp
1
330
ヤプリ新卒SREの オンボーディング
masaki12
0
130
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Realtime API 入門
riofujimon
0
150
CSC509 Lecture 11
javiergs
PRO
0
180
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
240
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Code Review Best Practice
trishagee
64
17k
A Philosophy of Restraint
colly
203
16k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Adaptive Systems
keathley
38
2.3k
Done Done
chrislema
181
16k
GitHub's CSS Performance
jonrohan
1030
460k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Transcript
Introduction to PostCSS @morishitter_
CodeGrid 3प ͓ΊͰͱ͏͍͟͝·͢ʂʂ
About me • Masaaki Morishita • twitter: @morishitter_ • github:
morishitter • blog: http://morishitter.hatenablog.com • αΠόʔΤʔδΣϯτ ৽ଔ1
What is PostCSS
PostCSS • https://github.com/postcss/postcs • Node.js • CSS Parser + API
• Plugin Architecture
PostCSS Parser Plugin Plugin Stringifier CSS New CSS
The Beginning is ..
Rework “Modular CSS Preprocessing with Rework” ― TJ Holowaychuk http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework
“Custom CSS Preprocessing” ― Nicolas Gallagher http://nicolasgallagher.com/custom-css-preprocessing/
Rework PostCSS • First • Simple • Fast • Smarter
Parser • Useful API • Source Maps
PostCSS is Fast http://ai.github.io/about-postcss/en/?full#40
PostCSS is Fast
Smarter Parser • τʔΫϯͷલޙͷۭനվߦ • ϊʔυΛࢀর • ඌͷϓϩύςΟએݴͷηϛίϩϯͷ༗ແ • etc..
Useful API
How to use PostCSS
Usage var postcss = require(‘postcss’) postcss([plugin_1,ɹplugin_2]) .process(css) .then(function (result) {
console.log(result) })
Usage in gulp .pipe(postcss([ require(‘postcss-nested'), require('postcss-simple-vars'), require('postcss-mixins'), require('postcss-easings'), require('cssnext') ]))
Create Plugins var postcss = require('postcss'); module.exports = postcss.plugin('PLUGIN_NAME', function
(opts) { opts = opts || {}; // Work with options here return function (css) { // Transform CSS AST here }; }); Use postcss-plugin-boilerplate
The Extensible Web Write PostCSS plugins Popularity Specification
The Difference between Existing Preprocessors
Difference Existing Preprocessor (like Sass) PostCSS ɾMonolithic ɾCode inside CSS
template ɾTuring Complete ɾModular ɾMaintainable ɾAll features by plugins ɾJS transforms CSS
The Tools Built with PostCSS
a { display: flex; } Autoprefixer a { display: -webkit-box;
display: -webkit-flex; display: -ms-flexbox; display: flex } Add vendor prefixes to rules by Can I Use
cssnext @custom-selector --heading h1, h2, h3, h4, h5, h6; .post-article
--heading { margin-top: calc(10 * var(--row)); color: color( var(--mainColor) blackness(+20%) ); font-variant-caps: small-caps; } CSS transpiler to use tomorrow's CSS syntax today
Pleeease Simplifies the use of preprocessors and combines them with
best postprocessors.
AtCSS .base { /* * @base * @constant */ font-size:
12px; padding: 8px 16px; } .class { /* @extend .base */ background-color: #eee; } Annotations based CSS Processor
AtCSS http://morishitter.hatenablog.com/entry/2015/03/16/100122 AtCSS: Annotation based CSS Processor GitHub https://github.com/morishitter/atcss
PostCSS is downloaded 430,000 per month
PostCSS Users • Twitter • Google • Wordpress • etc…
None
PostCSS is Awesome !!
Thanks :D @morishitter_