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 and cssnext
Search
Masaaki Morishita
November 26, 2015
Programming
11
1.8k
PostCSS and cssnext
at html5j, 61th.
Masaaki Morishita
November 26, 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
830
Modern CSS: architecture, future specs and build flow
morishitter
13
2.7k
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
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
680
Current States of Java Web Frameworks at JCConf 2025
kishida
0
510
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
300
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
820
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
deka_morita
0
160
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
870
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
Learn CPU architecture with Assembly
akkeylab
1
1.3k
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Fireside Chat
paigeccino
40
3.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Thoughts on Productivity
jonyablonski
70
4.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing for Performance
lara
610
69k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Site-Speed That Sticks
csswizardry
11
870
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Faster Mobile Websites
deanohume
310
31k
Transcript
PostCSS'ͱ'cssnext @morishi(er_
About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • Blog:'h.p:/ /morishi.er/hatenablog.com
• αΠόʔΤʔδΣϯτʢ৽ଔ1ʣ • PostCSSΤόϯδΣϦετʢࣗশʣ
None
Blog
None
PostCSSͰ࡞ͬͨͷ • CSSfmt:((S)CSSίʔυܗπʔϧ • AtCSS:(Annota/ons(based(CSS(processor • postcss7style7guide:(ελΠϧΨΠυδΣωϨʔλʔ • ଞϓϥάΠϯ7ͭ
Agenda 1. PostCSSͱ 2. PostCSSͷྺ࢙ 3. PostCSSͷύϑΥʔϚϯε 4. PostCSSπʔϧ 5.
cssnext 6. ·ͱΊ
PostCSSͱ
Over%7000%!%on%GitHub
None
None
None
͍͕͋Δ!
PostCSS'ͱ • by$Andrey$Sitnik • Node.jsͷCSSύʔαʔ • ASTΛૢ࡞͢ΔศརAPIΛఏڙ • ASTͷૢ࡞શͯϓϥάΠϯ͕୲
PostCSSͷॲཧͷྲྀΕ
PostCSSͷྺ࢙
PostCSSͷΑ͏ͳπʔϧੲ͔Β͋ͬͨ…
rework Plugin'framework'for'CSS'preprocessing
Modular(CSS(preprocessing( with(rework h"p:/ /tjholowaychuk.tumblr.com/post/ 44267035203/modular=css=preprocessing=with= rework
Custom'CSS'preprocessing h"p:/ /nicolasgallagher.com/custom4css4 preprocessing/
rework&(in&2012) • AndreyreworkΛͬͯAutoprefixerΛ࡞ͬͨ • ͔࣌͠͠reworkϒϥβϋοΫΛύʔεͰ͖ͳ͔ͬͨ • ʢ͋ͱTJʹAutoprefixerΛdisΒΕͨΓ…ʣ • ʮΑ͠ɺࣗͰreworkͷΑ͏ͳͷ࡞Ζ͏ʂʯ
PostCSS'ੜ
PostCSSʢʙ'v1ʣ • "PostCSS)is)a)framework)for)CSS)postprocessors" • AutoprefixerͷͨΊʹ࡞ΒΕͨ • ͜ͷࠒCoffeeScriptͰॻ͔Εͯͨ • ࡞ऀRuby͖ͰSass͖
PostCSS'(v2'ʙ'v4) • ϓϥάΠϯ͕େྔʹ࡞ΒΕ͍ͯ͘ • ݴޠ֦ுͷͨΊͷϓϥάΠϯ࡞ΒΕ͍ͯ͘ • cssnext,)AtCSS,)PreCSS • ʮϙετϓϩηεͱ͍͍ͬͨ…ʯ
None
PostCSS'v5
PostCSS'v5 • ࠓ·ͰͰҰ൪େ͖͍มߋ • Custom'Syntaxes • CSSҎ֎ͷߏจΛύʔεͰ͖ΔΑ͏ʹͳͬͨ • (reworkશʹΦϫίϯʹ)
Custom'Syntaxes • postcss'scss • SCSS༻ͷύʔαʔ • postcss'js • JSΦϒδΣΫτͱͯ͠ఆٛͨ͠CSSͷύʔαʔ •
͍ΘΏΔCSS,in,JS༻
PostCSSͷύϑΥʔϚϯε
ϓϦϓϩηοαʔͱͯ͠ postcss&nested*+*postcss&simple&vars*+*postcss&calc*+*postcss&mixins
CSSύʔαʔͱͯ͠
ϕϯμʔϓϦϑΟοΫε༩πʔϧͱͯ͠ CompassΑΓ50ഒҎ্͍ ϕϯμʔϓϦϑΟοΫε༩ͷͨΊ͚ͩʹCompassΛ͍ͬͯΔ ͳΒૣࣺͯ͘Δ͖
PostCSS'is'Fast h"ps:/ /github.com/postcss/benchmark
PostCSSπʔϧ
ۀͰPostCSSπʔϧϓϥάΠϯΛ Έ߹Θ͍ͤͯͬͯ͘
Autoprefixer ʮCan$I$Useʯͱ͍͏αΠτͷσʔλΛࢀ র͍ͯ͠Δ input: .flex { display: flex; } output:
.flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
stylelint ϞμϯͳCSSͷLintπʔϧ Custom'proper+escalc()ʹରԠ ESLintͷΑ͏ʹॊೈͳઃఆ͕Ͱ͖Δ
cssnano CSSͷminifyπʔϧ ͍͔ͭ͘ͷPostCSSͷϓϥάΠϯ͔ΒͰ͖ ͍ͯΔ
PreCSS PostCSSϓϦϓϩηοαʔ Sass$like$syntax • ηϨΫλʔͷωετදه • mixin • extend •
for,#each • if
CSS#Modules CSSͷελΠϧͷӨڹൣғΛίϯϙʔω ϯτͰด͡Α͏ͱ͢ΔࢼΈ • webpackͷcss*loaderΛͬͯηϨΫλ ΛBase64ͰΤϯίʔυ • composesͷػೳΛPostCSSΛͬͯ ࣮ CSS#Modules#ॴײ
h"p:/ /morishi"er.hatenablog.com/entry/ 2015/09/28/103334
CSSfmt CSSϑΥʔϚολʔ • ະདྷͷCSSͷه๏ɺSCSSه๏ʹରԠ • ϑΥʔϚοςΟϯάͷΦϓγϣϯ͕Ұ ͳ͍ h"ps:/ /github.com/morishi"er/cssfmt ϩΰืूதʂʂ
cssnext Use$tomorrow's$CSS$syntax,$ today. h"p:/ /cssnext.io/
cssnext
cssnext • by$Maxime$Thirouin • ݱࡏࡦఆஈ֊Ͱϒϥβ͕ະ࣮ͷCSSͷه๏Λɺࠓͷϒϥ β͕ղऍͰ͖ΔΑ͏ʹτϥϯεύΠϧ͢Δπʔϧ • PostCSS
cssnext ͍͔ͭ͘ͷPostCSSϓϥάΠϯ͔ΒͰ͖͍ͯΔ • Custom(proper,es • Custom(media(queries • Custom(selectors • color(),(hwb(),(gray()
• Autoprefixer • etc...
Custom'proper+es input: :root { --color: red; } div { color:
var(--color); } output: div { color: red; }
Custom'media'queries input: @custom-media --small-viewport (max-width: 30em); @media (--small-viewport) { /*
styles for small viewport */ } output: @media (max-width: 30em) { /* styles for small viewport */ } • ϝσΟΞΫΤϦʔͷmax%width:,30emͱ͔ʹ໊લΛ͚ͯཧ ͢Δ͜ͱ͕Ͱ͖·͢ɻ
Media&query&ranges input: @media screen and (width >= 500px) and (width
<= 1200px) { .foo { display: block; } } output: @media screen and (min-width: 500px) and (max-width: 1200px) { .bar { display: block; } }
Custom'selectors input: @custom-selector :--heading h1, h2, h3; article :--heading +
p { margin-top: 0; } output: article h1 + p, article h2 + p, article h3 + p { margin-top: 0; }
Color%func*on input: body { background: color(red a(90%)) } output: body
{ background: rgba(255, 0, 0, 0.9) }
cssnextΛ͏ͱ'ະདྷͷCSSͷγϯλοΫεΛ ઌऔΓͰ͖Δ
tabatkins(/(specs by#Tab#Atkins#Jr. h"ps:/ /github.com/tabatkins/specs
tabatkins(/(specs • CSS$Toggle$States • CSS$Nes.ng • CSS$Aliases$(custom$stuff) • CSS$will9change$Property •
CSS$Font$Rendering$Controls • etc...
CSS#@apply#Rule#(by#postcss2apply) :root { --toolbar-theme: { background-color: hsl(120, 70%, 95%); border-radius:
4px; border: 1px solid var(--theme-color late); }; --toolbar-title-theme: { color: green; }; } .toolbar { @apply --toolbar-theme; } .toolbar > .title { @apply --toolbar-title-theme; }
CSS#Extend#Rule#(by#postcss4extend) .error { color: red; border: thick dotted red; }
.serious-error { @extend .error; font-weight: bold; }
·ͱΊ
PostCSSͱ • PostCSSࣗମͨͩͷύʔαʔ • ύʔαʔͱͯ͠ͱͯྑ͍ • ASTͷૢ࡞શͯϓϥάΠϯ͕୲ • ·͋·͍͋ •
Stylusͷ4ഒ,/Ruby/Sassͷ26ഒ • Compassͷ50ഒҎ্
PostCSSπʔϧ • Autoprefixer • stylelint • cssnano • PreCSS •
CSS5Modules • CSSfmt
PostCSS.parts h"p:/ /postcss.parts
cssnext • ະདྷͷCSSΛઌऔΓʂ࠷ߴʂ • Custom)proper-es • Custom)media)queries • Custom)selectors •
color(),)hwb(),)gray() • etc...
※͔͜͜ΒݸਓͷײͰ͢
PostCSSʹ͍ͭͯ • ύʔαʔͱͯ͠ͱͯ༏ल • ͜Ε͔ΒCSSܥͷπʔϧΛ࡞Δͱ͖PostCSSΛ͏ • ඞཁͳػೳʢϓϥάΠϯʣ͚ͩΛબͯ͑͠Δ • ʮSassΛ͍ͬͯΔ͚Ͳ@extend@mixinΘͳ͍ʯ •
ʮมఆٛͱ@importͷΠϯϥΠϯల։͚ͩͰ͍͍Θʔʯ
ͨͩ…
PostCSSʹ͍ͭͯ • γϯλοΫεγϡΨʔܥͷϓϥάΠϯ͕ଟ͍ • ࠷ۙωλܥ૿͖͍͑ͯͯΔ • ϓϥάΠϯಉ࢜ʹґଘ͕ؔ͋Δ • ʮpostcss-mixinspostcss-nestedΑΓઌʹಡΈࠐΈ ·͠ΐ͏ʯ
ࡶʹPostCSSϓϥάΠϯΛͬͨΠϝʔδ
cssnextʹ͍ͭͯ • ະདྷͷCSSΛઌऔΓʂ$Ͱͳ͍ • CSSͷ༷ॻ͜Μͳʹബ͘ͳ͍ • cssnextͰମײͰ͖ΔͷγϯλοΫεͷॻ͖৺͙Β͍ • Extensible$Webͷจ຺ͰޠΒΕΔ͜ͱ͋Δ͕ɺPostCSSͰ Ͱ͖Δ͜ͱগͳ͍
cssnextʹ͍ͭͯ • cssnextϙϦϑΟϧ(Ͱͳ͍ • ػೳ͕࣮͞Ε͍ͯͳ͍ϒϥβͰ͑ΔΑ͏ʹ͢Δͷ ͡Όͳ͍ • ࠓͷϒϥβ͕ղऍͰ͖ΔCSSʹม͢Δ߹ɺͰ͖Δ͜ͱ গͳ͍ •
HoudiniͷCSS(Parser(APIʹظ
cssnextʹ͍ͭͯ • cssnextϓϦϓϩηοαʔ • ଞͷϓϦϓϩηοαʔͱಉ༷ʹɺग़ྗޙͷCSSΛҙࣝͯ͠ॻ ͘ඞཁ͕͋Δ • JSͷBabelײ֮Ͱ༻͢Δͱةݥ
Thanks':D @morishi(er_