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';
    ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

[zwjohn]

The same here

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:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

[PhilFlash]

Same problem here 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:theme-purple:1:8:
  1 │ @import 'src/styles/_theme_purple.scss';
    ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

``

[crisbeto]

Following up here: fixing these deprecation warnings will change the order in which some CSS will be generated which can break some users so we want to delay them until v19. To address the issue we'll:

1. Downgrade the CLI to a version before the warning started being logged (see build: downgrade sass version angular-cli#28234). If you're managing the Sass dependency yourself, you should set the version to be lower than 1.77.7.
2. Land fix(multiple): account for mixed declarations in latest Sass version #29596 in v19.
3. Talk to the Sass team to see if there's a better way to handle it on our end, like potentially a new syntax.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}