Tweet
Tweet

Slide 1

Slide 1 text

PostCSS'ͱ'cssnext @morishi(er_

Slide 2

Slide 2 text

About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • Blog:'h.p:/ /morishi.er/hatenablog.com • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ • PostCSSΤόϯδΣϦετʢࣗশʣ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Blog

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

PostCSSͰ࡞ͬͨ΋ͷ • CSSfmt:((S)CSSίʔυ੔ܗπʔϧ • AtCSS:(Annota/ons(based(CSS(processor • postcss7style7guide:(ελΠϧΨΠυδΣωϨʔλʔ • ଞϓϥάΠϯ7ͭ

Slide 7

Slide 7 text

Agenda 1. PostCSSͱ͸ 2. PostCSSͷྺ࢙ 3. PostCSSͷύϑΥʔϚϯε 4. PostCSS੡πʔϧ 5. cssnext 6. ·ͱΊ

Slide 8

Slide 8 text

PostCSSͱ͸

Slide 9

Slide 9 text

Over%7000%!%on%GitHub

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

੎͍͕͋Δ!

Slide 14

Slide 14 text

PostCSS'ͱ͸ • by$Andrey$Sitnik • Node.js੡ͷCSSύʔαʔ • ASTΛૢ࡞͢ΔศརAPIΛఏڙ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰

Slide 15

Slide 15 text

PostCSSͷॲཧͷྲྀΕ

Slide 16

Slide 16 text

PostCSSͷྺ࢙

Slide 17

Slide 17 text

PostCSSͷΑ͏ͳπʔϧ͸ੲ͔Β͋ͬͨ…

Slide 18

Slide 18 text

rework Plugin'framework'for'CSS'preprocessing

Slide 19

Slide 19 text

Modular(CSS(preprocessing( with(rework h"p:/ /tjholowaychuk.tumblr.com/post/ 44267035203/modular=css=preprocessing=with= rework

Slide 20

Slide 20 text

Custom'CSS'preprocessing h"p:/ /nicolasgallagher.com/custom4css4 preprocessing/

Slide 21

Slide 21 text

rework&(in&2012) • Andrey͸reworkΛ࢖ͬͯAutoprefixerΛ࡞ͬͨ • ͔͠͠౰࣌rework͸ϒϥ΢βϋοΫΛύʔεͰ͖ͳ͔ͬͨ • ʢ͋ͱTJʹAutoprefixerΛdisΒΕͨΓ…ʣ • ʮΑ͠ɺࣗ෼ͰreworkͷΑ͏ͳ΋ͷ࡞Ζ͏ʂʯ

Slide 22

Slide 22 text

PostCSS'஀ੜ

Slide 23

Slide 23 text

PostCSSʢʙ'v1ʣ • "PostCSS)is)a)framework)for)CSS)postprocessors" • AutoprefixerͷͨΊʹ࡞ΒΕͨ • ͜ͷࠒ͸CoffeeScriptͰॻ͔Εͯͨ • ࡞ऀ͸Ruby޷͖ͰSass޷͖

Slide 24

Slide 24 text

PostCSS'(v2'ʙ'v4) • ϓϥάΠϯ͕େྔʹ࡞ΒΕ͍ͯ͘ • ݴޠ֦ுͷͨΊͷϓϥάΠϯ΋࡞ΒΕ͍ͯ͘ • cssnext,)AtCSS,)PreCSS • ʮϙετϓϩηεͱ͸͍͍ͬͨ…ʯ

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

PostCSS'v5

Slide 27

Slide 27 text

PostCSS'v5 • ࠓ·ͰͰҰ൪େ͖͍มߋ • Custom'Syntaxes • CSSҎ֎ͷߏจΛύʔεͰ͖ΔΑ͏ʹͳͬͨ • (rework͸׬શʹΦϫίϯʹ)

Slide 28

Slide 28 text

Custom'Syntaxes • postcss'scss • SCSS༻ͷύʔαʔ • postcss'js • JSΦϒδΣΫτͱͯ͠ఆٛͨ͠CSSͷύʔαʔ • ͍ΘΏΔCSS,in,JS༻

Slide 29

Slide 29 text

PostCSSͷύϑΥʔϚϯε

Slide 30

Slide 30 text

ϓϦϓϩηοαʔͱͯ͠ postcss&nested*+*postcss&simple&vars*+*postcss&calc*+*postcss&mixins

Slide 31

Slide 31 text

CSSύʔαʔͱͯ͠

Slide 32

Slide 32 text

ϕϯμʔϓϦϑΟοΫε෇༩πʔϧͱͯ͠ CompassΑΓ50ഒҎ্଎͍ ϕϯμʔϓϦϑΟοΫε෇༩ͷͨΊ͚ͩʹCompassΛ࢖͍ͬͯΔ ͳΒૣࣺͯ͘Δ΂͖

Slide 33

Slide 33 text

PostCSS'is'Fast h"ps:/ /github.com/postcss/benchmark

Slide 34

Slide 34 text

PostCSS੡πʔϧ

Slide 35

Slide 35 text

ۀ຿Ͱ͸PostCSS੡πʔϧ΍ϓϥάΠϯΛ૊ Έ߹Θͤͯ࢖͍ͬͯ͘

Slide 36

Slide 36 text

Autoprefixer ʮCan$I$Useʯͱ͍͏αΠτͷσʔλΛࢀ র͍ͯ͠Δ input: .flex { display: flex; } output: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

Slide 37

Slide 37 text

stylelint ϞμϯͳCSSͷLintπʔϧ Custom'proper+es΍calc()౳ʹ΋ରԠ ESLintͷΑ͏ʹॊೈͳઃఆ͕Ͱ͖Δ

Slide 38

Slide 38 text

cssnano CSSͷminifyπʔϧ ͍͔ͭ͘ͷPostCSSͷϓϥάΠϯ͔ΒͰ͖ ͍ͯΔ

Slide 39

Slide 39 text

PreCSS PostCSS੡ϓϦϓϩηοαʔ Sass$like$syntax • ηϨΫλʔͷωετදه • mixin • extend • for,#each • if

Slide 40

Slide 40 text

CSS#Modules CSSͷελΠϧͷӨڹൣғΛίϯϙʔω ϯτ಺Ͱด͡Α͏ͱ͢ΔࢼΈ • webpackͷcss*loaderΛ࢖ͬͯηϨΫλ ΛBase64ͰΤϯίʔυ • composes౳ͷػೳΛPostCSSΛ࢖ͬͯ ࣮૷ CSS#Modules#ॴײ h"p:/ /morishi"er.hatenablog.com/entry/ 2015/09/28/103334

Slide 41

Slide 41 text

CSSfmt CSSϑΥʔϚολʔ • ະདྷͷCSSͷه๏ɺSCSSه๏ʹରԠ • ϑΥʔϚοςΟϯάͷΦϓγϣϯ͕Ұ ੾ͳ͍ h"ps:/ /github.com/morishi"er/cssfmt ϩΰืूதʂʂ

Slide 42

Slide 42 text

cssnext Use$tomorrow's$CSS$syntax,$ today. h"p:/ /cssnext.io/

Slide 43

Slide 43 text

cssnext

Slide 44

Slide 44 text

cssnext • by$Maxime$Thirouin • ݱࡏࡦఆஈ֊Ͱϒϥ΢β͕ະ࣮૷ͷCSSͷه๏Λɺࠓͷϒϥ΢ β͕ղऍͰ͖ΔΑ͏ʹτϥϯεύΠϧ͢Δπʔϧ • PostCSS੡

Slide 45

Slide 45 text

cssnext ͍͔ͭ͘ͷPostCSSϓϥάΠϯ͔ΒͰ͖͍ͯΔ • Custom(proper,es • Custom(media(queries • Custom(selectors • color(),(hwb(),(gray() • Autoprefixer • etc...

Slide 46

Slide 46 text

Custom'proper+es input: :root { --color: red; } div { color: var(--color); } output: div { color: red; }

Slide 47

Slide 47 text

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ͱ͔ʹ໊લΛ෇͚ͯ؅ཧ ͢Δ͜ͱ͕Ͱ͖·͢ɻ

Slide 48

Slide 48 text

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; } }

Slide 49

Slide 49 text

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; }

Slide 50

Slide 50 text

Color%func*on input: body { background: color(red a(90%)) } output: body { background: rgba(255, 0, 0, 0.9) }

Slide 51

Slide 51 text

cssnextΛ࢖͏ͱ'ະདྷͷCSSͷγϯλοΫεΛ ઌऔΓͰ͖Δ

Slide 52

Slide 52 text

tabatkins(/(specs by#Tab#Atkins#Jr. h"ps:/ /github.com/tabatkins/specs

Slide 53

Slide 53 text

tabatkins(/(specs • CSS$Toggle$States • CSS$Nes.ng • CSS$Aliases$(custom$stuff) • CSS$will9change$Property • CSS$Font$Rendering$Controls • etc...

Slide 54

Slide 54 text

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; }

Slide 55

Slide 55 text

CSS#Extend#Rule#(by#postcss4extend) .error { color: red; border: thick dotted red; } .serious-error { @extend .error; font-weight: bold; }

Slide 56

Slide 56 text

·ͱΊ

Slide 57

Slide 57 text

PostCSSͱ͸ • PostCSSࣗମ͸ͨͩͷύʔαʔ • ύʔαʔͱͯ͠͸ͱͯ΋ྑ͍ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰ • ·͋·͋଎͍ • Stylusͷ4ഒ,/Ruby/Sassͷ26ഒ • Compassͷ50ഒҎ্

Slide 58

Slide 58 text

PostCSS੡πʔϧ • Autoprefixer • stylelint • cssnano • PreCSS • CSS5Modules • CSSfmt

Slide 59

Slide 59 text

PostCSS.parts h"p:/ /postcss.parts

Slide 60

Slide 60 text

cssnext • ະདྷͷCSSΛઌऔΓʂ࠷ߴʂ • Custom)proper-es • Custom)media)queries • Custom)selectors • color(),)hwb(),)gray() • etc...

Slide 61

Slide 61 text

※͔͜͜Β͸ݸਓͷײ૝Ͱ͢

Slide 62

Slide 62 text

PostCSSʹ͍ͭͯ • ύʔαʔͱͯ͠͸ͱͯ΋༏ल • ͜Ε͔Β΋CSSܥͷπʔϧΛ࡞Δͱ͖͸PostCSSΛ࢖͏ • ඞཁͳػೳʢϓϥάΠϯʣ͚ͩΛબ୒ͯ͠࢖͑Δ • ʮSassΛ࢖͍ͬͯΔ͚Ͳ@extend΋@mixin΋࢖Θͳ͍ʯ • ʮม਺ఆٛͱ@importͷΠϯϥΠϯల։͚ͩͰ͍͍Θʔʯ

Slide 63

Slide 63 text

ͨͩ…

Slide 64

Slide 64 text

PostCSSʹ͍ͭͯ • γϯλοΫεγϡΨʔܥͷϓϥάΠϯ͕ଟ͍ • ࠷ۙ͸ωλܥ΋૿͖͍͑ͯͯΔ • ϓϥάΠϯಉ࢜ʹ΋ґଘؔ܎͕͋Δ • ʮpostcss-mixins͸postcss-nestedΑΓઌʹಡΈࠐΈ ·͠ΐ͏ʯ

Slide 65

Slide 65 text

ࡶʹPostCSSϓϥάΠϯΛ࢖ͬͨΠϝʔδ

Slide 66

Slide 66 text

cssnextʹ͍ͭͯ • ະདྷͷCSSΛઌऔΓʂ$Ͱ͸ͳ͍ • CSSͷ࢓༷ॻ͸͜Μͳʹബ͘ͳ͍ • cssnextͰମײͰ͖Δͷ͸γϯλοΫεͷॻ͖৺஍͙Β͍ • Extensible$Webͷจ຺ͰޠΒΕΔ͜ͱ΋͋Δ͕ɺPostCSSͰ Ͱ͖Δ͜ͱ͸গͳ͍

Slide 67

Slide 67 text

cssnextʹ͍ͭͯ • cssnext͸ϙϦϑΟϧ(Ͱ͸ͳ͍ • ػೳ͕࣮૷͞Ε͍ͯͳ͍ϒϥ΢βͰ΋࢖͑ΔΑ͏ʹ͢Δ΋ͷ ͡Όͳ͍ • ࠓͷϒϥ΢β͕ղऍͰ͖ΔCSSʹม׵͢Δ౎߹ɺͰ͖Δ͜ͱ ͸গͳ͍ • HoudiniͷCSS(Parser(APIʹظ଴

Slide 68

Slide 68 text

cssnextʹ͍ͭͯ • cssnext͸ϓϦϓϩηοαʔ • ଞͷϓϦϓϩηοαʔͱಉ༷ʹɺग़ྗޙͷCSSΛҙࣝͯ͠ॻ ͘ඞཁ͕͋Δ • JSͷBabelײ֮Ͱ࢖༻͢Δͱةݥ

Slide 69

Slide 69 text

Thanks':D @morishi(er_