Hide dart-sass warnings by enforcing node-sass

[fregante]

Related:

• #688 New Autosuggest component for SelectorSelectorField #1059 (comment)
• Switch from node-sass to dart-sass #975

In short:

• typescript-plugin-css-modules installed sass
• sass-loader picks it up automatically over the existing node-sass
• Bootstrap isn't liked by dart sass

Before

580 omitted

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

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

    ╷
302 │ $headings-margin-bottom:      $spacer / 2 !default;
    │                               ^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 302:31  @import
    src/vendors/theme/app/app.scss 17:9                 root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

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

    ╷
302 │ $headings-margin-bottom:      $spacer / 2 !default;
    │                               ^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 302:31  @import
    src/vendors/theme/app/app.scss 17:9                 @import
    src/options.scss 17:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($input-padding-y, 2)

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

    ╷
498 │ $input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
    │                                                                         ^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 498:73  @import
    src/vendors/theme/app/app.scss 17:9                 root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($input-padding-y, 2)

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

    ╷
498 │ $input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
    │                                                                         ^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 498:73  @import
    src/vendors/theme/app/app.scss 17:9                 @import
    src/options.scss 17:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($custom-control-indicator-size, 2)

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

    ╷
568 │ $custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
    │                                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 568:49  @import
    src/vendors/theme/app/app.scss 17:9                 root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($custom-control-indicator-size, 2)

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

    ╷
568 │ $custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
    │                                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 568:49  @import
    src/vendors/theme/app/app.scss 17:9                 @import
    src/options.scss 17:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

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

    ╷
713 │ $nav-divider-margin-y:              $spacer / 2 !default;
    │                                     ^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 713:37  @import
    src/vendors/theme/app/app.scss 17:9                 root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

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

    ╷
713 │ $nav-divider-margin-y:              $spacer / 2 !default;
    │                                     ^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 713:37  @import
    src/vendors/theme/app/app.scss 17:9                 @import
    src/options.scss 17:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

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

    ╷
718 │ $navbar-padding-y:                  $spacer / 2 !default;
    │                                     ^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 718:37  @import
    src/vendors/theme/app/app.scss 17:9                 root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

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

    ╷
718 │ $navbar-padding-y:                  $spacer / 2 !default;
    │                                     ^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_variables.scss 718:37  @import
    src/vendors/theme/app/app.scss 17:9                 @import
    src/options.scss 17:9                               root stylesheet

DEPRECATION WARNING on line 12, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
12 │     } @elseif type-of($item) == 'color' {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 13, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
13 │     } @elseif $item != null {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 12, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
12 │     } @elseif type-of($item) == 'color' {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 13, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
13 │     } @elseif $item != null {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 12, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
12 │     } @elseif type-of($item) == 'color' {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 13, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
13 │     } @elseif $item != null {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 12, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
12 │     } @elseif type-of($item) == 'color' {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 13, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
13 │     } @elseif $item != null {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 12, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
12 │     } @elseif type-of($item) == 'color' {
   │       ^^^^^^^
   ╵

DEPRECATION WARNING on line 12, column 7 of node_modules/compass-mixins/lib/compass/functions/_cross_browser_support.scss: 
@elseif is deprecated and will not be supported in future Sass versions.

Recommendation: @else if
   ╷
12 │     } @elseif type-of($item) == 'color' {
   │       ^^^^^^^
   ╵

WARNING: You probably don't mean to use the color value blue in interpolation here.
It may end up represented as blue, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "blue").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value blue in interpolation here.
It may end up represented as blue, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "blue").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value indigo in interpolation here.
It may end up represented as indigo, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "indigo").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value indigo in interpolation here.
It may end up represented as indigo, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "indigo").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value purple in interpolation here.
It may end up represented as purple, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "purple").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value purple in interpolation here.
It may end up represented as purple, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "purple").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value pink in interpolation here.
It may end up represented as pink, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "pink").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value pink in interpolation here.
It may end up represented as pink, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "pink").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value red in interpolation here.
It may end up represented as red, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "red").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value red in interpolation here.
It may end up represented as red, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "red").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value orange in interpolation here.
It may end up represented as orange, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "orange").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value orange in interpolation here.
It may end up represented as orange, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "orange").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value yellow in interpolation here.
It may end up represented as yellow, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "yellow").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value yellow in interpolation here.
It may end up represented as yellow, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "yellow").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value green in interpolation here.
It may end up represented as green, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "green").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value green in interpolation here.
It may end up represented as green, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "green").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value teal in interpolation here.
It may end up represented as teal, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "teal").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value teal in interpolation here.
It may end up represented as teal, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "teal").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value aqua in interpolation here.
It may end up represented as cyan, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "aqua").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value aqua in interpolation here.
It may end up represented as cyan, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "aqua").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value white in interpolation here.
It may end up represented as white, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "white").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value white in interpolation here.
It may end up represented as white, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "white").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value gray in interpolation here.
It may end up represented as gray, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "gray").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value gray in interpolation here.
It may end up represented as gray, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "gray").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: You probably don't mean to use the color value black in interpolation here.
It may end up represented as black, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "black").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              root stylesheet

WARNING: You probably don't mean to use the color value black in interpolation here.
It may end up represented as black, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "black").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

WARNING: 70 repetitive deprecation warnings omitted.

WARNING: 70 repetitive deprecation warnings omitted.

After

// 😌 

[twschiller]