PostCSS 5.0: for Custom CSS Preprocessing

at Back to Basics, CSS event in Japan

Transcript

1. PostCSS'5.0
   for$Custom$CSS$Preprocessing
   in#Back#to#Basics
   

   View Slide

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

   View Slide

3. Blog
   

   View Slide

4. PostCSSͰ࡞ͬͨ΋ͷ
   • CSSfmt:((S)CSSίʔυ੔ܗπʔϧ
   • AtCSS:(΅͕͔͘Μ͕͍͖͑ͨ͞ΐ͏ͷCSSϓϦϓϩηοαʔ
   • postcss0style0guide:(ελΠϧΨΠυδΣωϨʔλʔ
   • ଞϓϥάΠϯ7ͭ
   

   View Slide

5. PostCSSͱ͸
   

   View Slide

6. PostCSS
   • Node.js੡ͷCSS෩ݴޠύʔαʔ
   • ASTΛૢ࡞͢ΔศརAPIΛఏڙ
   • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰
   • PostCSSࣗମ͸CSSϓϦϓϩηοαʔͰ͸ͳ͍
   • ϓϥάΠϯ౳ͷΤίγεςϜ΋ؚΊͯPostCSSͱݺ͹ΕΔ
   

   View Slide

7. PostCSS'ͱ͸Կ͔
   h"ps:/
   /speakerdeck.com/jmblog/postcss5tohahe5ka
   

   View Slide

8. ࠓ೔࿩͢͜ͱ
   

   View Slide

9. PostCSS'5.0
   for$Custom$CSS$Preprocessing
   

   View Slide

10. The$Beginning$is$...
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. PostCSS'஀ੜ
    

    View Slide

16. The$History$of$PostCSS
    

    View Slide

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

    View Slide

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

    View Slide

19. View Slide

20. PostCSS'5.0
    released'on'August'20,'2015
    

    View Slide

21. PostCSS'5.0
    • ࠓ·ͰͰҰ൪େ͖͍มߋ
    • API໊͕มߋ
    • Node.js,v0.10ͷαϙʔτ͕ͳ͘ͳΔ
    • Custom'Syntaxes
    

    View Slide

22. Custom'Syntaxes
    • SyntaxΛࣗ෼Ͱఆٛ͠ɺPostCSSͷASTʹύʔεͰ͖Δ
    • Φϓγϣϯͷ௥Ճ
    • parser:/ύʔαʔΛબ୒
    • stringifier:/Ξ΢τϓοτͷॲཧΛબ୒
    • syntax:/parser/+/stringifier
    postcss().process(source, { syntax: scss })
    

    View Slide

23. Custom'Syntaxes
    • postcss'scss
    • SCSS༻ͷPostCSS+Syntax
    • PostCSSͰSCSSϑΝΠϧΛCSSʹίϯύΠϧͰ͖ΔΑ͏ʹ
    ͳͬͨΘ͚Ͱ͸ͳ͍
    • SCSS+to+CSSͷίϯύΠϥʢϓϥάΠϯύοΫʣΛ࡞ͬͯΔਓ
    ͕͍ΔΒ͍͠
    

    View Slide

24. Custom'Syntaxes
    • for%CSS(in(JS
    • JSΦϒδΣΫτΛPostCSS%ASTʹม׵
    • React%Style%Autoprefixer
    • Styling
    

    View Slide

25. PostCSS'is'Awesome!!
    

    View Slide

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

    View Slide

27. CSSͷಠࣗه๏Λ࡞ͬͯ΋࢓ํͳ͍
    ݁ہͲΕ΋ͨͩͷγϯλοΫεγϡΨʔ
    

    View Slide

28. @function halfSize($value) {
    @return $value / 2;
    }
    $val: 100px;
    :root {
    // Main theme color
    --color: red;
    }
    .foo {
    width: halfSize($val);
    }
    .bar {
    color: var(--color);
    padding: $val / 10;
    }
    

    View Slide

29. (")
    

    View Slide

30. CSS๊͕͑Δ໰୊͸Կ͔
    

    View Slide

31. ந৅Խͱ࠶ར༻ʁ
    ΧεέʔσΟϯάͱηϨΫλʔৄࡉ౓ʁ
    

    View Slide

32. ϓϦϓϩηοαʔ͸Ͳ͏͋Δ΂͖͔
    

    View Slide

33. ಓ۩ʹৼΓճ͞Εͣɺຊ࣭ΛݟΔ
    

    View Slide

34. Back%to%Basics
    

    View Slide

35. Thanks':D
    @morishi(er_
    

    View Slide