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

Transcript

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

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

   of Gridsome

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

   ͓·͚

4. PostCSSͱ͸

5. None

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

   stylelint • postcss-preset-env

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

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

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

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

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

    Sitnik͕reworkΛ༻͍ͯrework-venderΛ ࡞ͬͨ

12. PostCSS͕Ͱ͖ͯ ϓϥάΠϯ͕Ͱ͖ͨʁ • rework-vender͸Autoprefixerʹ໊લΛม͑ͨ https://github.com/postcss/autoprefixer/commit/ 419a77d4d871a1d7be34ff7129e3cbf7fb755b0c • ౰࣌ͷAutoprefixerͷ໾ׂ • ϕϯμʔϓϨϑΟοΫε෇༩

    • όϯυϧαΠζॖখʢminifyʣ • code errorͷࢦఠ

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

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

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

16. ͨͿΜ࣌ؒແ͍ͷͰ

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

18. None
19. None

20. PostCSSͰϓϥάΠϯ࡞ͬͯΈ ͯ • ϓϩύςΟͷ૸͕ࠪ؆୯ • ΦϒδΣΫτΛΦϓγϣϯͱͯ͠؆୯ʹઃఆͰ͖Δ • ΨΠυϥΠϯ͋ͬͨ https://github.com/postcss/ postcss/blob/master/docs/guidelines/plugin.md

    • ηϛίϩϯͷऔಘํ๏෼͔Βͳ͔ͬͨ(semicolon: <boolean>ɹͳΒ͋ͬͨ)

21. stylelint-config-ecss

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

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

24. stylelint-config-ecss • ECSS޲͚ͷstylelintϧʔϧ܈ • ͜ΕΈͯ޷͖ʹͳͬͨϧʔϧ (Vueίϯϙʔωϯτʹ ߹ΘͤͨCSSͷ໋໊نଇΛߟ͑ͨ - Qiita) •

    ҰԠstylelintͷ঺հ΋ECSSΨΠυ಺Ͱ΍ͬͯΔ͚ Ͳɺϧʔϧ͕ݹ͍͠ϧʔϧηοτʢconfigʣ͕ͳ͍ (http://ecss.io/chapter9.html#stylelint)

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

    ECSS޲͚ͷstylelint config࡞ͬͯ·͢

26. ͓ΘΓ

27. ͓·͚

28. stylelint-plugin-ecss

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

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

31. ͔Βͷ

32. None

33. stylelint organization JOIN

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

    of Gridsome • Member of stylelint ← NEW !!

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

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

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

38. ࠶౓
    ͓ΘΓ