Fix SASS @import deprecation warnings

[bstansberry]

When we run bundle exec jekyll serve there are a bunch of deprecation warnings related to SASS and is @import tag.

I played a bit with using the sass migrator that they recommend on the page the deprecation warnings point to, but I failed. I have no idea what I'm doing though.

My failure:

$ sass-migrator --migrate-deps module assets/css/main.scss
Error: expected "{".
  ╷
6 │ $baseurl: "{{ site.baseurl }}";
  │                               ^
  ╵
  assets/css/main.scss 6:31  root stylesheet

The warnings I'm talking about:

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 "global";
  │         ^^^^^^^^
  ╵
    /home/bstansbe/dev/wildfly/wildfly.org/assets/css/main.scss 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 "grid";
  │         ^^^^^^
  ╵
    /home/bstansbe/dev/wildfly/wildfly.org/assets/css/main.scss 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 "colors";
  │         ^^^^^^^^
  ╵
    /home/bstansbe/dev/wildfly/wildfly.org/assets/css/main.scss 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 "asciidoc";
  │         ^^^^^^^^^^
  ╵
    /home/bstansbe/dev/wildfly/wildfly.org/assets/css/main.scss 7: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

  ╷
8 │ @import "copy";
  │         ^^^^^^
  ╵
    /home/bstansbe/dev/wildfly/wildfly.org/assets/css/main.scss 8:9  root stylesheet
Warning: 16 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
asciidoctor: WARNING: simple-microservice-infinispan-part2.adoc: line 23: section title out of sequence: expected level 2, got level 3
asciidoctor: WARNING: simple-microservice-infinispan-part2.adoc: line 49: section title out of sequence: expected level 2, got level 3
asciidoctor: WARNING: simple-microservice-infinispan-part2.adoc: line 98: section title out of sequence: expected level 2, got level 3
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

  ╷
1 │ @import "minima";
  │         ^^^^^^^^
  ╵
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1: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

   ╷
48 │   "minima/base",
   │   ^^^^^^^^^^^^^
   ╵
    minima.scss 48:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1: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

   ╷
49 │   "minima/layout",
   │   ^^^^^^^^^^^^^^^
   ╵
    minima.scss 49:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1: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

   ╷
50 │   "minima/syntax-highlighting"
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    minima.scss 50:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.

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

   ╷
18 │ $grey-color-light: lighten($grey-color, 40%) !default;
   │                    ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    minima.scss 18:20                                            @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [color-functions]: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 81.6%)
color.adjust($color, $lightness: 40%)

More info: https://sass-lang.com/d/color-functions

   ╷
18 │ $grey-color-light: lighten($grey-color, 40%) !default;
   │                    ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    minima.scss 18:20                                            @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.

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

   ╷
19 │ $grey-color-dark:  darken($grey-color, 25%) !default;
   │                    ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    minima.scss 19:20                                            @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [color-functions]: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -49.0384615385%)
color.adjust($color, $lightness: -25%)

More info: https://sass-lang.com/d/color-functions

   ╷
19 │ $grey-color-dark:  darken($grey-color, 25%) !default;
   │                    ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    minima.scss 19:20                                            @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.

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

    ╷
110 │     color: darken($brand-color, 15%);
    │            ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.2/_sass/minima/_base.scss 110:12      @import
    minima.scss 48:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [color-functions]: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -28.5447761194%)
color.adjust($color, $lightness: -15%)

More info: https://sass-lang.com/d/color-functions

    ╷
110 │     color: darken($brand-color, 15%);
    │            ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.2/_sass/minima/_base.scss 110:12      @import
    minima.scss 48:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.

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

    ╷
235 │   color: lighten($text-color, 18%);
    │          ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.2/_sass/minima/_base.scss 235:10      @import
    minima.scss 48:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [color-functions]: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 19.2857142857%)
color.adjust($color, $lightness: 18%)

More info: https://sass-lang.com/d/color-functions

    ╷
235 │   color: lighten($text-color, 18%);
    │          ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.2/_sass/minima/_base.scss 235:10      @import
    minima.scss 48:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.

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

    ╷
240 │       background-color: lighten($grey-color-light, 6%);
    │                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.2/_sass/minima/_base.scss 240:25      @import
    minima.scss 48:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Deprecation Warning [color-functions]: lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 66.5217391304%)
color.adjust($color, $lightness: 6%)

More info: https://sass-lang.com/d/color-functions

    ╷
240 │       background-color: lighten($grey-color-light, 6%);
    │                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.2/_sass/minima/_base.scss 240:25      @import
    minima.scss 48:3                                             @import
    /home/bstansbe/dev/wildfly/wildfly.org/assets/main.scss 1:9  root stylesheet
Warning: 6 repetitive deprecation warnings omitted.

[hpehl]

Replacing @import with @use resolves most of the deprecation warnings but introduces new issues with namespaces (see https://stefaniefluin.medium.com/the-new-sass-module-system-out-with-import-in-with-use-e1bd8ba032d0)

I don't have fully understood how to resolve this, but I hope it can be fixed w/o prepending every variable with a namespace. I'll look into that after I've finished a PR related to the mini conference.

[hpehl]

Another more drastic solution would be to get rid of SCSS all together and replace it with pure CSS.

Nowadays, modern CSS supports all the features that were unique to SCSS in the past: Nested classes, color functions, variables, imports.

[bstansberry]

I was curious to know more about this so I did bstansberry@ad94054.

I hadn't seen your comments. But anyway, I'm not particularly interested in moving forward with that as all it does is resolve some of the warnings. Most of them are coming from minima, and we're using the latest minima, so there's no reason to expect they will be easy to resolve via a near-ish term updated.