Angular 12.1 some Inline styles will fail in the test command

[hsuanxyz]

🐞 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: 12.0.3

Description

Running a test will throw an error when the inline style is:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
      .content {
        display: flex;
      }
      .extra > a { }
    `]
})
export class AppComponent { }

🔬 Minimal Reproduction

https://github.com/hsuanxyz/ng-12-1-inline-styles-issue

$ git clone git@github.com:hsuanxyz/ng-12-1-inline-styles-issue.git
$ cd ng-12-1-inline-styles-issue
$ npm i
$ npm run test

🔥 Exception or Error

./src/app/app.component.ts.less!=!./node_modules/@ngtools/webpack/src/inline-data-loader.js?data=CiAgICAgIC5jb250ZW50IHsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICB9CiAgICAgIC5leHRyYSA+IGEgeyB9CiAgICA=!./src/app/app.component.ts - Error: Module build failed (from ./node_modules/less-loader/dist/cjs.js):


      }
      .extraH�B�
           ^
Unrecognised input
      Error in .../inner-styles/src/app/app.component.ts (line 5, column 13)

🌍 Your Environment

Angular CLI: 12.1.0
Node: 12.16.1
Package Manager: npm 6.13.4
OS: darwin x64

Angular: 12.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.0
@angular-devkit/build-angular   12.1.0
@angular-devkit/core            12.1.0
@angular-devkit/schematics      12.1.0
@schematics/angular             12.1.0
rxjs                            6.6.7
typescript                      4.3.4

Anything else relevant?

This is a minimal recurrence, with a few changes to the content errors will not appear. For examples:

 [`
-      .content {
+      .content1 {
        display: flex;
      }
      .extra > a { }
 `]

 [`
      .content {
-        display: flex;
+        display: block;
      }
      .extra > a { }
 `]

 [`
+.   .foo { }
      .content {
        display: flex;
      }
      .extra > a { }
 `]

 [`
      .content {
        display: flex;
      }
+ 
      .extra > a { }
 `]

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