bug(material/core/theming): after v12 update ng serve reload time for theming changes is too high

[Splaktar]

Reproduction

https://github.com/DevIntent/material.angular.io/tree/pre-sass-migrations

Steps to reproduce:

1. Clone
2. yarn
3. yarn start
4. Change files as mentioned below an observe reload times

Expected Behavior

After updating to v12 via ng update, my app should be generally usable for development and ng serve rebuild times in dev mode should be comparable or better than v11.

Actual Behavior

This is what I saw in a real world app

ng serve reload perf in a small-medium app

• TypeScript change: 1.8s
• Simple Sass change to a single feature component: 1.8s
• Change to styles.scss in root: 17s
• Change to a palette or other theming config: 110-120s
• Change to an independent variable in the same file as the theme config: 110-120s
• Change to a partial that is imported into styles.scss and used but doesn’t touch theming: 75s

From material.angular.io

ng serve reload perf after update to v12 w/o running opt-in migration and w/o running sass-migrator

• TypeScript change: 2.9s
• Simple Sass change to a single feature component: 2.8s
• Change to styles.scss in root: 15s
• Change to a palette or other theming config: 56-78s
• Change to an independent variable in the same file as the theme config: 74-77s
• Change to an independent style in the same file as the theme config: 81s
• Change to a simple partial that is imported into styles.scss and not used and doesn’t touch theming: 15s

These are both pretty small projects and the rebuild times for theming changes are pretty hard to handle. I'm worried that larger projects will see an even large impact here (4+ minutes or more to rebuild).

Running ng generate @angular/material:themingApi migrates the project's theming config to use Sass modules. After that ng serve rebuild times are expected to go back to normal.

• TypeScript change: 2.3s
• Simple Sass change to a single feature component: 2.1s
• Change to styles.scss in root: 14s
• Change to a palette or other theming config: 72s
• Change to an independent variable in the same file as the theme config: 68s

You can test this in this branch: https://github.com/DevIntent/material.angular.io/tree/post-theme-migration

Using latest master that has run both the theming migration and sass-migrator:

• TypeScript change: 7s
• Simple Sass change to a single feature component: 6s
• Change to styles.scss in root: 6s
• Change to a palette or other theming config: 8s
• Change to an independent variable in the same file as the theme config: 8s

Environment

• Angular: 12.0.0-next.9, 12.0.0-rc.0, 12.0.0-rc.1
• CDK/Material: 12.0.0-next.7, 12.0.0-rc.0, 12.0.0-rc.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS Catalina

[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.}