Address Sass compile warnings
What does this MR do and why?
Certain syntax has been deprecated by Sass and it results in many warnings, visible during compiling of CSS assets by Vite.
This MR aims to reduce these warnings to make Vite debugging easier, as well as future proof our Sass code.
How?
Most of the updates here were done automatically by the Sass migration tool, locally I ran:
$ npm install -g sass-migrator
$ sass-migrator division app/assets/stylesheets/**/*.scssAs well as adding one more fix manually, mentioned below.
References
- Related issue: Fix sass compile warnings (when running vite) (#557045 - closed)
- Vite feedback: Vite developer experience feedback (#423851)
- Deprecation and migration path: https://sass-lang.com/documentation/breaking-changes/slash-div/
Screenshots or screen recordings
Our Vite logs was riddled with warnings when we did gdk tail vite. Note: Some warnings as still present, but at least the I can follow the log without a barrage of warnings.
| Before | After |
|---|---|
 
|
|
No changes are expected in the appearance, the output of the compiled CSS is the same.
How to set up and validate locally
This is easy to verify manually, we can check that styles.application.scss does not change, locally the file is located at: https://gdk.test:3038/vite-dev/stylesheets/styles.application.scss. I added screenshot to some of these verification in the comments.
Bonus: Run gdk tail vite and enjoy a readable log.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #557045 (closed)