Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

7a505b4e9b90548d96971b37dc07e761?s=128

Tyankatsu

April 25, 2019
Tweet

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. ࠶౓͓ΘΓ