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
810
Modern CSS: architecture, future specs and build flow
morishitter
13
2.6k
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
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
720
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
580
iOSアプリ開発もLLMで自動運転する
hiragram
6
2k
Investigating Multithreaded PostgreSQL
macdice
0
140
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
230
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
110
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
5.9k
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
640
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
5
1.9k
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.5k
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
6
350
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
RailsConf 2023
tenderlove
30
1.1k
GitHub's CSS Performance
jonrohan
1031
460k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Facilitating Awesome Meetings
lara
54
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
What's in a price? How to price your products and services
michaelherold
245
12k
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_