fix(css): remove ?direct in id for postcss process

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

@@ -2,6 +2,7 @@ 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 { cssPlugin, cssUrlRE, hoistAtRules } from '../../plugins/css'
 
 describe('search css url function', () => {
@@ -46,13 +47,17 @@ describe('search css url function', () => {
   })
 })
 
-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(
+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: [
@@ -62,57 +67,48 @@ describe('css path resolutions', () => {
             }
           ]
         }
-      },
-      'serve'
+      }
     )
 
-    const { transform, buildStart } = cssPlugin(config)
-
-    await buildStart.call({})
-
-    const mockFs = vi
-      .spyOn(fs, 'readFile')
-      // @ts-ignore vi.spyOn not recognize override `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
-        }
-      },
-      `
+    const result = await transform(
+      `\
 .foo {
-  position: fixed;
-  composes: bar from '@${mockedBarCssRelativePath}';
-}
-    `,
-      path.join(mockedProjectPath, mockedFooCssRelativePath)
+position: fixed;
+composes: bar from '@/css/bar.module.css';
+}`,
+      '/css/foo.module.css'
     )
 
-    expect(code).toBe(`
-._bar_soicv_2 {
-  display: block;
-  background: #f0f;
-}
-._foo_sctn3_2 {
-  position: fixed;
+    expect(result.code).toBe(
+      `\
+._bar_1csqm_1 {
+display: block;
+background: #f0f;
 }
-    `)
+._foo_86148_1 {
+position: fixed;
+}`
+    )
+
+    resetMock()
+  })
 
-    mockFs.mockReset()
+  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()
   })
 })
 
@@ -205,3 +201,39 @@ 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
+  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
+      return await transform.call(
+        {
+          addWatchFile() {
+            return
+          }
+        },
+        code,
+        id
+      )
+    },
+    resetMock() {
+      mockFs.mockReset()
+    }
+  }
+}

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

@@ -753,6 +753,7 @@ async function compileCSS(
     preprocessorOptions,
     devSourcemap
   } = config.css || {}
+  const fileName = cleanUrl(id)
   const isModule = modulesOptions !== false && cssModuleRE.test(id)
   // although at serve time it can work without processing, we do need to
   // crawl them in order to register watch dependencies.
@@ -800,7 +801,7 @@ async function compileCSS(
         }
     }
     // important: set this for relative import resolving
-    opts.filename = cleanUrl(id)
+    opts.filename = fileName
     opts.enableSourcemap = devSourcemap ?? false
 
     const preprocessResult = await preProcessor(
@@ -919,8 +920,8 @@ async function compileCSS(
       .default(postcssPlugins)
       .process(code, {
         ...postcssOptions,
-        to: id,
-        from: id,
+        to: fileName,
+        from: fileName,
         ...(devSourcemap
           ? {
               map: {
@@ -990,13 +991,13 @@ async function compileCSS(
     // version property of rawPostcssMap is declared as string
     // but actually it is a number
     rawPostcssMap as Omit<RawSourceMap, 'version'> as ExistingRawSourceMap,
-    cleanUrl(id)
+    fileName
   )
 
   return {
     ast: postcssResult,
     code: postcssResult.css,
-    map: combineSourcemapsIfExists(cleanUrl(id), postcssMap, preprocessorMap),
+    map: combineSourcemapsIfExists(fileName, postcssMap, preprocessorMap),
     modules,
     deps
   }