[BUG] Styles loaded with styleUrls are not encapsulated

[miluoshi]

Please provide the environment you discovered this bug in.

See this StackBlitz: https://stackblitz.com/edit/github-32hhow?file=src/app/app.component.ts

See app.component.ts that includes both css and scss styles in styleUrls

Which area/package is the issue in?

vite-plugin-angular

Description

When using styleUrls to include styles to a component, each stylesheet gets included twice - once encapsulated, once not encapsulated. Another problem is that encapsulated copy of scss stylesheet is not transpiled to css.

In the included example, I've included red h1 text color in css stylesheet and yellow color in scss stylesheet. See the screenshot:

There's another bug related to this issue - inline scss style is not transpiled to css even though the plugin options are set to { inlineStylesExtension: 'scss' } (see .read-the-docs class in the example)

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[miluoshi]

It works in the latest 0.2.0-alpha.18 version. Thanks! 🎉