PostCSS and cssnext

PostCSS and cssnext

at html5j, 61th.

3cf7515c93d2f278420f0147788c8e23?s=128

Masaaki Morishita

November 26, 2015
Tweet

Transcript

  1. PostCSS'ͱ'cssnext @morishi(er_

  2. About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • Blog:'h.p:/ /morishi.er/hatenablog.com

    • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ • PostCSSΤόϯδΣϦετʢࣗশʣ
  3. None
  4. Blog

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

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

    cssnext 6. ·ͱΊ
  8. PostCSSͱ͸

  9. Over%7000%!%on%GitHub

  10. None
  11. None
  12. None
  13. ੎͍͕͋Δ!

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

  15. PostCSSͷॲཧͷྲྀΕ

  16. PostCSSͷྺ࢙

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

  18. rework Plugin'framework'for'CSS'preprocessing

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

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

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

  22. PostCSS'஀ੜ

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

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

  25. None
  26. PostCSS'v5

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

  28. Custom'Syntaxes • postcss'scss • SCSS༻ͷύʔαʔ • postcss'js • JSΦϒδΣΫτͱͯ͠ఆٛͨ͠CSSͷύʔαʔ •

    ͍ΘΏΔCSS,in,JS༻
  29. PostCSSͷύϑΥʔϚϯε

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

  31. CSSύʔαʔͱͯ͠

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

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

  34. PostCSS੡πʔϧ

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

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

    .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  37. stylelint ϞμϯͳCSSͷLintπʔϧ Custom'proper+es΍calc()౳ʹ΋ରԠ ESLintͷΑ͏ʹॊೈͳઃఆ͕Ͱ͖Δ

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

  39. PreCSS PostCSS੡ϓϦϓϩηοαʔ Sass$like$syntax • ηϨΫλʔͷωετදه • mixin • extend •

    for,#each • if
  40. CSS#Modules CSSͷελΠϧͷӨڹൣғΛίϯϙʔω ϯτ಺Ͱด͡Α͏ͱ͢ΔࢼΈ • webpackͷcss*loaderΛ࢖ͬͯηϨΫλ ΛBase64ͰΤϯίʔυ • composes౳ͷػೳΛPostCSSΛ࢖ͬͯ ࣮૷ CSS#Modules#ॴײ

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

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

  43. cssnext

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

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

    • Autoprefixer • etc...
  46. Custom'proper+es input: :root { --color: red; } div { color:

    var(--color); } output: div { color: red; }
  47. 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ͱ͔ʹ໊લΛ෇͚ͯ؅ཧ ͢Δ͜ͱ͕Ͱ͖·͢ɻ
  48. 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; } }
  49. 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; }
  50. Color%func*on input: body { background: color(red a(90%)) } output: body

    { background: rgba(255, 0, 0, 0.9) }
  51. cssnextΛ࢖͏ͱ'ະདྷͷCSSͷγϯλοΫεΛ ઌऔΓͰ͖Δ

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

  53. tabatkins(/(specs • CSS$Toggle$States • CSS$Nes.ng • CSS$Aliases$(custom$stuff) • CSS$will9change$Property •

    CSS$Font$Rendering$Controls • etc...
  54. 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; }
  55. CSS#Extend#Rule#(by#postcss4extend) .error { color: red; border: thick dotted red; }

    .serious-error { @extend .error; font-weight: bold; }
  56. ·ͱΊ

  57. PostCSSͱ͸ • PostCSSࣗମ͸ͨͩͷύʔαʔ • ύʔαʔͱͯ͠͸ͱͯ΋ྑ͍ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰ • ·͋·͋଎͍ •

    Stylusͷ4ഒ,/Ruby/Sassͷ26ഒ • Compassͷ50ഒҎ্
  58. PostCSS੡πʔϧ • Autoprefixer • stylelint • cssnano • PreCSS •

    CSS5Modules • CSSfmt
  59. PostCSS.parts h"p:/ /postcss.parts

  60. cssnext • ະདྷͷCSSΛઌऔΓʂ࠷ߴʂ • Custom)proper-es • Custom)media)queries • Custom)selectors •

    color(),)hwb(),)gray() • etc...
  61. ※͔͜͜Β͸ݸਓͷײ૝Ͱ͢

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

    ʮม਺ఆٛͱ@importͷΠϯϥΠϯల։͚ͩͰ͍͍Θʔʯ
  63. ͨͩ…

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

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

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

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

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

  69. Thanks':D @morishi(er_