bug: styleUrls only including the first file listed

[dgibson666]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.7

Current Behavior

In Stencil 4.6 and 4.7, Only the first stylesheet in styleUrls is being included in the component CSS. I'm not using modes (per the similar open issue), just trying to reference multiple stylesheets that were generated from a separate build process - all placed in the component directory.

If I replace this with a single styleUrl (that's .scss), referencing those same multiple .scss files via @use, it loads them all correctly.

Expected Behavior

Add all CSS specified in the styleUrls array to the component and DOM, not just the first.

System Info

System: node 18.18.2
    Platform: windows (10.0.22621)
   CPU Model: 13th Gen Intel(R) Core(TM) i7-13700F (24 cpus)
    Compiler: C:\websites\_sandbox\[projectname]\node_modules\@stencil\core\compiler\stencil.js
       Build: 1698677754
     Stencil: 4.7.0
  TypeScript: 5.2.2
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.22.0

Steps to Reproduce

@Component({
  tag: 'my-component',
  styleUrls: ['reset.scss', 'roboto.scss', 'css-variables.scss', 'core.scss'] // doesn't work.
  styleUrl: 'all-css.scss' // works loading all the same files via @use

Code Reproduction URL

https://github.com/

Additional Information

This is pretty straight forward, no time to make a repo to demo it.

[alicewriteswrongs]

put together a quick repro: https://github.com/alicewriteswrongs/style-urls-repro

[christian-bromann]

A fix for this issue was released in v4.8.2. Thanks for reporting!