feat(css): support css module compose/from path resolution

packages/vite/package.json

@@ -111,7 +111,7 @@
     "periscopic": "^2.0.3",
     "postcss-import": "^14.0.2",
     "postcss-load-config": "^3.0.0",
-    "postcss-modules": "^4.1.3",
+    "postcss-modules": "^4.2.2",
     "resolve.exports": "^1.0.2",
     "rollup-plugin-license": "^2.5.0",
     "selfsigned": "^1.10.11",

packages/vite/src/node/__tests__/plugins/css.spec.ts

@@ -1,4 +1,7 @@
-import { cssUrlRE } from '../../plugins/css'
+import { cssUrlRE, cssPlugin } from '../../plugins/css'
+import { resolveConfig } from '../../config'
+import fs from 'fs'
+import path from 'path'
 
 describe('search css url function', () => {
   test('some spaces before it', () => {
@@ -41,3 +44,73 @@ describe('search css url function', () => {
     ).toBe(true)
   })
 })
+
+describe('css path resolutions', () => {
+  const mockedProjectPath = path.join(process.cwd(), '/foo/bar/project')
+  const mockedBarCssRelativePath = '/css/bar.module.css'
+  const mockedFooCssRelativePath = '/css/foo.module.css'
+
+  test('cssmodule compose/from path resolutions', async () => {
+    const config = await resolveConfig(
+      {
+        resolve: {
+          alias: [
+            {
+              find: '@',
+              replacement: mockedProjectPath
+            }
+          ]
+        }
+      },
+      'serve'
+    )
+
+    const { transform, buildStart } = cssPlugin(config)
+
+    await buildStart.call({})
+
+    const mockFs = jest
+      .spyOn(fs, 'readFile')
+      // @ts-ignore jest.spyOn not recognize overrided `fs.readFile` definition.
+      .mockImplementationOnce((p, encoding, callback) => {
+        expect(p).toBe(path.join(mockedProjectPath, mockedBarCssRelativePath))
+        expect(encoding).toBe('utf-8')
+        callback(
+          null,
+          Buffer.from(`
+.bar {
+  display: block;
+  background: #f0f;
+}
+      `)
+        )
+      })
+
+    const { code } = await transform.call(
+      {
+        addWatchFile() {
+          return
+        }
+      },
+      `
+.foo {
+  position: fixed;
+  composes: bar from '@${mockedBarCssRelativePath}';
+}
+    `,
+      path.join(mockedProjectPath, mockedFooCssRelativePath)
+    )
+
+    expect(code).toBe(`
+._bar_soicv_2 {
+  display: block;
+  background: #f0f;
+}
+._foo_sctn3_2 {
+  position: fixed;
+}
+    `)
+
+    mockFs.mockReset()
+  })
+})

packages/vite/src/node/plugins/css.ts

@@ -516,6 +516,12 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
   }
 }
 
+function getCssResolversKeys(
+  resolvers: CSSAtImportResolvers
+): Array<keyof CSSAtImportResolvers> {
+  return Object.keys(resolvers) as unknown as Array<keyof CSSAtImportResolvers>
+}
+
 async function compileCSS(
   id: string,
   code: string,
@@ -641,6 +647,16 @@ async function compileCSS(
           if (modulesOptions && typeof modulesOptions.getJSON === 'function') {
             modulesOptions.getJSON(cssFileName, _modules, outputFileName)
           }
+        },
+        async resolve(id: string) {
+          for (const key of getCssResolversKeys(atImportResolvers)) {
+            const resolved = await atImportResolvers[key](id)
+            if (resolved) {
+              return path.resolve(resolved)
+            }
+          }
+
+          return id
         }
       })
     )