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

17

Description

I'm not sure if this is technically a Material regression, as this may be more of a Stackblitz thing. But I am not sure where to file that, and this seems like this should be on the radar for the Material docs users using Firefox.

I was trying to run Material doc examples in Firefox. After messing around, I was able to fix it by commenting out some of the root SCSS. In particular, something about the @use '@angular/material' as mat will cause Firefox ran Stackblitz projects to hang on the "ng serve --> Building..." phase in the terminal and "Installing dependencies" step of the container loader.

Below is what has to be done to any Material styled file to get them to work, nullifying theming.

// @use '@angular/material' as mat;
body {
 font-family: Roboto, 'Helvetica Neue', sans-serif;
 margin: 0;
 padding: 30px;
 height: 100%;
 // @include mat.theme((
 // color: (
 // theme-type: light,
 // primary: mat.$azure-palette,
 // tertiary: mat.$blue-palette,
 // ),
 // typography: Roboto,
 // density: 0,
 // ));
}
html {
 height: 100%;
}

Same applies to other theming file locations, like in-component styles which are just

 styles: `
 @use '@angular/material' as mat;
 `,

Reproduction

StackBlitz link:

• Broken: 20.1 with styling (won't ever finish building and actually load on Firefox): https://stackblitz.com/edit/yypvtgbi?file=src%2Fexample%2Fautocomplete-auto-active-first-option-example.ts

• Works: 20.1 without styling (will load on Firefox): https://stackblitz.com/edit/yypvtgbi-uz1gcmh1?file=src%2Fexample%2Fautocomplete-auto-active-first-option-example.ts

Additionally, here are links from the v18 and v19 docs that can pop open a pre-existing Stackblitz with the same issue

• 18: https://v18.material.angular.dev/components/autocomplete/examples
• 19: https://v19.material.angular.dev/components/autocomplete/examples

Steps to reproduce:

1. Open Firefox
2. Open both links
3. Observe that "20.1 without styling" loads
4. Observe that "20.1 with styling" hangs
5. Note the difference between both's root styles.scss

Expected Behavior

App serves and loads

Actual Behavior

App hangs on "ng serve --> Building..." in the terminal and the "Installing dependencies" step of the container loader.

Environment

This applies to any previous version using the new theming API, so v18 and v19 as well as v20. And I observed this as late as the latest prerelease today.

• Angular: 20.1.0
• CDK/Material: 20.1.0
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11, Ubuntu 24 (VM), and macOS