bug: transpile() doesn't resovle css imports to node modules

[Jinjiang]

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

Current Behavior

Reproduction: https://github.com/Jinjiang/reproductions/tree/try-stencil-20240904

const input = `
@import './debug/style.css';
@import '~foo/style.css';
`

const result = compiler.transpileSync(
  input,
  {
    currentDirectory: process.cwd(),
    file: 'my-component.css',
  }
)

The 2nd CSS import pointing to foo/style.css isn't properly resolved. The output is:

import styleCss from './debug/style.css';
const myComponentCss = styleCss + "\n\n@import '~foo/style.css';\n";
export default myComponentCss;

Expected Behavior

The style.css in package foo should be resolved and loaded. Or any other ways can properly resovle CSS imports to a package specifier like <package-name>/<filepath> would be fine.

System Info

System: node 20.16.0
    Platform: linux (5.15.153.1-microsoft-standard-WSL2)
   CPU Model: unknown (10 cpus)
    Compiler: /home/jinjiang/code/reproductions/node_modules/.pnpm/@stencil+core@4.21.0/node_modules/@stencil/core/compiler/stencil.js
       Build: 1724698030
     Stencil: 4.21.0 🐷
  TypeScript: 5.5.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre

Steps to Reproduce

https://github.com/Jinjiang/reproductions/tree/try-stencil-20240904

How to reproduce:

pnpm install
pnpm debug

The @import '~@foo/style.css' is not resolved correctly.

Code Reproduction URL

https://github.com/Jinjiang/reproductions/tree/try-stencil-20240904

Additional Information

No response

[Jinjiang]

Well, I've found this loc:

stencil/src/compiler/style/css-to-esm.ts

Line 237 in 6ef1334

// do not resolve this path cuz it starts with node resolve id ~

Does that mean I need to handle that on my own? Is there any setup examples I can refer to?

Thanks.

[christian-bromann]

@Jinjiang thanks for raising the issue.

Your use case may just not be considered when this was developed. I will ingest this into the backlog. Please note that the current Stencil team has its own priorities and can't guarantee to look into this soon. Therefor we would appreciate any contributions that can help to resolve this bug.