inlineStyleLanguage extract-i18n breaking webpack

[gentleman-turk]

🐞 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, in angular v11 this does not happen.

Description

This appears to occur with inlineCss aka using the styles property of the @component decorator.

"angular-resource://:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .buttons { display: flex; flex-direction: row; flex-wrap: nowrap }"

🔬 Minimal Reproduction

The offending code is described in the component:

@Component({
    template: "this does not matter",
    styles: [
        ".buttons { display: flex; flex-direction: row; flex-wrap: nowrap }"
    ]
})

moving the style to an independent file, resolves the issue:

@Component({
    template: "this does not matter",
    styleUrls: ["./icon-toolbar.component.scss"]
})

once set up, simply run "ng extract-i18n"

🔥 Exception or Error

"angular-resource://:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .buttons { display: flex; flex-direction: row; flex-wrap: nowrap }"

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.0.0
Node: 12.22.1
Package Manager: npm 6.14.12
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

Per the upgrade instructions from v11 to v12, I have added

"inlineStyleLanguage": "scss",

to my architect.build property within angular.json

[clydin]

Duplicate of #20750
This will be fixed in 12.0.1 which should be released this week.

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