Angular 21 produces significantly larger CSS output from same SCSS source (40-50% increase) #32639
Description
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