PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話

俺の話を聞け！！LT大会 #13
ベガコーポレーション Laigグループ　フロントエンドエンジニア　山本勝也

Transcript

1. PostCSS෼͔Μͳ͍͔Β৮ͬͯΈͯ
   ͍ͭͰʹ
   stylelintͷconfigΛ࡞͍ͬͯΔ࿩
   4/25 Զͷ࿩Λฉ͚ʂʂLTେձ #13 #chibi_developer
   

   View Slide

2. ࣗݾ঺հ
   • νϟϯΧπ(@tyankatsu5, @tyankatsu_en)
   • ϕΨίʔϙϨʔγϣϯ
   • LaigͷϑϩϯτΤϯυΤϯδχΞ
   • Member of Gridsome
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   • PostCSSͱ͸
   • PostCSSͰצҧ͍ͯͨ͜͠ͱ
   • PostCSSͰΦϦδφϧͷϓϥάΠϯΛ࡞Δ
   • stylelint-config-ecss
   • ͓·͚
   

   View Slide

4. PostCSSͱ͸
   

   View Slide

5. View Slide

6. PostCSS
   • JSʢnode.jsʣͰCSSߏจม׵Ͱ͖Δ΍ͭ
   • ϓϥάΠϯΛ։ൃ͢ΔϑϨʔϜϫʔΫతͳϊϦ
   • PostCSSΛ࢖༻ͨ͠ϥΠϒϥϦ͕༗໊
   • Autoprefixer
   • stylelint
   • postcss-preset-env
   

   View Slide

7. ௐ΂Δ·Ͱޡղͯͨ͜͠ͱ
   

   View Slide

8. PostCSSͬͯSASSͷΑ͏ͳ
   ϓϦϓϩηοαͩΑͶ
   

   View Slide

9. PostCSSͬͯSASSͷΑ͏ͳϓϦ
   ϓϩηοαͩΑͶ
   • ҧ͏ɻ
   • PostCSSೖΕ·ͨ͠Ͱ͸Կ΋Ͱ͖ͳ͍ɻ
   • PostCSSΛ࢖ͬͯ࡞ΒΕͨϓϥάΠϯ͕͋ͬͯॳΊͯ
   ػೳ͢Δɻ
   

   View Slide

10. PostCSS͕Ͱ͖ͯ
    ϓϥάΠϯ͕Ͱ͖ͨʁ
    

    View Slide

11. PostCSS͕Ͱ͖ͯ
    ϓϥάΠϯ͕Ͱ͖ͨʁ
    • ҧ͏ɻݩʑAutoprefixerͷͨΊʹPostCSS͸࡞ΒΕ
    ͨɻ
    • reworkͱ͍͏cssจࣈྻΛ͝ʹΐ͝ʹΐͰ͖Δ΍͕ͭ
    ͋ͬͨ
    • Andrey Sitnik͕reworkΛ༻͍ͯrework-venderΛ
    ࡞ͬͨ
    

    View Slide

12. PostCSS͕Ͱ͖ͯ
    ϓϥάΠϯ͕Ͱ͖ͨʁ
    • rework-vender͸Autoprefixerʹ໊લΛม͑ͨ
    https://github.com/postcss/autoprefixer/commit/
    419a77d4d871a1d7be34ff7129e3cbf7fb755b0c
    • ౰࣌ͷAutoprefixerͷ໾ׂ
    • ϕϯμʔϓϨϑΟοΫε෇༩
    • όϯυϧαΠζॖখʢminifyʣ
    • code errorͷࢦఠ
    

    View Slide

13. PostCSS͕Ͱ͖ͯ
    ϓϥάΠϯ͕Ͱ͖ͨʁ
    • Ͱ΋ɺͲΕ΋ύʔεͯ͠ɺASTΛ͍͡Δ࡞ۀ͕ඞཁʹ
    • ͳΒ͍ͬͦreworkΈ͍ͨͳ΍ͭʹ੾Γग़ͯ͠ɺnode
    ͷલॲཧ͢Δ΍ͭ࡞Ζ͏
    PostCSS஀ੜ
    

    View Slide

14. PostCSS͕Ͱ͖ͯ
    ϓϥάΠϯ͕Ͱ͖ͨʁ
    • https://evilmartians.com/chronicles/five-years-of-
    postcss-state-of-the-union
    • https://github.com/postcss/autoprefixer/commit/
    419a77d4d871a1d7be34ff7129e3cbf7fb755b0c
    • https://qiita.com/morishitter/items/
    4a04eb144abf49f41d7d#%E6%AD%B4%E5%8F%
    B2
    

    View Slide

15. PostCSSͰ
    ΦϦδφϧͷ
    ϓϥάΠϯΛ࡞Δ
    

    View Slide

16. ͨͿΜ࣌ؒແ͍ͷͰ
    

    View Slide

17. https://github.com/
    tyankatsu0105/try-postcss
    

    View Slide

18. View Slide

19. View Slide

20. PostCSSͰϓϥάΠϯ࡞ͬͯΈ
    ͯ
    • ϓϩύςΟͷ૸͕ࠪ؆୯
    • ΦϒδΣΫτΛΦϓγϣϯͱͯ͠؆୯ʹઃఆͰ͖Δ
    • ΨΠυϥΠϯ͋ͬͨ https://github.com/postcss/
    postcss/blob/master/docs/guidelines/plugin.md
    • ηϛίϩϯͷऔಘํ๏෼͔Βͳ͔ͬͨ(semicolon:
    ɹͳΒ͋ͬͨ)
    

    View Slide

21. stylelint-config-ecss
    

    View Slide

22. https://github.com/
    tyankatsu0105/stylelint-
    config-ecss
    

    View Slide

23. stylelint-config-ecss
    • namespace-ModuleName_ChildNode-variant
    • namespace-ComponentName_ChildNode-variant
    • modulename-ComponentName_ChildNode-variant
    

    View Slide

24. stylelint-config-ecss
    • ECSS޲͚ͷstylelintϧʔϧ܈
    • ͜ΕΈͯ޷͖ʹͳͬͨϧʔϧ (Vueίϯϙʔωϯτʹ
    ߹ΘͤͨCSSͷ໋໊نଇΛߟ͑ͨ - Qiita)
    • ҰԠstylelintͷ঺հ΋ECSSΨΠυ಺Ͱ΍ͬͯΔ͚
    Ͳɺϧʔϧ͕ݹ͍͠ϧʔϧηοτʢconfigʣ͕ͳ͍
    (http://ecss.io/chapter9.html#stylelint)
    

    View Slide

25. ·ͱΊ
    • PostCSS͸࿉ۚज़ͱѱຐͷੈք؍
    • PostCSS͸CSSߏจͷύʔεͱηϨΫλΛఏڙ
    • PostCSSͷྺ࢙͸Autoprefixerͱڞʹ͋Δ
    • PostCSSϓϥάΠϯ͸؆୯ʹ࡞ΕΔ
    • ECSS޲͚ͷstylelint config࡞ͬͯ·͢
    

    View Slide

26. ͓ΘΓ
    

    View Slide

27. ͓·͚
    

    View Slide

28. stylelint-plugin-ecss
    

    View Slide

29. https://github.com/
    tyankatsu0105/stylelint-
    plugin-ecss
    

    View Slide

30. stylelint-plugin-ecss
    • طଘͷstylelintϧʔϧ͚ͩͰ͸ແཧͳܯࠂΛࣗ෼Ͱ
    ϧʔϧ࡞ͬͯࢦఠ͢ΔΑ͏ʹͨ͠ɻ
    • ecss/ ͷωʔϜεϖʔεͰ࢖༻Մೳ
    • stylelint-config-ecssͱͷซ༻Λ૝ఆͨ͠plugin
    

    View Slide

31. ͔Βͷ
    

    View Slide

32. View Slide

33. stylelint organization
    JOIN
    

    View Slide

34. ࣗݾ঺հ
    • νϟϯΧπ(@tyankatsu5, @tyankatsu_en)
    • ϕΨίʔϙϨʔγϣϯ
    • LaigͷϑϩϯτΤϯυΤϯδχΞ
    • Member of Gridsome
    • Member of stylelint ← NEW !!
    

    View Slide

35. ຊ୊ͱશؔ͘܎ͳ͍ߏ૝
    

    View Slide

36. ESLintͱstylelint
    Ͳͬͪ΋plugin࡞ͬͨ
    

    View Slide

37. ମܥతʹ෼͔Δ
    configͱpluginͷ࡞Γํ
    ͋ͱTIPS
    ·ͱ·ͬͯͨΒخ͍͠ʁʁ
    

    View Slide

38. ࠶౓͓ΘΓ
    

    View Slide