CSS inlining bug when using an @import statement with a url that contains a semi-colon

[iuliust]

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

compiler-cli

Is this a regression?

Yes

Description

writing

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

will result in the following html (in the <style> tag of the ):

@import url(https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;body{color:beige !important;}

If you read closely, the url defined in the scss was cut at the first occurence of the ';' character, hence nor the quote nor the parenthese is closed.
The consequence of this is that the entirety of what was supposed to be the inlined styles is not parsed by the browser.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular CLI: 12.2.4
Node: 16.4.2 (Unsupported)
Package Manager: yarn 3.0.1
OS: linux x64

Angular: 12.2.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.3
@angular-devkit/build-angular   12.2.3
@angular-devkit/core            12.2.3
@angular-devkit/schematics      12.2.3
@schematics/angular             12.2.4
rxjs                            7.3.0
typescript                      4.4.2

Anything else?

Keep being awesome, you've made a hell of a good job!

[alan-agius4]

This should be fixed in @angular-devkit/build-angular version 12.2.4 or later.

Can you please update to the latest version and try again?

[iuliust]

Hey there,
thanks for the quick response.
I just upgraded @angular-devkit/* dependencies to the latest version, but the bug persists :

Angular CLI: 12.2.4
Node: 16.4.2 (Unsupported)
Package Manager: yarn 3.0.1
OS: linux x64

Angular: 12.2.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.4
@angular-devkit/build-angular   12.2.4
@angular-devkit/core            12.2.4
@angular-devkit/schematics      12.2.4
@schematics/angular             12.2.4
rxjs                            7.3.0
typescript                      4.4.2
    
Warning: The current version of Node (16.4.2) is not supported by Angular.

[alan-agius4]

I am receiving the below error, when using the above provided @import rule.

✖ Index html generation failed.
undefined:1:172: missing '{'

Duplicate of #20760

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