fix(css): stabilize css module hashes with lightningcss in dev mode (#19481)

Author: azat-io

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

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

@@ -3298,7 +3298,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 {