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
物語を動かす行動"量" #エンジニアニメ
konifar
13
3.7k
DataformでPythonする / dataform-de-python
snhryt
0
160
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
180
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
160
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
実践 Dev Containers × Claude Code
touyu
1
160
新世界の理解
koriym
0
130
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
240
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
810
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
1.7k
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
190
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
290
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
Building a Scalable Design System with Sketch
lauravandoore
462
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Become a Pro
speakerdeck
PRO
29
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Statistics for Hackers
jakevdp
799
220k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.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_