Duplicate style rules from lib styles after upgrading to Angular 13

[ibanjo]

Which @angular/* package(s) are the source of the bug?

compiler, upgrade

Is this a regression?

Yes

Description

We are running an Angular application leveraging third-party stylesheet provided by our company. As in most common angular applications, we have a global stylesheet in which we import the aforementioned dependencies.

After upgrading to Angular v13 and its toolchain, we noticed an unexpected increase in the production mode bundle size. Inspecting the build stats, we found out that such increase was concentrated in the main styles.css file. With a deeper inspection in the minified file, we found out that many of the global imports were duplicated in the output stylesheet.

For us, this is a regression, since before the upgrade this duplication did not occur.

The link below brings to a Github repository where we demonstrate the issue with a simple @angular/material import. The branches are organized as follows:

master -> Angular 12, works as expected
feature/angular-13 -> Angular 13, duplicate entries in built style.css

We can also provide the unminified versions of the built styles.css bundles (v12 and v13, ready to be compared). Built from the same sources, the v13 indeed does have duplicate rules, while the v12 does not.

Please provide a link to a minimal reproduction of the bug

https://github.com/ibanjo/angular13-duplicate-styles-issue

Please provide the exception or error you saw

No exception, just an unexpected increase in the bundle size due to duplicate style rules. Console output from the sample repo below:

Angular 12

PS > ng build
- Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
√ Browser application bundle generation complete.
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.ce1d0611fa8de52d8f95.js      | main          | 194.64 kB
styles.b13c2c4cfb1815fefd68.css   | styles        |  71.65 kB
polyfills.f81649056b4914575a05.js | polyfills     |  36.21 kB
runtime.bcb3b17df8495b345ab5.js   | runtime       |   1.04 kB

                                  | Initial Total | 303.54 kB

Build at: 2022-02-11T13:42:10.679Z - Hash: 1a56c9818bf52b36e80f - Time: 61261ms

Angular 13

PS > ng build
√ Browser application bundle generation complete.
√ Copying assets complete.
√ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.7ff4bf4936dcd108.js      | main          | 195.44 kB |                54.27 kB
styles.87b5ac7b92a3d96a.css   | styles        |  86.85 kB |                 7.55 kB
polyfills.ef5829611190e658.js | polyfills     |  36.24 kB |                11.49 kB
runtime.c2f9f224e2630afd.js   | runtime       |   1.06 kB |               601 bytes

                              | Initial Total | 319.59 kB |                73.90 kB

Build at: 2022-02-11T13:56:49.018Z - Hash: 27ead51cbfcaddf0 - Time: 35328ms

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.2.3
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 13.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1302.2
@angular-devkit/build-angular 13.2.2
@angular-devkit/core 8.3.29
@angular-devkit/schematics 8.3.29
@angular/cli 13.2.3
@schematics/angular 8.3.29
ng-packagr 13.2.1
rxjs 6.5.3
typescript 4.5.5

Anything else?

No response

[alan-agius4]

While I haven’t tried locally yet I noticed that the indigo theme is being referenced twice.

• https://github.com/ibanjo/angular13-duplicate-styles-issue/blob/f66e1634276944ebb2c0e8170d6a79c101fea412/angular.json#L37
• https://github.com/ibanjo/angular13-duplicate-styles-issue/blob/f66e1634276944ebb2c0e8170d6a79c101fea412/src/styles.scss#L12

[ibanjo]

Hi @alan-agius4. You have definitely got a point. Nevertheless, this still sounds as a regression, since with the v12 toolchain the duplication did not occur. Same code, different toolchain, different results.

[alan-agius4]

@ibanjo, yeah this seems like an issue with esbuild. Let's continue tracking this evanw/esbuild#2016.

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