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.7k
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.6k
Houdini: Abracadabra CSS
morishitter
1
790
Modern CSS: architecture, future specs and build flow
morishitter
13
2.6k
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
350
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
バッチを作らなきゃとなったときに考えること
irof
0
400
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
580
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
180
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
170
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
380
Unity Android XR入門
sakutama_11
0
170
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
color-scheme: light dark; を完全に理解する
uhyo
6
460
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
12
4.4k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Faster Mobile Websites
deanohume
306
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Your Own Lightsaber
phodgson
104
6.2k
Optimizing for Happiness
mojombo
376
70k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Why Our Code Smells
bkeepers
PRO
336
57k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
For a Future-Friendly Web
brad_frost
176
9.5k
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_