Skip to content

Replace sassc-rails with Dart sass in GitLab project

Part of: &5923 (closed)

We should replace libsass based SASS implementations in projects, given that it is outdated.

We received a Community contribution from @ar-mali with: !140611 (merged). We have iterated quite a lot, but I think this is the current implementation plan to replace the gem sassc-rails (which uses libsass) with npm sass.

  • Remove globbed import usage: !141011 (merged)
  • Use CSS url() instead of sassc-rails specific functions: !141055 (merged)
  • Replace nested @import inside print: !141016 (merged)
  • Add the cssbundling gem which is framework agnostic, just expects CSS assets in app/assets/builds/. Otherwise all the rails helpers stay the same. This is been done with: !140611 (merged)
  • Add a node script which compiles our SCSS assets into app/assets/builds. This has been extracted from aforementioned MR into: !141775 (merged)
  • Write scripts which compile both versions and compare them. Potentially merge this into the big MR: gitlab-community/gitlab!15
  • Create a way to integrate the node code into webpack mode: !142978 (merged)
  • Create a way to integrate the node code into vite development mode: !142978 (merged)
  • Make a switch on the GDK level. Potentially this isn't needed, if we find enough volunteers: gitlab-development-kit!3537 (merged)
  • Analyze the diff between both production builds. We should also look at the diff without minifiying and then prettifying to see that this process doesn't mess with things.
  • Make a switch on the CI level: !144479 (merged)
  • Remove sassc-rails code and cleanup USE_NEW_CSS_PIPELINE remainders: !145930 (merged)

Follow-ups:

  • Investigate sass-embedded over sass for faster, async operations
  • Investigate moving autoprefixer from a gem to node as well
Edited by Lukas Eipert