fix: handle CSS Modules as modules

packages/vite/package.json

@@ -137,7 +137,6 @@
     "picomatch": "^2.3.1",
     "postcss-import": "^16.0.1",
     "postcss-load-config": "^4.0.2",
-    "postcss-modules": "^6.0.0",
     "resolve.exports": "^2.0.2",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-license": "^3.2.0",
@@ -149,6 +148,7 @@
     "tslib": "^2.6.2",
     "types": "link:./types",
     "ufo": "^1.4.0",
+    "vite-css-modules": "^1.0.1",
     "ws": "^8.16.0"
   },
   "peerDependencies": {

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

@@ -1,11 +1,6 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { describe, expect, test, vi } from 'vitest'
-import { resolveConfig } from '../../config'
-import type { InlineConfig } from '../../config'
+import { describe, expect, test } from 'vitest'
 import {
   convertTargets,
-  cssPlugin,
   cssUrlRE,
   getEmptyChunkReplacer,
   hoistAtRules,
@@ -53,71 +48,6 @@ describe('search css url function', () => {
   })
 })
 
-describe('css modules', () => {
-  test('css module compose/from path resolutions', async () => {
-    const mockedProjectPath = path.join(process.cwd(), '/foo/bar/project')
-    const { transform, resetMock } = await createCssPluginTransform(
-      {
-        [path.join(mockedProjectPath, '/css/bar.module.css')]: `\
-.bar {
-display: block;
-background: #f0f;
-}`,
-      },
-      {
-        resolve: {
-          alias: [
-            {
-              find: '@',
-              replacement: mockedProjectPath,
-            },
-          ],
-        },
-      },
-    )
-
-    const result = await transform(
-      `\
-.foo {
-position: fixed;
-composes: bar from '@/css/bar.module.css';
-}`,
-      '/css/foo.module.css',
-    )
-
-    expect(result.code).toBe(
-      `\
-._bar_1csqm_1 {
-display: block;
-background: #f0f;
-}
-._foo_86148_1 {
-position: fixed;
-}`,
-    )
-
-    resetMock()
-  })
-
-  test('custom generateScopedName', async () => {
-    const { transform, resetMock } = await createCssPluginTransform(undefined, {
-      css: {
-        modules: {
-          generateScopedName: 'custom__[hash:base64:5]',
-        },
-      },
-    })
-    const css = `\
-.foo {
-  color: red;
-}`
-    const result1 = await transform(css, '/foo.module.css') // server
-    const result2 = await transform(css, '/foo.module.css?direct') // client
-    expect(result1.code).toBe(result2.code)
-    resetMock()
-  })
-})
-
 describe('hoist @ rules', () => {
   test('hoist @import', async () => {
     const css = `.foo{color:red;}@import "bla";`
@@ -208,42 +138,6 @@ describe('hoist @ rules', () => {
   })
 })
 
-async function createCssPluginTransform(
-  files?: Record<string, string>,
-  inlineConfig: InlineConfig = {},
-) {
-  const config = await resolveConfig(inlineConfig, 'serve')
-  const { transform, buildStart } = cssPlugin(config)
-
-  // @ts-expect-error buildStart is function
-  await buildStart.call({})
-
-  const mockFs = vi
-    .spyOn(fs, 'readFile')
-    // @ts-expect-error vi.spyOn not recognize override `fs.readFile` definition.
-    .mockImplementationOnce((p, encoding, callback) => {
-      callback(null, Buffer.from(files?.[p] ?? ''))
-    })
-
-  return {
-    async transform(code: string, id: string) {
-      // @ts-expect-error transform is function
-      return await transform.call(
-        {
-          addWatchFile() {
-            return
-          },
-        },
-        code,
-        id,
-      )
-    },
-    resetMock() {
-      mockFs.mockReset()
-    },
-  }
-}
-
 describe('convertTargets', () => {
   test('basic cases', () => {
     expect(convertTargets('es2018')).toStrictEqual({