at html5j, 61th.
PostCSS'ͱ'cssnext@morishi(er_
View Slide
About&me• Masaaki'Morishita• Twi.er:'@morishi.er_• GitHub:'morishi.er• Blog:'h.p://morishi.er/hatenablog.com• αΠόʔΤʔδΣϯτʢ৽ଔ1ʣ• PostCSSΤόϯδΣϦετʢࣗশʣ
Blog
PostCSSͰ࡞ͬͨͷ• CSSfmt:((S)CSSίʔυܗπʔϧ• AtCSS:(Annota/ons(based(CSS(processor• postcss7style7guide:(ελΠϧΨΠυδΣωϨʔλʔ• ଞϓϥάΠϯ7ͭ
Agenda1. PostCSSͱ2. PostCSSͷྺ࢙3. PostCSSͷύϑΥʔϚϯε4. PostCSSπʔϧ5. cssnext6. ·ͱΊ
PostCSSͱ
Over%7000%!%on%GitHub
͍͕͋Δ!
PostCSS'ͱ• by$Andrey$Sitnik• Node.jsͷCSSύʔαʔ• ASTΛૢ࡞͢ΔศརAPIΛఏڙ• ASTͷૢ࡞શͯϓϥάΠϯ͕୲
PostCSSͷॲཧͷྲྀΕ
PostCSSͷྺ࢙
PostCSSͷΑ͏ͳπʔϧੲ͔Β͋ͬͨ…
reworkPlugin'framework'for'CSS'preprocessing
Modular(CSS(preprocessing(with(reworkh"p://tjholowaychuk.tumblr.com/post/44267035203/modular=css=preprocessing=with=rework
Custom'CSS'preprocessingh"p://nicolasgallagher.com/custom4css4preprocessing/
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• ʮϙετϓϩηεͱ͍͍ͬͨ…ʯ
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'Fasth"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ͷΑ͏ʹॊೈͳઃఆ͕Ͱ͖Δ
cssnanoCSSͷminifyπʔϧ͍͔ͭ͘ͷPostCSSͷϓϥάΠϯ͔ΒͰ͖͍ͯΔ
PreCSSPostCSSϓϦϓϩηοαʔSass$like$syntax• ηϨΫλʔͷωετදه• mixin• extend• for,#each• if
CSS#ModulesCSSͷελΠϧͷӨڹൣғΛίϯϙʔωϯτͰด͡Α͏ͱ͢ΔࢼΈ• webpackͷcss*loaderΛͬͯηϨΫλΛBase64ͰΤϯίʔυ• composesͷػೳΛPostCSSΛ࣮ͬͯCSS#Modules#ॴײh"p://morishi"er.hatenablog.com/entry/2015/09/28/103334
CSSfmtCSSϑΥʔϚολʔ• ະདྷͷCSSͷه๏ɺSCSSه๏ʹରԠ• ϑΥʔϚοςΟϯάͷΦϓγϣϯ͕Ұͳ͍h"ps://github.com/morishi"er/cssfmtϩΰืूதʂʂ
cssnextUse$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+esinput::root {--color: red;}div {color: var(--color);}output:div {color: red;}
Custom'media'queriesinput:@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&rangesinput:@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'selectorsinput:@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*oninput:body {background: color(red a(90%))}output:body {background: rgba(255, 0, 0, 0.9)}
cssnextΛ͏ͱ'ະདྷͷCSSͷγϯλοΫεΛઌऔΓͰ͖Δ
tabatkins(/(specsby#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.partsh"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_
morishitter
totokit4
prof18
microcms
qualiarts
ksudate
puripuri2100
tosh2230
ffjlabo
hschwentner
ivargrimstad
yukana
ogijun2018
yeseniaperezcruz
schacon
kneath
morganepeng
jmmastey
shlominoach
kevinliebholz
holman
revolveconf
colly
phodgson
bkeepers