CSS google font import breaks ng-serve in Angular 12

[smasala]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Worked in 11.2.3

Description

When serving the application, Google fonts with multiple weights in the url breaks serve.

🔬 Minimal Reproduction

Add the following:

angular.json (has to be an object literal)

"styles": [
    {
                "input": "some_path_to_style.css",
                "bundleName": "somename"
   }
],

some_path_to_style.css (no other content)

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

Example of a URL that doesn't break it:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

Or change the object literal to a simple string in the angular.json works but defeats the point why we use it 😊

🔥 Exception or Error

Error: undefined:3:1: missing '{'

It was only because it hangs in the VSCODE JS Debug Terminal during sealing that I came across this https://stackoverflow.com/questions/65537399/angular-11-stuck-on-generating-browser-application-bundles-phase-building - there is no more information to that great error message 😂

🌍 Your Environment

Angular CLI: 12.0.2
Node: 14.16.0
Package Manager: yarn 1.22.10
OS: darwin x64

Angular: 12.0.2
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.2
@angular-devkit/build-angular   12.0.2
@angular-devkit/core            12.0.2
@angular-devkit/schematics      12.0.2
@angular/cdk                    11.2.3
@angular/flex-layout            11.0.0-beta.33
@angular/material               11.2.3
@schematics/angular             12.0.2
ng-packagr                      12.0.2
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

[smasala]

P.s. even if you set the path for the css file as a string instead of an object literal it doesn't build the styles properly. It compiles the app but during runtime:

Refused to apply style from 'http://localhost:4200/url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

[alan-agius4]

Related to #20906 and #20760

Let’s continue tracking this in #20760

[smasala]

Perfect. Thanks @alan-agius4.

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