[REGRESSION][v12.2] Font is no longer loaded

[hakimio]

🐞 Bug report

Command (mark with an x)

• build
• serve

Is this a regression?

Yes, the previous version in which this bug was not present was: 12.1

Description

I have attached a simple demo app which reproduces the issue. Basically following font import in foo-bar.css (included in angular.json styles section) is ignored in v12.2 but works as intended in v12.1:

@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap';

🔬 Minimal Reproduction

• Install dependencies and run ng serve in the demo project provided

🌍 Your Environment

@angular/cli 12.2.3
@angular-devkit/architect    0.1202.3
@angular-devkit/core         12.2.3
@angular-devkit/schematics   12.2.3
@schematics/angular          12.2.3

🐛 Bug demo

import-bug2.zip

[alan-agius4]

Related to #20906 and #20760

Let’s continue tracking this in #20760

[hakimio]

@alan-agius4 this one is reproducable with inlineCriticalCss disabled and it used to work in v12.1.

Try the updated demo to see the issue.

[alan-agius4]

I am able to replicate this issue in 12.1, and unable to replicate when inlineCriticalCss is disabled.

During the build you are also getting a related warnings when is inlineCriticalCss is enabled.

Warning: 1 rules skipped due to selector errors:
  800&display=swap); -> Unmatched selector: &display=swap);

[hakimio]

Yes, I know about those warnings during production build but this is a different issue which is happening during development build with ng serve as well where optimizations are not applied (AFAIK). Note that the style order in angular.json is important to reproduce the issue:

"styles": [
  "src/styles.scss",
  "src/foo-bar.css"
],

If I use Angular v12.2 fonts are not loaded (check Network -> Fonts to see the requests) and if I switch to v12.1, they are loading.

[alan-agius4]

I am unable to replicate using the reproduction you provided.

[hakimio]

I have uploaded it twice. The first time, I messed it up. Are you testing the one from the second upload import-bug2.zip?

[alan-agius4]

I am using the latest and I am unable to reproduce. It's also hard to tell what changed without the reproduction.

Ideally, in future it would be great if you could avoid zip files and instead push the minimal reproduction repository to github and link it here.

[hakimio]

Just the order of css files in angular.json changed. I tested it again from the zip file and could reproduce the bug. It's strange that it works for you.

[hakimio]

@alan-agius4 Sorry to bother you again but can you please test another reproduction when you have some time.
Following is a little bit bigger project but the issue is exactly the same.

Reproduction

1. Clone ng-v12.2-bug branch in hakimio/ngx-ui-tour git repo:
   https://github.com/hakimio/ngx-ui-tour/tree/ng-v12.2-bug
2. Install dependencies
   yarn install
3. Serve the demo app with ng serve
4. Check the "Network" tab to see if the "Manrope" font is loaded by searching for "Manrope" (browser cache should be disabled)
5. The search result should be empty and you should see that the font is not applied to the text of the app
6. However the font should be loaded since it is included the following way:
   angular.json styles section -> node_modules/@taiga-ui/core/styles/taiga-ui-theme.less -> theme/fonts.css -> @import 'https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap';

Additional Info

If you downgrade Angular to v12.1, you should see that the font is being loaded:

[alan-agius4]

Look like it's working as expected

[hakimio]

@alan-agius4 I can't see from that screenshot if the Manrope font is loaded. Why did you attach that image?

EDIT: did you serve development build or production?

[alan-agius4]

So indeed the Monorope font is not being loaded. I managed to track down the issue to css-loader, previously it moved absolute @imports to the top of the file but now they are not which causes the @import to become invalid since @import need to appear at the top of the file. https://developer.mozilla.org/en-US/docs/Web/CSS/@import#description

[hakimio]

Do you plan to open bug report in css-loader repo? Should angular-cli have some kind of workaround for css-loader bug?

EDIT: Downgrade css-loader maybe?

[alan-agius4]

Opened an issue webpack-contrib/css-loader#1365, let's see what's their response.