💰 0 USDT Bounty - "ESBuild SCSS style budget assessments change dra.."

Bounty

ESBuild SCSS style budget assessments change drastically if source maps are enabled created by @yevheniiaKhmara on Pomelo Bounties

Summary

Implement a fix for the issue described in the job description, where ESBuild SCSS style budget assessments change drastically if source maps are enabled. This issue is present in the Angular CLI version 17.0.6 and its dependencies.

Apply

https://bounties.pomelo.io/ac1aab1f4c12

Original Issue

https://github.com/angular/angular-cli/issues/26676

Title

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

Body

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

Create a new Angular app with ng new, using SCSS as the stylesheet format
Add the contents of this file to app.component.scss
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
In the production build configuration in angular.json, add "sourceMap": true,
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.

Base Reward

0.0500 USDT

Note

For technical discussion use the original issue. This issue is for tracking the bounty application and implementation progress.

pomelo-io / bounties-issues-dev