test(optimizer): cover pre bundle css require (#12443)

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -6,6 +6,7 @@ import {
   isBuild,
   isServe,
   page,
+  viteTestUrl,
 } from '~utils'
 
 test('default + named imports from cjs dep (react)', async () => {
@@ -200,3 +201,16 @@ test.runIf(isServe)('error on builtin modules usage', () => {
     ]),
   )
 })
+
+test('pre bundle css require', async () => {
+  if (isServe) {
+    const response = page.waitForResponse(/@vitejs_test-dep-css-require\.js/)
+    await page.goto(viteTestUrl)
+    const content = await (await response).text()
+    expect(content).toMatch(
+      /import\s"\/@fs.+@vitejs\/test-dep-css-require\/style\.css"/,
+    )
+  }
+
+  expect(await getColor('.css-require')).toBe('red')
+})

playground/optimize-deps/dep-css-require/index.cjs

@@ -0,0 +1 @@
+require('./style.css')

playground/optimize-deps/dep-css-require/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@vitejs/test-dep-css-require",
+  "private": true,
+  "version": "0.0.0",
+  "main": "index.cjs"
+}

playground/optimize-deps/dep-css-require/style.css

@@ -0,0 +1,3 @@
+.css-require {
+  color: red;
+}

playground/optimize-deps/index.html

@@ -96,6 +96,9 @@ <h2>Flatten Id</h2>
 <h2>Non Optimized Module isn't duplicated</h2>
 <div class="non-optimized-module-is-not-duplicated"></div>
 
+<h2>Pre bundle css require</h2>
+<div class="css-require">css require</div>
+
 <script>
   function text(el, text) {
     document.querySelector(el).textContent = text
@@ -123,6 +126,7 @@ <h2>Non Optimized Module isn't duplicated</h2>
   }
 
   import '@vitejs/test-dep-cjs-with-assets'
+  import '@vitejs/test-dep-css-require'
 
   import { env } from '@vitejs/test-dep-node-env'
   text('.node-env', env)

playground/optimize-deps/package.json

@@ -16,6 +16,7 @@
     "@vitejs/test-dep-cjs-compiled-from-cjs": "file:./dep-cjs-compiled-from-cjs",
     "@vitejs/test-dep-cjs-compiled-from-esm": "file:./dep-cjs-compiled-from-esm",
     "@vitejs/test-dep-cjs-with-assets": "file:./dep-cjs-with-assets",
+    "@vitejs/test-dep-css-require": "file:./dep-css-require",
     "@vitejs/test-dep-esbuild-plugin-transform": "file:./dep-esbuild-plugin-transform",
     "@vitejs/test-dep-linked": "link:./dep-linked",
     "@vitejs/test-dep-linked-include": "link:./dep-linked-include",