components: bug(material-experimental/mdc-list): cannot compile scss after update to 11.2.2

Unable to compile scss after upgrading to angular/core, angular/material & @angular/material-experiemental with error

17 │ ┌       @include mdc-list-deprecated-item-disabled-text-color(
18 │ │         $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
   │ └──────────────────────────────────────────────────────────────────────────────────^

Reproduction

Use StackBlitz to reproduce your issue:

Components: https://stackblitz.com/fork/components-issue
Harnesses: https://stackblitz.com/fork/harness-issue

Steps to reproduce:

ng update @angular/core
ng update @angular/material --force
yarn remove @angular/material-experimental material-components-web
yarn add @angular/material-experimental material-components-web
ng serve

Expected Behavior

What behavior were you expecting to see? It should compile succesfully.

Actual Behavior

Throws out a scss error.

Error: ./apps/ng-outpost/src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
17 │ ┌       @include mdc-list-deprecated-item-disabled-text-color(
18 │ │         $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
   │ └──────────────────────────────────────────────────────────────────────────────────^
   ╵
  node_modules/@angular/material-experimental/mdc-core/option/_option-theme.scss 17:7  @content
  node_modules/@angular/material-experimental/mdc-helpers/_mdc-helpers.scss 228:3      mat-using-mdc-theme()
  node_modules/@angular/material-experimental/mdc-core/option/_option-theme.scss 12:3  mat-mdc-option-color()
  node_modules/@angular/material-experimental/mdc-core/option/_option-theme.scss 72:7  @content
  node_modules/@angular/material/core/theming/_theming.scss 342:3                      mat-private-check-duplicate-theme-styles()
  node_modules/@angular/material-experimental/mdc-core/option/_option-theme.scss 66:3  mat-mdc-option-theme()
  node_modules/@angular/material-experimental/mdc-core/_core-theme.scss 12:5           @content
  node_modules/@angular/material/core/theming/_theming.scss 342:3                      mat-private-check-duplicate-theme-styles()
  node_modules/@angular/material-experimental/mdc-core/_core-theme.scss 11:3           mat-mdc-core-theme()
  node_modules/@angular/material-experimental/mdc-theming/_all-theme.scss 27:5         @content
  node_modules/@angular/material/core/theming/_theming.scss 342:3                      mat-private-check-duplicate-theme-styles()
  node_modules/@angular/material-experimental/mdc-theming/_all-theme.scss 26:3         angular-material-mdc-theme()
  apps/ng-outpost/src/styles.scss 196:1                                                root stylesheet

My styles.scss at line 196.1 is

@include angular-material-mdc-theme($theme);

usual stuff going in the scss file.

$theme: mat-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      // warn: $slogr-warn,
    ),
    typography: $typography-config,
    density: minimum,
  )
);

// Theme Init
@include angular-material-theme($theme);
@include angular-material-mdc-theme($theme);

Environment

Angular: 11.2.7
CDK/Material: 11.2.7
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): macOS

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (16 by maintainers)

Commits related to this issue

chore: reproduce https://github.com/angular/components/issues/22409 — committed to DevIntent/material.angular.io by Splaktar 3 years ago
fix(material-experimental): update the required MDC version to 11.0.0-canary.3201cae47.0 - required due to the use of the `mdc-list-deprecated-item-disabled-text-color` mixin Fixes #22409. Related t... — committed to DevIntent/components by Splaktar 3 years ago
fix(material-experimental/mdc-core): update the required MDC version - `11.0.0-canary.3201cae47.0` is required due to the use of the `mdc-list-deprecated-item-disabled-text-color` mixin Fixes #224... — committed to DevIntent/components by Splaktar 3 years ago
build: update MDC to match the version required by v11.2.2+ Relates to https://github.com/angular/components/pull/22608. Relates to https://github.com/angular/components/issues/22409. — committed to DevIntent/material.angular.io by Splaktar 3 years ago
build: update MDC to match the version required by v11.2.2+ Relates to https://github.com/angular/components/pull/22608. Relates to https://github.com/angular/components/issues/22409. — committed to angular/material.angular.io by Splaktar 3 years ago
fix(material-experimental/mdc-core): update the required MDC version (#22608) - `11.0.0-canary.3201cae47.0` is required due to the use of the `mdc-list-deprecated-item-disabled-text-color` mixin ... — committed to angular/components by Splaktar 3 years ago

Most upvoted comments

The material-experimental SCSS is currently broken. Since @angular/components v11.2.2, the code tries to use mixins that are only present in MCW v11.0.0 - but if you upgrade to that version, the mdc-checkbox SCSS stops working because v11 moved deprecated styles that it uses.

So it seems there are no released @angular/components and MCW versions that you can make work.

lqc on Apr 27, 2021

Thanks Splaktar

debuggerpk on May 14, 2021

This is fixed in https://github.com/angular/components/commit/b5224ea4a99b55678faed5d6b8546007b820d39b which should be part of 11.2.13.

Splaktar on May 14, 2021

The following combo should work

"material-components-web": "11.0.0-canary.3201cae47.0"
"@angular/material-experimental": "11.2.11",

PR https://github.com/angular/components/pull/22608 updates the peerDependencies in 11.2.x to be "material-components-web": "^11.0.0-canary.3201cae47.0".

Splaktar on May 1, 2021

if we go by this file and line 20 … then we should have a mixin as deprecated-item-disabled-text-color in @material/list.

@use './mixins';
@include mixins.deprecated-core-styles;

The above code is from @material/list/mdc-list.scss. On close inspection of deprecated-core-styles from @material/list/_mixins.scss], we can find this

@mixin deprecated-item-disabled-text-color(
  $color,
  $query: feature-targeting.all()
) {
  $feat-color: feature-targeting.create-target($query, color);

  .mdc-deprecated-list-item--disabled {
    .mdc-deprecated-list-item__text,
    .mdc-deprecated-list-item__primary-text,
    .mdc-deprecated-list-item__secondary-text {
      @include feature-targeting.targets($feat-color) {
        @include theme.prop(color, $color);
      }
    }
  }
}

I have recloned my repo, cleared my yarn cache, removed yarn.lock just to make sure that something is not wrong with my setup … but i still have the issue.

debuggerpk on Apr 14, 2021