css modules composes from '...' not works

[edikdeisling]

Describe the bug

Compose class names from other file is not working. Vite fails to resolve the path
Aliases inside "composes from" not work as well

composes: font-blue from 'blue.module.css';

Reproduction

https://github.com/xSorc/test-vite-composes-from

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19042
    CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
    Memory: 8.22 GB / 15.94 GB
  Binaries:
    Node: 14.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (90.0.818.42)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: 2.2.1 => 2.2.1

Used package manager: yarn

Logs

  vite:load 4ms   [fs] /src/index.module.css +16ms
  vite:load 3ms   [fs] /src/index.module.css +2ms
  vite:load 6ms   [fs] /node_modules/.vite/chunk-R67FPDS3.js?v=04e0b802 +3ms
  vite:rewrite 0ms   [no imports] node_modules\.vite\chunk-R67FPDS3.js?v=04e0b802 +22ms
  vite:transform 0ms   /node_modules/.vite/chunk-R67FPDS3.js?v=04e0b802 +22ms
  vite:time 9ms   /node_modules/.vite/chunk-R67FPDS3.js?v=04e0b802 +11ms
  vite:load 1ms   [fs] /src/index.module.css +8ms
[Error: ENOENT: no such file or directory, open 'C:\C:\Projects\test-vite-composes-from\src\blue.module.css'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\C:\\Projects\\test-vite-composes-from\\src\\blue.module.css'
}
  vite:hmr [detected api usage] src\index.module.css +0ms
  vite:transform 65ms  /src/index.module.css +59ms
  vite:time 70ms  /src/index.module.css +58ms
[Error: ENOENT: no such file or directory, open 'C:\C:\Projects\test-vite-composes-from\src\blue.module.css'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\C:\\Projects\\test-vite-composes-from\\src\\blue.module.css'
}
 

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[axelboc]

I'm also running into this on Windows.

Seems related to:

• CSS Modules composes property path issue parcel-bundler/parcel#1820
• Completely Fails on Windows css-modules/css-modules-loader-core#16

The following Vite configuration fixes my errors:

  css: {
    modules: {
      // @ts-ignore
      root: '.',
    },
  },

[andelkocvjetkovic]

I got the same error, and if you put

`css: {
    modules: {
      // @ts-ignore
      root: '.',
    },
  },
`

this is going to work on Windows, but it is going to give an error on Mac.

[bluwy]

I can't reproduce this on MacOS 12.2.1 too. Looks like it's indeed a Windows issue, though I don't have the machine now. Would be great if someone can give an update if this is still happening for them.

[Niputi]

it's still reproducible

[zeh]

Reproducible on Windows 11 with Vite 2.8.6.

For a project in d:\abc and a CSS modules file in d:\abc\src\bcd\bcd.modules.css with composes: def from "../styles/ghi.css", it's trying to open a file in D:\D:\abc\src\styles\ghi.css (note two "D:\"). The file does exist in D:\abc\src\styles\ghi.css.

[sapphi-red]

Vite depends on postcss-modules and it has a code which is copied from css-modules-loader-core.
https://github.com/madyankin/postcss-modules/blob/7d5965d4df201ef301421a5e35805d1b47f3c914/src/css-loader-core/loader.js
This code has this bug (css-modules/css-modules-loader-core#16) which is mentioned above.

[davbrito]

This is fixed now with postcss-modules v5