俺の話を聞け!!LT大会 #13 ベガコーポレーション Laigグループ フロントエンドエンジニア 山本勝也
PostCSS͔Μͳ͍͔Β৮ͬͯΈ͍ͯͭͰʹstylelintͷconfigΛ࡞͍ͬͯΔ4/25 ԶͷΛฉ͚ʂʂLTେձ #13 #chibi_developer
View Slide
ࣗݾհ• νϟϯΧπ(@tyankatsu5, @tyankatsu_en)• ϕΨίʔϙϨʔγϣϯ• LaigͷϑϩϯτΤϯυΤϯδχΞ• Member of Gridsome
ࠓ͢͜ͱ• PostCSSͱ• PostCSSͰצҧ͍ͯͨ͜͠ͱ• PostCSSͰΦϦδφϧͷϓϥάΠϯΛ࡞Δ• stylelint-config-ecss• ͓·͚
PostCSSͱ
PostCSS• JSʢnode.jsʣͰCSSߏจมͰ͖Δͭ• ϓϥάΠϯΛ։ൃ͢ΔϑϨʔϜϫʔΫతͳϊϦ• PostCSSΛ༻ͨ͠ϥΠϒϥϦ͕༗໊• Autoprefixer• stylelint• postcss-preset-env
ௐΔ·Ͱޡղͯͨ͜͠ͱ
PostCSSͬͯSASSͷΑ͏ͳϓϦϓϩηοαͩΑͶ
PostCSSͬͯSASSͷΑ͏ͳϓϦϓϩηοαͩΑͶ• ҧ͏ɻ• PostCSSೖΕ·ͨ͠ͰԿͰ͖ͳ͍ɻ• PostCSSΛͬͯ࡞ΒΕͨϓϥάΠϯ͕͋ͬͯॳΊͯػೳ͢Δɻ
PostCSS͕Ͱ͖ͯϓϥάΠϯ͕Ͱ͖ͨʁ
PostCSS͕Ͱ͖ͯϓϥάΠϯ͕Ͱ͖ͨʁ• ҧ͏ɻݩʑAutoprefixerͷͨΊʹPostCSS࡞ΒΕͨɻ• reworkͱ͍͏cssจࣈྻΛ͝ʹΐ͝ʹΐͰ͖Δ͕ͭ͋ͬͨ• Andrey Sitnik͕reworkΛ༻͍ͯrework-venderΛ࡞ͬͨ
PostCSS͕Ͱ͖ͯϓϥάΠϯ͕Ͱ͖ͨʁ• rework-venderAutoprefixerʹ໊લΛม͑ͨhttps://github.com/postcss/autoprefixer/commit/419a77d4d871a1d7be34ff7129e3cbf7fb755b0c• ࣌ͷAutoprefixerͷׂ• ϕϯμʔϓϨϑΟοΫε༩• όϯυϧαΠζॖখʢminifyʣ• code errorͷࢦఠ
PostCSS͕Ͱ͖ͯϓϥάΠϯ͕Ͱ͖ͨʁ• ͰɺͲΕύʔεͯ͠ɺASTΛ͍͡Δ࡞ۀ͕ඞཁʹ• ͳΒ͍ͬͦreworkΈ͍ͨͳͭʹΓग़ͯ͠ɺnodeͷલॲཧ͢Δͭ࡞Ζ͏PostCSSੜ
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
PostCSSͰΦϦδφϧͷϓϥάΠϯΛ࡞Δ
ͨͿΜ࣌ؒແ͍ͷͰ
https://github.com/tyankatsu0105/try-postcss
PostCSSͰϓϥάΠϯ࡞ͬͯΈͯ• ϓϩύςΟͷ͕ࠪ؆୯• ΦϒδΣΫτΛΦϓγϣϯͱͯ͠؆୯ʹઃఆͰ͖Δ• ΨΠυϥΠϯ͋ͬͨ https://github.com/postcss/postcss/blob/master/docs/guidelines/plugin.md• ηϛίϩϯͷऔಘํ๏͔Βͳ͔ͬͨ(semicolon:ɹͳΒ͋ͬͨ)
stylelint-config-ecss
https://github.com/tyankatsu0105/stylelint-config-ecss
stylelint-config-ecss• namespace-ModuleName_ChildNode-variant• namespace-ComponentName_ChildNode-variant• modulename-ComponentName_ChildNode-variant
stylelint-config-ecss• ECSS͚ͷstylelintϧʔϧ܈• ͜ΕΈ͖ͯʹͳͬͨϧʔϧ (Vueίϯϙʔωϯτʹ߹ΘͤͨCSSͷ໋໊نଇΛߟ͑ͨ - Qiita)• ҰԠstylelintͷհECSSΨΠυͰͬͯΔ͚Ͳɺϧʔϧ͕ݹ͍͠ϧʔϧηοτʢconfigʣ͕ͳ͍(http://ecss.io/chapter9.html#stylelint)
·ͱΊ• PostCSS࿉ۚज़ͱѱຐͷੈք؍• PostCSSCSSߏจͷύʔεͱηϨΫλΛఏڙ• PostCSSͷྺ࢙Autoprefixerͱڞʹ͋Δ• PostCSSϓϥάΠϯ؆୯ʹ࡞ΕΔ• ECSS͚ͷstylelint config࡞ͬͯ·͢
͓ΘΓ
͓·͚
stylelint-plugin-ecss
https://github.com/tyankatsu0105/stylelint-plugin-ecss
stylelint-plugin-ecss• طଘͷstylelintϧʔϧ͚ͩͰແཧͳܯࠂΛࣗͰϧʔϧ࡞ͬͯࢦఠ͢ΔΑ͏ʹͨ͠ɻ• ecss/ ͷωʔϜεϖʔεͰ༻Մೳ• stylelint-config-ecssͱͷซ༻Λఆͨ͠plugin
͔Βͷ
stylelint organization JOIN
ࣗݾհ• νϟϯΧπ(@tyankatsu5, @tyankatsu_en)• ϕΨίʔϙϨʔγϣϯ• LaigͷϑϩϯτΤϯυΤϯδχΞ• Member of Gridsome• Member of stylelint ← NEW !!
ຊͱશؔ͘ͳ͍ߏ
ESLintͱstylelintͲͬͪplugin࡞ͬͨ
ମܥతʹ͔Δconfigͱpluginͷ࡞Γํ͋ͱTIPS·ͱ·ͬͯͨΒخ͍͠ʁʁ
࠶͓ΘΓ