Unmatched selector: %

🐞 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?

Yes, the previous version in which this bug was not present was: @angular-devkit/build-angular: 12.2.10

Issue first appears with @angular-devkit/build-angular 12.2.11

Description

With 12.2.10 a production build there are no warnings. With 12.2.11 I am getting the following output (in fact my first build actually had over 200 such errors!). There is no easy way to track down the source CSS rule from the error message.

⠋ Generating index html...2 rules skipped due to selector errors:
  0% -> Unmatched selector: %
  0% -> Unmatched selector: %
✔ Index html generation complete.

🔬 Minimal Reproduction

Add the following CSS to any application:

.demo {
  background: red;
}
@keyframes demo {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

🔥 Exception or Error

⠋ Generating index html...2 rules skipped due to selector errors:
  0% -> Unmatched selector: %
  0% -> Unmatched selector: %
✔ Index html generation complete.

🌍 Your Environment

Angular CLI: 12.2.10
Node: 14.17.2
Package Manager: npm 6.14.13
OS: win32 x64

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1202.10
@angular-devkit/build-angular      12.2.11
@angular-devkit/core               12.2.10
@angular-devkit/schematics         12.2.10
@angular/cdk                       12.2.9
@angular/material                  12.2.9
@angular/material-moment-adapter   12.2.9
@schematics/angular                12.2.10
rxjs                               6.6.7
typescript                         4.3.5

Anything else relevant?

[NealGooch]

Alan,

Many many thanks for the very quick response - changing browserlist to your suggestion does indeed fix this issue.

(Aside: I’ve picked up support for this app and it hadn’t occurred to me review the browserlist !!! I’m down to a handful of users stuck on IE11 so would have probably reviewed it once I had them shifted to a newer browser)

Thanks again, Neal.

[alan-agius4]

The above browserslist configuration is rather permissive and a number of the resulting browsers are not supported which would also result in extra css prefixes and therefore increase in bundle size.

Can you try the below?

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
IE 11