$30 off During Our Annual Pro Sale. View Details »

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

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

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

Tyankatsu

April 25, 2019
Tweet

More Decks by Tyankatsu

Other Decks in Programming

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