ESBuild SCSS style budget assessments change drastically if source maps are enabled

[HiReception]

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

No response

Description

When using either of the new esbuild-based builders (application and browser-esbuild), if SCSS stylesheets and source maps are both used, the calculation of the style file sizes for budget verification results in drastically increased reported sizes.

Minimal Reproduction

1. Create a new Angular app with ng new, using SCSS as the stylesheet format
2. Add the contents of this file to app.component.scss
3. Run ng build - the build fails because the app.component.scss style file exceeds budget; this is expected, but the key note is that the listed size of the style file is 20.17 kB
4. In the production build configuration in angular.json, add "sourceMap": true,
5. Run ng build again - the build again fails due to budget breaches, but the listed size of the style file in question is now 77.26 kB

Exception or Error

Expected error: 
X [ERROR] src/app/app.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 16.17 kB with a total of 20.17 kB.

Actual error:
X [ERROR] src/app/app.component.scss exceeded maximum budget. Budget 4.00 kB was not met by 73.26 kB with a total of 77.26 kB.

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.0.6
Node: 20.10.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 17.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.6
@angular-devkit/build-angular   17.0.6
@angular-devkit/core            17.0.6
@angular-devkit/schematics      17.0.6
@schematics/angular             17.0.6
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

This is based on the second point of #26523, which was closed due to a lack of reproduction, but it appears the scope of the issue is broader than that described in the original post; even without any @use commands present in the style file, I was able to reproduce the size discrepancy.

[clydin]

Component stylesheets use inline source maps due to the stylesheets being embedded inside the component's code. Source maps include all the original code plus mappings for each alteration. Inline source maps are also base64 encoded which typically adds 33% to the size.
As a result, turning on source maps for stylesheets can result in significantly larger application output. This is one of the reasons the default configuration of a newly generated project is to only use source maps in development. The other large reason is build time since source maps can be expensive to process.

[HiReception]

Thank you for the response @clydin. You make a good point, and to be truthful I had forgotten until your reply that the sourceMap option supports both a boolean and an object. I had mistakenly assumed the boolean to represent just script source maps, which suffices for our purposes.

However, given that the component budget calculation doesn't change even with style source-maps enabled in the old browser, is it expected that it would be with the esbuild-based one? Given your argument, it may well be that it's "a good idea" to count them in the budget because they still count to the network payload for the user, but it may be worth noting that it's an intended change in the documentation.