diff --git a/packages/vite/src/node/__tests__/plugins/css.spec.ts b/packages/vite/src/node/__tests__/plugins/css.spec.ts
index 6d2cf1a93af786..31f49629021a36 100644
--- a/packages/vite/src/node/__tests__/plugins/css.spec.ts
+++ b/packages/vite/src/node/__tests__/plugins/css.spec.ts
@@ -109,6 +109,25 @@ composes: bar from '@/css/bar.module.css';
     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)
+  })
+
+  test('custom generateScopedName with lightningcss', async () => {
+    const { transform } = await createCssPluginTransform({
+      configFile: false,
+      css: {
+        modules: {
+          generateScopedName: 'custom__[hash:base64:5]',
+        },
+        transformer: 'lightningcss',
+      },
+    })
+    const css = `\
+.foo {
+  color: red;
 }`
     const result1 = await transform(css, '/foo.module.css') // server
     const result2 = await transform(css, '/foo.module.css?direct') // client
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 0f3ba9c2b2c304..32989fd4cd18ff 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -3297,7 +3297,7 @@ async function compileLightningCSS(
   const deps = new Set<string>()
   // replace null byte as lightningcss treats that as a string terminator
   // https://github.com/parcel-bundler/lightningcss/issues/874
-  const filename = id.replace('\0', NULL_BYTE_PLACEHOLDER)
+  const filename = removeDirectQuery(id).replace('\0', NULL_BYTE_PLACEHOLDER)
 
   let res: LightningCssTransformAttributeResult | LightningCssTransformResult
   try {