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

sassc-railsを利用している我々は、Sassの@importの非推奨化をどのように乗り越えていくか

 sassc-railsを利用している我々は、Sassの@importの非推奨化をどのように乗り越えていくか

Hirotaka Miyagi

October 22, 2022
Tweet

More Decks by Hirotaka Miyagi

Other Decks in Programming

Transcript

  1. sassc-railsΛར༻͍ͯ͠Δզʑ͸ɺSassͷ@importͷඇਪ঑ԽΛͲͷΑ͏ʹ৐Γӽ͍͔͑ͯ͘
    Kaigi on Rails 2022 / @MH4GF Hirotaka Miyagi
    1

    View Slide

  2. Hirotaka Miyagi


    @MH4GF
    •ϑϦʔϥϯεΤϯδχΞ


    •גࣜձࣾϏοτδϟʔχʔ͞Μͷ
    Kibelaͷ։ൃνʔϜʹࢀՃ͍ͯ͠·
    ͢
    2

    View Slide

  3. sassc-rails࢖ͬͯ·͔͢
    3

    View Slide

  4. օ͞ΜͷϓϩδΣΫτͰ͜Μͳapplication.scss
    ͸͋Γ·ͤΜ͔
    4

    View Slide

  5. ͜ͷ@import͸ඇਪ঑ͱͳΓɺ࡟আ͕༧ఆ͞Ε͍ͯ·͢
    ୅ΘΓͷϞδϡʔϧγεςϜͰ͋Δ@useΛ࢖͏͜ͱʹͳΓ·͢
    5
    https://sass-lang.com/blog/the-module-system-is-launched#future-plans

    View Slide

  6. • ͔͠͠sassc-railsͰ͸@use͸αϙʔτ͞Ε͍ͯ·ͤΜ😇


    • ͱ͍͏͜ͱ͸@importΛ@useʹҠߦ͢Δલʹɺsassc-railsΛผͷԿ͔ʹม͑Δ
    ඞཁ͕͋Δͬͯ͜ͱ…!?
    6

    View Slide

  7. ࠓճͷηογϣϯͷ໨త͸ɺ


    ʮSassͷݱࡏ஍΍पล஌ࣝΛͬ͘͟Γཧղ͠ɺ
    ໌೔͔ΒҠߦͷΞΫγϣϯΛ࢝ΊΒΕΔঢ়ଶʯ


    ʹͳΔ͜ͱͰ͢
    7

    View Slide

  8. ࠓ೔ͷΞδΣϯμ
    • Sassपลͷࣄલ஌ࣝͷ঺հ


    • Ҡߦʹ͓͚Δํ਑


    • ҠߦϓϩηεͰؾ͍ͮͨ͜ͱ
    8

    View Slide

  9. Sassपลͷࣄલ஌ࣝͷ঺հ
    9

    View Slide

  10. Sassͱ͸
    • CSSͷεʔύʔηοτɾϓϦϓϩηοα


    • ม਺ɾؔ਺ɾωετʹΑΔߏ଄Խ͕ಛ௃
    10

    View Slide

  11. CSSؔ࿈ٕज़
    • State of CSSʹΑΔௐࠪͰ͸Ϣʔ
    βʔ਺͕࠷΋ଟ͘ຬ଍౓΋্Ґʹ
    Ґஔ͍ͯ͠Δ
    11
    https://2021.stateofcss.com/ja-JP/technologies/

    View Slide

  12. Sassͷ࣮૷
    • Ruby Sass, LibSass, DartSass͕͋ΓɺDart SassͰݱࡏΞΫςΟϒͳ։ൃ͕ਐ
    ߦத


    • @use͸Dart Sassʹ͔࣮͠૷͞Ε͍ͯͳ͍


    • sassc-rails͸LibSassΛ࣮ߦ͢Δ


    • Ruby Sass͸EOL ⚰ͰɺLibSass͸ඇਪ঑


    • อक͸ܧଓ͞ΕΔ͕৽ػೳ͸αϙʔτ͞Εͳ͍ͨΊɺCSS/Sassߏจͷޓ
    ׵ੑ͔Βঃʑʹဃ཭͍ͯ͘͠
    12

    View Slide

  13. @import
    • ϑΝΠϧ෼ׂΛ࣮ݱ͢ΔͨΊͷߏจ
    13

    View Slide

  14. @import͸ͳͥඇਪ঑ͳͷ͔ʁ
    • શͯͷfunctionɾmixinɾvariable͕άϩʔόϧͰΞΫηεͰ͖ΔΑ͏
    ʹͳΔͨΊɺఆٛͷڝ߹͕͠͹͠͹ى͖Δ


    • ಛఆͷఆ͕ٛͲ͜Ͱ࢖ΘΕΔ͔Λ୳ࡧ͢Δ͜ͱ͕ࠔ೉


    • ಉ͡ϑΝΠϧΛෳ਺ճ@importͰݺͼग़ͯ͠͠·ͬͨ৔߹ɺݺͼग़͠
    ͨճ਺෼ධՁ͞Εͯ͠·͏
    14
    https://sass-lang.com/documentation/at-rules/import

    View Slide

  15. @use
    15
    ม਺ͱmixinΛఆٛ
    @useͰར༻Λએݴ
    cornersͷωʔϜεϖʔεͰݺͼग़͢

    View Slide

  16. @use
    • ϝϯόݺͼग़͠ʹ໊લۭؒΛ໌ࣔ͢ΔͨΊɺάϩʔόϧͳఆٛͷॏෳ
    Λؾʹͤͣྑ͘ͳͬͨ 👍


    • ಉ͡ϑΝΠϧΛෳ਺ճ@useͰݺͼग़ͯ͠΋Ұ౓ͷΈධՁ͢ΔΑ͏ʹ
    ͳͬͨ 👍


    • privateͳม਺ͳͲɺՄࢹੑͷ੍ޚ͕Ͱ͖ΔΑ͏ʹͳͬͨ👍
    16
    https://sass-lang.com/documentation/at-rules/use

    View Slide

  17. ͍ͭ·Ͱʹ@useʹҠߦ͢Ε͹ྑ͍ͷ͔ʁ
    • ݩʑ͸2022/10/01·ͰʹϝδϟʔόʔδϣϯͷΞοϓάϨʔυΛ࣋ͬ
    ͯ࡟আ͞ΕΔ༧ఆ͕ͩͬͨɺLibSassͷඇਪ঑ԽΛड͚Ԇظ͞Εͨ


    • 80%ͷϢʔβʔ͕Dart SassʹҠߦ͢ΔͷΛ଴ͪɺͦͷޙগͳ͘ͱ΋1
    ೥ɺ͓ͦΒ͘΋ͬͱ଴͔ͬͯΒ׬શʹ࡟আ͢Δ༧ఆ
    17
    https://sass-lang.com/blog/the-module-system-is-launched#future-plans

    View Slide

  18. ͍ͭ·Ͱʹ@useʹҠߦ͢Ε͹ྑ͍ͷ͔ʁ
    • NPMͷμ΢ϯϩʔυ਺Ͱ൑அ͍ͯ͠Δ sass / (sass + node-sass)


    • 8,098,297 / (8,098,297 + 2,677,869) = 75% (2022/10/22࣌఺)
    18
    https://github.com/sass/sass/issues/3276#issuecomment-1090803953
    → 1೥Ҏ಺ͰҠߦ͓ͯ͘͠ͷ͕ແ೉

    View Slide

  19. Ҡߦʹ͓͚Δํ਑
    19

    View Slide

  20. Ҡߦʹ͓͚Δํ਑
    1. sassc-railsΛ࡟আ͠DartSassΛRailsͰ࢖͑ΔΑ͏ʹ͢Δ


    2. @import͔Β@useʹ੾Γସ͑Δ


    3. (@useΒ͍͠ઃܭʹ੾Γସ͍͑ͯ͘)
    20

    View Slide

  21. RailsͰDartSassΛѻ͏ํ๏͸ʁ
    • 3ͭ͋Δ


    • dartsass-rails gem


    • css-bundling-rails gem


    • webpackͷsass-loader
    21

    View Slide

  22. dartsass-rails
    • SassͷόΠφϦ͕಺แ͞Ε͓ͯΓɺNodeͳͲͷϥϯλΠϜͳ͠ʹ࣮
    ߦՄೳ


    • assets:precompileͷઌ಄ʹbuild༻RakeTaskΛࠩ͠ࠐΉ
    22
    → importmap-railsར༻ԼͳͲɺwebpack΍nodeʹґଘ͠ͳ͍؀ڥͰͷར༻Λ૝ఆ
    https://github.com/rails/dartsass-rails

    View Slide

  23. cssbundling-rails
    • ηοτΞοϓ༻RakeλεΫͰpackage.jsonͷscriptsʹbuild:cssΛɺ
    npmύοέʔδͷsassΛdependenciesʹ௥Ճ


    • assets:precompileͷઌ಄ʹ yarn install && yarn build:css Λࠩ͠ࠐΉ
    23
    https://github.com/rails/cssbundling-rails
    → npm scriptsΛར༻͢ΔͨΊɺॊೈʹ࣮ߦ಺༰Λ੍ޚՄೳ

    View Slide

  24. Webpackͷsass-loader
    • WebpackʹόϯυϦϯάͤ͞Δํ๏


    • ࠓ೔͸࣌ؒͷ౎߹্লུ
    24

    View Slide

  25. ͲΕΛબ΂͹͍͍ͷ͔ʁ
    • NodeΛར༻͍ͯ͠ΔϓϩδΣΫτͰ͋Ε͹cssbundling-rails͔Webpack
    Λ࢖͏ͷ͕ྑ͍


    • npmͷsassʹґଘ͢ΔͨΊdependabotͳͲͰͷΞοϓσʔτ͕Մೳ


    • ϑϩϯτΤϯυίϛϡχςΟͷ৘ใΛద༻Ͱ͖Δ


    • 2ͭͷͲͪΒΛ࢖͏͔͸Webpackʹґଘͤ͞Δ͔͠ͳ͍͔Ͱݕ౼͢Δ


    • Dartsass-rails͸ɺsassͷόʔδϣϯΞοϓ͕ߦΘΕ͍ͯͳ͍ͷ͕ؾʹͳΔ
    25

    View Slide

  26. @import͔Β@use΁ͷॻ͖׵͑
    • Sassެ͔ࣜΒఏڙ͞Ε͍ͯΔϚΠάϨʔλʔ͕͋ΔͷͰɺ·ͣͦΕΛ
    ࢼ͢ͷ͕ྑ͍


    • @import͔Β@use΁ͷॻ͖׵͑ɺ֤ఆٛͷར༻ՕॴͰͷ໊લۭؒͷ
    ෇༩ͳͲ
    26
    https://sass-lang.com/blog/the-module-system-is-launched#automatic-migration

    View Slide

  27. ҠߦϓϩηεͰؾ͍ͮͨ͜ͱ
    27

    View Slide

  28. sassc-railsͷ᠘
    • DartSassʹ੾Γସ͑Δͱɺͦͷ··Ͱ͸@import͕ಈ͔ͳ͍Օॴ͕ଟʑ͋ͬͨ


    • @import “utilities/**” ͷΑ͏ͳglob → ϑΝΠϧΛͦΕͧΕ໌ࣔ͢Δ


    • xxx.scss.erb → ͖͋ΒΊ·͠ΐ͏


    • admin-lte/dist/css/adminlte → admin-lte/dist/css/adminlte.css


    • ͜ΕΒ͸sassc-rails͕ॊೈʹॲཧͯ͘͠Ε͍ͯͨ
    28
    → Ϗϧυʹࣦഊ͢Δ৔߹͸ɺsassc-rails͕ॲཧͯ͘͠Ε͍ͯͳ͍͔ʁΛ֬ೝ

    View Slide

  29. QAํ๏
    • LibSass͔ΒDartSassʹ੾Γସ͑Δɾ@import͔Β@useʹ੾Γସ͑Δࡍͷ
    QAͱͯ͠͸࠷ऴతͳग़ྗCSSͷࠩ෼ΛνΣοΫ͢Δͱྑ͍


    • Sassʹ͸outputStyleͱ͍͏Φϓγϣϯ͕͋Γɺexpandedʹઃఆ͢Δ͜ͱ
    ͰՄಡੑ͕ߴ·ΓdiffΛऔΔ͜ͱ͕Ͱ͖Δ


    • Kibelaͷ৔߹ϕϯμʔϓϨϑΟοΫεͷ࡟আ΍௥Ճɺbackground-image
    ͷύε͕มΘΔͳͲ͕͋ͬͨ


    • QAͷൣғΛߜΔ͜ͱ͕Ͱ͖Δ
    29

    View Slide

  30. ࠓճͷηογϣϯͷ·ͱΊ
    • @import͸ඇਪ঑Ͱ͋Γ@useʹ੾Γସ͑Δඞཁ͕͋Δɺ@use͸DartSassͰͷ
    Έར༻Մೳ


    • 80%ͷϢʔβʔ͕DartSassʹҠߦͨ͠1೥ޙΛ໨ॲʹ@import͸࡟আ͞ΕΔ༧
    ఆͰɺݱࡏ75%


    • RailsͰDartSassΛར༻͢Δखஈ͸1.dartsass-rails, 2.css-bundling-rails,
    3.webpack͕͋ΓɺnodeΛར༻͍ͯ͠ΔͳΒ2͔3͕ྑ͍


    • Ҡߦ࣌ͷQAํ๏ͱͯ͠outputStyleΛexpandedʹઃఆ͠diffΛऔΔํ๏͕͋Δ
    30

    View Slide

  31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠


    cssbundling-rails + dartsassͷݕূ࣮૷ΛGitHubʹࡌ͍ͤͯ·͢


    https://github.com/MH4GF/css-bundling-rails-dartsass-demo
    31

    View Slide