How to build web components now, when the extractCss is deprecated?

[ViktorMedvedchuk]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

Option "extractCss" is deprecated: Deprecated since version 11.0.

How to build angular custom components now, in case we need styles.js, not styles.css

We can add --extractCss=false to the build script but anyway see the error in the console -
Option "extractCss" is deprecated: Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Option "extractCss" is deprecated: Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 12.0.2
Node: 14.17.5
Package Manager: npm 7.21.1
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.2 (cli-only)
@angular-devkit/core         12.0.2 (cli-only)
@angular-devkit/schematics   12.0.2 (cli-only)
@schematics/angular          12.0.2 (cli-only)

Anything else?

No response

[grzegorzKniazuk]

I solved this by moving the style definitions from style.scss to app.component.scss in my web components

[alan-agius4]

In production CSS is not meant to be shipped with a JS extension as JavaScript module. This option was intended to be used during development due to limitations in HMR which have now been addressed.

Can you elaborate on why you need CSS in JS in production?, Typically Web components styles should be encapsulated and not leak globally and hence it is recommended to place such styles in the components stylesheet.

[artaommahe]

@alan-agius4 using material dialog or cdk/overlay requires global styles. Target platform (for wigets) can be anything, event without angular or any other framework

[alan-agius4]

@artaommahe, I am sorry but I not following the point that you are trying to make for the reason why you need CSS as .js instead of a standard .css file.

If you really want to provide global style, you can still do so.

[Ghostbird]

I just ran into this same thing. Our web component must be packaged as a single javascript file. Previously this was easy with Angular. Build the JS files, then concatenate some of them in a specific order.

UPDATE: I wrote this quick node wrapper to solve my problem: https://gist.github.com/Ghostbird/cea7619a4995a0997f2622548c2b0a72

[ViktorMedvedchuk]

Sorry for the late response, (had coronavirus), we need to have styles in js file to add them as global because Material components need to be in a global style. How we can use our Material Modal etc from Webcomponent, in another place?

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