PostCSS and cssnext

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_