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.5k
Houdini: Abracadabra CSS
morishitter
1
760
Modern CSS: architecture, future specs and build flow
morishitter
13
2.5k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.3k
CSSfmt
morishitter
2
200
Introduction to CSS Architecture
morishitter
3
330
Introduction to PostCSS
morishitter
6
1.6k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
370
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
410
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
220
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
150
Rubyのobject_id
qnighy
6
1.3k
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Jakarta EE meets AI
ivargrimstad
0
380
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
170
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
620
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Navigating Team Friction
lara
183
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Documentation Writing (for coders)
carmenintech
65
4.3k
Fireside Chat
paigeccino
31
2.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
KATA
mclloyd
27
13k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
How GitHub (no longer) Works
holman
310
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
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_