kobotoolbox / kpi / 17803490223 / 2

81%

master: 76%

push

github

chore(sass): update sass and sass-loader DEV-999 (#6237)


### 💭 Notes
Updates all areas where sass gave deprecation warnings. These include
the following and their concequences:
1. no more `@import`
- started the process with the reccomended
[`sass-migrator`](https://github.com/sass/migrator#readme) module. It
gave us a suggestion to use `@include meta.load-css(<some_css_file>)` in
`main.css`
    - elsewhere I replaced `@import` with `@use`
- this forced me to use explicit imports, such as `mdl.$font` instead of
just `$font`
2. `lighten()` and `darken()` are replaced with
`sass:color.adjust($color, $lightness: <value>)`, where darkening is a
negative value
3. The [use of style
modules](https://sass-lang.com/documentation/breaking-changes/legacy-js-api/)
was deprecated in the `sass` and `sass-loader` modules themselves, which
needed to be updated
4. Some styles would be very time consuming to import because they're
not defined in generic styles (assuming we don't want to use `@use ...
as *` all the time) and some styles' usefulness aren't very clear, so I
left FIXME comments on those styles

### 👀 Preview steps

1. run `npm run watch` on main
2. 🔴notice that there's a bunch of deprecation warnings
3. checkout this branch
4. run `npm i` to update `sass` and `sass-loader`
5. run `npm run watch`
6. 🟢notice there are no deprecation warnings
1. ℹ️ have an account and a project
7. Navigate around the app and try to find places with broken CSS
8. 🟢notice that there are no places with broken CSS 🤞

6944 of 10925 branches covered (63.56%)

26679 of 32842 relevant lines covered (81.23%)

0.81 hits per line