bug(material/slide-toggle): Sass deprecation warning since v18.2.0

[json-derulo]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

18.1.x

Description

After updating to Angular 18.2.0 in an app using Angular Material with a custom theme, the following Sass warning is produced:

▲ [WARNING] Deprecation [plugin angular-sass]

    node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss:46:6:
      46 │       --mdc-switch-disabled-label-text-color: #{inspection.get-the...
         ╵       ^

          $theme,
          foreground,
          disabled-text
        )};

  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

The warning originates from the Slide Toggle theme:

components/src/material/slide-toggle/_slide-toggle-theme.scss

Line 46 in 4f2bc4d

--mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(

Reproduction

StackBlitz link: https://stackblitz.com/edit/tq6jmr?file=src%2Fstyles.scss
Steps to reproduce:

1. Build / start the project

Expected Behavior

No Sass warning produced

Actual Behavior

Sass warning is produced

Environment

Angular CLI: 18.2.0
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 18.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, material-experimental
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1802.0
@angular-devkit/build-angular 18.2.0
@angular-devkit/core 18.2.0
@angular-devkit/schematics 18.2.0
@schematics/angular 18.2.0
rxjs 7.4.0
typescript 5.4.5
zone.js 0.14.6

[martinboue]

Same observation with M3 custom theme.

[crisbeto]

What version of Sass are you running?

[json-derulo]

I'm not overriding the Sass version, I'm using the one from @angular-devkit/build-angular. Their sass version is v1.77.8. According to the sass changelog, this warning was added with v1.77.7.

[xylplm]

I also encountered the same problem after upgrading to Angular 18.2.0

`▲ [WARNING] Deprecation [plugin angular-sass]

node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss:46:6:
  46 │       --mdc-switch-disabled-label-text-color: #{inspection.get-the...
     ╵       ^

      $theme,
      foreground,
      disabled-text
    )};

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

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:2:8:
  2 │ @import 'src/assets/scss/style.scss';
    ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~`