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

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

  2. Hirotaka Miyagi @MH4GF •ϑϦʔϥϯεΤϯδχΞ •גࣜձࣾϏοτδϟʔχʔ͞Μͷ Kibelaͷ։ൃνʔϜʹࢀՃ͍ͯ͠· ͢ 2

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

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

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

  6. • ͔͠͠sassc-railsͰ͸@use͸αϙʔτ͞Ε͍ͯ·ͤΜ😇 • ͱ͍͏͜ͱ͸@importΛ@useʹҠߦ͢Δલʹɺsassc-railsΛผͷԿ͔ʹม͑Δ ඞཁ͕͋Δͬͯ͜ͱ…!? 6

  7. ࠓճͷηογϣϯͷ໨త͸ɺ ʮSassͷݱࡏ஍΍पล஌ࣝΛͬ͘͟Γཧղ͠ɺ ໌೔͔ΒҠߦͷΞΫγϣϯΛ࢝ΊΒΕΔঢ়ଶʯ ʹͳΔ͜ͱͰ͢ 7

  8. ࠓ೔ͷΞδΣϯμ • Sassपลͷࣄલ஌ࣝͷ঺հ • Ҡߦʹ͓͚Δํ਑ • ҠߦϓϩηεͰؾ͍ͮͨ͜ͱ 8

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

  10. Sassͱ͸ • CSSͷεʔύʔηοτɾϓϦϓϩηοα • ม਺ɾؔ਺ɾωετʹΑΔߏ଄Խ͕ಛ௃ 10

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

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

    Sassʹ͔࣮͠૷͞Ε͍ͯͳ͍ • sassc-rails͸LibSassΛ࣮ߦ͢Δ • Ruby Sass͸EOL ⚰ͰɺLibSass͸ඇਪ঑ • อक͸ܧଓ͞ΕΔ͕৽ػೳ͸αϙʔτ͞Εͳ͍ͨΊɺCSS/Sassߏจͷޓ ׵ੑ͔Βঃʑʹဃ཭͍ͯ͘͠ 12
  13. @import • ϑΝΠϧ෼ׂΛ࣮ݱ͢ΔͨΊͷߏจ 13

  14. @import͸ͳͥඇਪ঑ͳͷ͔ʁ • શͯͷfunctionɾmixinɾvariable͕άϩʔόϧͰΞΫηεͰ͖ΔΑ͏ ʹͳΔͨΊɺఆٛͷڝ߹͕͠͹͠͹ى͖Δ • ಛఆͷఆ͕ٛͲ͜Ͱ࢖ΘΕΔ͔Λ୳ࡧ͢Δ͜ͱ͕ࠔ೉ • ಉ͡ϑΝΠϧΛෳ਺ճ@importͰݺͼग़ͯ͠͠·ͬͨ৔߹ɺݺͼग़͠ ͨճ਺෼ධՁ͞Εͯ͠·͏ 14

    https://sass-lang.com/documentation/at-rules/import
  15. @use 15 ม਺ͱmixinΛఆٛ @useͰར༻Λએݴ cornersͷωʔϜεϖʔεͰݺͼग़͢

  16. @use • ϝϯόݺͼग़͠ʹ໊લۭؒΛ໌ࣔ͢ΔͨΊɺάϩʔόϧͳఆٛͷॏෳ Λؾʹͤͣྑ͘ͳͬͨ 👍 • ಉ͡ϑΝΠϧΛෳ਺ճ@useͰݺͼग़ͯ͠΋Ұ౓ͷΈධՁ͢ΔΑ͏ʹ ͳͬͨ 👍 •

    privateͳม਺ͳͲɺՄࢹੑͷ੍ޚ͕Ͱ͖ΔΑ͏ʹͳͬͨ👍 16 https://sass-lang.com/documentation/at-rules/use
  17. ͍ͭ·Ͱʹ@useʹҠߦ͢Ε͹ྑ͍ͷ͔ʁ • ݩʑ͸2022/10/01·ͰʹϝδϟʔόʔδϣϯͷΞοϓάϨʔυΛ࣋ͬ ͯ࡟আ͞ΕΔ༧ఆ͕ͩͬͨɺLibSassͷඇਪ঑ԽΛड͚Ԇظ͞Εͨ • 80%ͷϢʔβʔ͕Dart SassʹҠߦ͢ΔͷΛ଴ͪɺͦͷޙগͳ͘ͱ΋1 ೥ɺ͓ͦΒ͘΋ͬͱ଴͔ͬͯΒ׬શʹ࡟আ͢Δ༧ఆ 17 https://sass-lang.com/blog/the-module-system-is-launched#future-plans

  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೥Ҏ಺ͰҠߦ͓ͯ͘͠ͷ͕ແ೉
  19. Ҡߦʹ͓͚Δํ਑ 19

  20. Ҡߦʹ͓͚Δํ਑ 1. sassc-railsΛ࡟আ͠DartSassΛRailsͰ࢖͑ΔΑ͏ʹ͢Δ 2. @import͔Β@useʹ੾Γସ͑Δ 3. (@useΒ͍͠ઃܭʹ੾Γସ͍͑ͯ͘) 20

  21. RailsͰDartSassΛѻ͏ํ๏͸ʁ • 3ͭ͋Δ • dartsass-rails gem • css-bundling-rails gem •

    webpackͷsass-loader 21
  22. dartsass-rails • SassͷόΠφϦ͕಺แ͞Ε͓ͯΓɺNodeͳͲͷϥϯλΠϜͳ͠ʹ࣮ ߦՄೳ • assets:precompileͷઌ಄ʹbuild༻RakeTaskΛࠩ͠ࠐΉ 22 → importmap-railsར༻ԼͳͲɺwebpack΍nodeʹґଘ͠ͳ͍؀ڥͰͷར༻Λ૝ఆ https://github.com/rails/dartsass-rails

  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Λར༻͢ΔͨΊɺॊೈʹ࣮ߦ಺༰Λ੍ޚՄೳ
  24. Webpackͷsass-loader • WebpackʹόϯυϦϯάͤ͞Δํ๏ • ࠓ೔͸࣌ؒͷ౎߹্লུ 24

  25. ͲΕΛબ΂͹͍͍ͷ͔ʁ • NodeΛར༻͍ͯ͠ΔϓϩδΣΫτͰ͋Ε͹cssbundling-rails͔Webpack Λ࢖͏ͷ͕ྑ͍ • npmͷsassʹґଘ͢ΔͨΊdependabotͳͲͰͷΞοϓσʔτ͕Մೳ • ϑϩϯτΤϯυίϛϡχςΟͷ৘ใΛద༻Ͱ͖Δ • 2ͭͷͲͪΒΛ࢖͏͔͸Webpackʹґଘͤ͞Δ͔͠ͳ͍͔Ͱݕ౼͢Δ

    • Dartsass-rails͸ɺsassͷόʔδϣϯΞοϓ͕ߦΘΕ͍ͯͳ͍ͷ͕ؾʹͳΔ 25
  26. @import͔Β@use΁ͷॻ͖׵͑ • Sassެ͔ࣜΒఏڙ͞Ε͍ͯΔϚΠάϨʔλʔ͕͋ΔͷͰɺ·ͣͦΕΛ ࢼ͢ͷ͕ྑ͍ • @import͔Β@use΁ͷॻ͖׵͑ɺ֤ఆٛͷར༻ՕॴͰͷ໊લۭؒͷ ෇༩ͳͲ 26 https://sass-lang.com/blog/the-module-system-is-launched#automatic-migration

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

  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͕ॲཧͯ͘͠Ε͍ͯͳ͍͔ʁΛ֬ೝ
  29. QAํ๏ • LibSass͔ΒDartSassʹ੾Γସ͑Δɾ@import͔Β@useʹ੾Γସ͑Δࡍͷ QAͱͯ͠͸࠷ऴతͳग़ྗCSSͷࠩ෼ΛνΣοΫ͢Δͱྑ͍ • Sassʹ͸outputStyleͱ͍͏Φϓγϣϯ͕͋Γɺexpandedʹઃఆ͢Δ͜ͱ ͰՄಡੑ͕ߴ·ΓdiffΛऔΔ͜ͱ͕Ͱ͖Δ • Kibelaͷ৔߹ϕϯμʔϓϨϑΟοΫεͷ࡟আ΍௥Ճɺbackground-image ͷύε͕มΘΔͳͲ͕͋ͬͨ

    • QAͷൣғΛߜΔ͜ͱ͕Ͱ͖Δ 29
  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
  31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ cssbundling-rails + dartsassͷݕূ࣮૷ΛGitHubʹࡌ͍ͤͯ·͢ https://github.com/MH4GF/css-bundling-rails-dartsass-demo 31