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
   

   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