bug: regression with imported stylesheet typing

[nwhittaker]

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.39.0

Current Behavior

Importing a stylesheet such as import css from './my-styles.css' results in a css variable that is typed as a string but is actually, at runtime, a function. Before 4.39.0, the css variable was a string at runtime.

Expected Behavior

Ideally the css variable is a string at runtime. Or at least, is typed as a function with clear documentation explaining what conditions cause the import to become a function.

System Info

System: node 22.20.0
    Platform: linux (6.1.43)
   CPU Model: AMD EPYC (2 cpus)
    Compiler: /project/workspace/node_modules/.pnpm/@stencil+core@4.41.2/node_modules/@stencil/core/compiler/stencil.js
       Build: 1768558830
     Stencil: 4.41.2 🐝
  TypeScript: 5.8.3
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

1. Open the stencil starter repro and start up the Preview.
2. See the "Clicked 0 times" button is unstyled.
3. Open the devtool's console and see the error message:

   vNode passed as children has unexpected type.
   Make sure it's using the correct h() function.
   Empty objects can also be the cause, look for JSX comments that became objects.
   

Code Reproduction URL

https://codesandbox.io/p/github/johnjenkins/stencil-starter/csb-tfp358/draft/silent-sun

Additional Information

Open the my-button.tsx functional component to see where the stylesheet is imported. To observe the expected behavior replace <style>{css}</style> with:

//@ts-ignore
<style>{css()}</style>

The typing mismatch appears to have been introduced by some changes to compiler/style/css-to-esm.ts¹² as part of #6211.

Footnotes

1. https://github.com/stenciljs/core/pull/6211/changes#diff-1c5ce584d8c8ef9058e1f498293b13a07161d7253ab53e381ff4fdf089ae8677R180 ↩

2. https://github.com/stenciljs/core/pull/6211/changes#diff-1c5ce584d8c8ef9058e1f498293b13a07161d7253ab53e381ff4fdf089ae8677R197 ↩

[johnjenkins]

hey @nwhittaker - thanks for raising, do you mind forking the codesandbox branch please as 'draft' versions are not visible 🙏