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
820
Modern CSS: architecture, future specs and build flow
morishitter
13
2.7k
PostCSS and cssnext
morishitter
11
1.8k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.4k
CSSfmt
morishitter
2
210
Introduction to CSS Architecture
morishitter
3
370
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
0
140
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
3
760
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
1
160
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
120
エンジニア向け採用ピッチ資料
inusan
0
140
SODA - FACT BOOK
sodainc
1
1.1k
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
820
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
850
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
630
Datadog RUM 本番導入までの道
shinter61
1
310
無関心の谷
kanayannet
0
180
XSLTで作るBrainfuck処理系
makki_d
0
210
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Automating Front-end Workflow
addyosmani
1370
200k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Docker and Python
trallard
44
3.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualization
eitanlees
146
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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_