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
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
420
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
3
2.1k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
Kiroで始めるAI-DLC
kaonash
2
540
Improving my own Ruby thereafter
sisshiki1969
1
150
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
tool ディレクティブを導入してみた感想
sgash708
1
160
TDD 実践ミニトーク
contour_gara
1
280
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.6k
rage against annotate_predecessor
junk0612
0
160
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
A designer walks into a library…
pauljervisheath
207
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Side Projects
sachag
455
43k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Visualization
eitanlees
148
16k
Facilitating Awesome Meetings
lara
55
6.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building an army of robots
kneath
306
46k
Faster Mobile Websites
deanohume
309
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_