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

2022年10月22日 Kaigi on Rails 2022 で発表したスライドです。
https://kaigionrails.org/2022/talks/mh4gf/

参考実装: https://github.com/MH4GF/css-bundling-rails-dartsass-demo

引用したURL

- P5: https://sass-lang.com/blog/the-module-system-is-launched#future-plans
- P11: https://2021.stateofcss.com/ja-JP/technologies/
- P14: https://sass-lang.com/documentation/at-rules/import
- P16: https://sass-lang.com/documentation/at-rules/use
- P17: https://sass-lang.com/blog/the-module-system-is-launched#future-plans
- P18: https://github.com/sass/sass/issues/3276#issuecomment-1090803953
- P22: https://github.com/rails/dartsass-rails
- P23: https://github.com/rails/cssbundling-rails
- P26: https://sass-lang.com/blog/the-module-system-is-launched#automatic-migration

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