search

twbs / bootstrap-rubygem

Bootstrap rubygem for Rails / Sprockets / Hanami / etc
https://rubygems.org/gems/bootstrap
MIT License
2.02k stars 447 forks source link

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

Open jensb opened 1 month ago

jensb commented 1 month ago

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 commented 1 day ago

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