Lots of errors after upgrading dartsass-sprockets to v3.1.0

[jensb]

After performing a bundle update on my Rails 7.1 project, the site is broken because the bootstrap gem uses @import heavily which is now deprecated. For example:

Deprecation Warning on line 1, column 9 of ../../../../bootstrap-5.3.3/assets/stylesheets/_bootstrap.scss: 
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 "bootstrap/mixins/banner";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
Deprecation Warning on line 7, column 9 of ../../../../bootstrap-5.3.3/assets/stylesheets/_bootstrap.scss: 
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 "bootstrap/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^
  ╵
Deprecation Warning on line 8, column 9 of ../../../../bootstrap-5.3.3/assets/stylesheets/_bootstrap.scss: 
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 "bootstrap/variables";
  │         ^^^^^^^^^^^^^^^^^^^^^
  ╵
Deprecation Warning on line 9, column 9 of ../../../../bootstrap-5.3.3/assets/stylesheets/_bootstrap.scss: 
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
  ╷
9 │ @import "bootstrap/variables-dark";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
Deprecation Warning on line 10, column 9 of ../../../../bootstrap-5.3.3/assets/stylesheets/_bootstrap.scss: 
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
   ╷
10 │ @import "bootstrap/maps";
   │         ^^^^^^^^^^^^^^^^
   ╵

Is there a version for SASS after version 3.0 planned that will help?

[rocket-turtle]

Maybe the Issue could be named: Dart Sass 3.0.0 Deprecation Warnings

I'm getting these deprecations:

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ┌──> ../../../../bootstrap-5.3.3/assets/stylesheets/bootstrap/_type.scss
38  │       font-family: $display-font-family;
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> ../../../../bootstrap-5.3.3/assets/stylesheets/bootstrap/vendor/_rfs.scss
136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │       @content;
138 │ │     }
    │ └─── nested rule
    ╵
    ../../../../bootstrap-5.3.3/assets/stylesheets/bootstrap/_type.scss 38:5                                                  @import
    ../../../../bootstrap-5.3.3/assets/stylesheets/_bootstrap.scss 17:9                                                       @import

Deprecation Warning: green() is deprecated. Suggestion:

color.channel($color, "green", $space: rgb)

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

   ╷
37 │   @return red($value), green($value), blue($value);
   │                        ^^^^^^^^^^^^^
   ╵
    ../../../../bootstrap-5.3.3/assets/stylesheets/bootstrap/_functions.scss 37:24                                            to-rgb()
    ../../../../bootstrap-5.3.3/assets/stylesheets/bootstrap/_variables.scss 846:31                                           @import
    ../../../../bootstrap-5.3.3/assets/stylesheets/_bootstrap.scss 8:9                                                        @import

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

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

    ╷
212 │   @return mix(black, $color, $weight);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    ../../../../bootstrap-5.3.3/assets/stylesheets/bootstrap/_functions.scss 212:11                                           shade-color()
    ../../../../bootstrap-5.3.3/assets/stylesheets/bootstrap/_variables.scss 84:12                                            @import
    ../../../../bootstrap-5.3.3/assets/stylesheets/_bootstrap.scss 8:9                                                        @import

[alagos]

Just be aware these aren't really "errors", but deprecation warnings, so your app will keep working. Anyway, they are noisy as hell and there's a way to turn them off, so I just added:

# in config/application.rb
config.sass.quiet_deps = true