Stencil: Stencil imports only one stylesheet

[KhaydarshinAleksandr]

Stencil version:

"@stencil/core": "^1.11.3"

I'm submitting a:

[ X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
When I try to import a few "css" files, only the first one is applied.

styleUrls: [
    'my-component.css',
    'another-styles.css', // These styles will not apply
  ],

Expected behavior:
All styles specified in the styleUrls are working.

Steps to reproduce:
Use https://github.com/KhaydarshinAleksandr/stencil-example/blob/master/src/components/my-component/my-component.tsx

Other information:
In version 1.9.0, the bug does not present

[alex-ketch]

@KhaydarshinAleksandr That's not quite how the styleUrls property works. It's for setting alternate stylesheets based on the component's mode. Take a look at this example.

If you want to import multiple stylesheets, I think the easiest would be to do the imports in your CSS files, instead of the component TSX.

[KhaydarshinAleksandr]

@alex-ketch, thank you for reply. I think that since interface styleUrls looks like styleUrls?: string[] | d.ModeStyles;, we can use multiple stylesheets at once. Moreover it worked in earlier versions.

But your approach can be used as a temporary solution, thanks

[davidenke]

@KhaydarshinAleksandr is right, the typings indicate that multiple stylesheets can be loaded. I use it to structure component styles for different viewports/media queries.
It's also not quite obvious how mode styles can be defined as arrays, instead of key-value pairs of mode name and url (d.ModeStyles)...

[KhaydarshinAleksandr]

Any updates of this issue?

I don't want do import in CSS files