SASS deprecation warnings

[taoeffect]

Problem

After troubleshooting #2543 I deleted my local node_modules and package-lock.json and recreated it.

Now I'm seeing these deprecation warnings on each grunt dev:

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
3 │ @import "_reset";
  │         ^^^^^^^^
  ╵
    - 3:9  root stylesheet

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
4 │ @import "_misc";
  │         ^^^^^^^
  ╵
    - 4:9  root stylesheet

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
5 │ @import "_variables";
  │         ^^^^^^^^^^^^
  ╵
    - 5:9  root stylesheet

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
6 │ @import "_typography"; // make sure this comes after _variables
  │         ^^^^^^^^^^^^^
  ╵
    - 6:9  root stylesheet

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
7 │ @import "_utilities";
  │         ^^^^^^^^^^^^
  ╵
    - 7:9  root stylesheet

Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use list.index instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
66 │   $i: index($titles, $size);
   │       ^^^^^^^^^^^^^^^^^^^^^
   ╵
    frontend/assets/style/_typography.scss 66:7  @import
    - 6:9                                        root stylesheet

Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use list.nth instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
72 │     line-height: #{nth($lineHeight, $i)}rem;
   │                    ^^^^^^^^^^^^^^^^^^^^
   ╵
    frontend/assets/style/_typography.scss 72:20  @import
    - 6:9                                         root stylesheet

Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

More info and automated migrator: https://sass-lang.com/d/import

    ╷
151 │   content: map-get($icons, $name);
    │            ^^^^^^^^^^^^^^^^^^^^^^
    ╵
    frontend/assets/style/_icons.scss 151:12            icon()
    frontend/assets/style/components/_forms.scss 152:5  @import
    - 18:9                                              root stylesheet

Warning: 19 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.

Solution

Fix by updating the scss files, and only if necessary, updating any related sass deps.

[SebinSong]

@taoeffect I can look into this yes. (I've actually dealt with this issue at my other company in NZ) but be noted that it's likely a large change to multiple scss files (replacing all @import with new @use rules was not simple updates as far as I remember).