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

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

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ͱ͸
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
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. ͔Βͷ
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. ࠶౓
    ͓ΘΓ