Command

build

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

20.3.4

Description

Issue:
After upgrading from Angular 20.3.4 to Angular 21.0.0, component CSS files compiled from SCSS are 40-50% larger despite no changes to the SCSS source files. This causes previously passing anyComponentStyle budget checks to fail.

Reproduction:

• Project with Angular 20.3.4 and component SCSS files
• Production build passes with anyComponentStyle budget of 10KB
• Upgrade to Angular 21.0.0 (no SCSS changes)
• Same build now fails - CSS files are 14-18KB (40-50% larger)

Example SCSS file (~50 lines, clean code):

popup {
  margin: -15px 0 0;
  left: 5px !important;
  top: 55px !important;
  [slot="content"] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

popup::part(popup) {
  border-top: none;
  @media (max-width: 600px) {
    width: 94.5% !important;
  }
}

menu-item::part(menu-item) {
  padding-left: 10px;
}

.menu-item-margin {
  margin-left: 15px;
}

.menu-item-text-width {
  max-width: 70%;
  display: inline-flex;
  margin-right: 5px;
}

• Angular 20.3.4 output: <10KB
• Angular 21.0.0 output: ~15KB
• Same SCSS source, different compiled output

Error:
C:/path/to/example.component.scss exceeded maximum budget.
Budget 10.00 kB was not met by 5.05 kB with a total of 15.05 kB.

Environment:

• Angular CLI: 21.0.0
• Node: 22.14.0
• Package Manager: yarn 1.22.22
• OS: win32 x64

Angular:

• @angular-devkit/build-angular: 21.0.0
• @angular/cli: 21.0.0
• @angular/compiler-cli: 21.0.0

Additional context:

• 23 component SCSS files now exceed 10KB budget
• Total additional CSS: ~115KB uncompressed (~25-30KB gzipped)
• Same SCSS source produces different (larger) CSS output
• No changes to SCSS files, only Angular version changed
• Budget configuration was identical in both versions
• This affects production bundle size and performance

Expected Behavior:
CSS output size should remain similar or decrease with optimization improvements in Angular 21.

Actual Behavior:
CSS output increased by 40-50%, breaking existing budget configurations that worked in Angular 20.3.4.

Minimal Reproduction

• Create Angular project with Angular 20.3.4
• Add component with SCSS file (~50 lines of clean styles)
• Configure angular.json with budget: "anyComponentStyle": { "maximumError": "10kb" }
• Run ng build --configuration production - build succeeds, CSS < 10KB
• Upgrade to Angular 21.0.0 (no SCSS changes)
• Run ng build --configuration production - build fails, CSS ~15KB

Exception or Error

Error: C:/path/to/component.component.scss exceeded maximum budget. 
Budget 10.00 kB was not met by 5.05 kB with a total of 15.05 kB.

Your Environment

Angular CLI: 21.0.0
Node: 22.14.0
Package Manager: yarn 1.22.22
OS: win32 x64

Anything else relevant?

• Affects 23+ component SCSS files in our project
• Total additional CSS: ~115KB uncompressed (~25-30KB gzipped)
• Same SCSS source produces different (larger) CSS output
• No changes to SCSS files, only Angular version changed
• Budget configuration was identical in both versions