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.7k
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
220
Introduction to CSS Architecture
morishitter
3
380
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.1k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
800
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
250
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
200
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
150
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
500
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
740
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
130
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
型で語るカタ
irof
1
840
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
270
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Invisible Side of Design
smashingmag
301
51k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Bash Introduction
62gerente
613
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Designing for humans not robots
tammielis
253
25k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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_