fix: mock css files imported with "require" (#2679)

This is usually happens inside UI libraries

packages/vitest/src/runtime/setup.ts

@@ -1,3 +1,5 @@
+/* eslint-disable n/no-deprecated-api */
+
 import { installSourcemapsSupport } from 'vite-node/source-map'
 import { environments } from '../integrations/env'
 import type { Environment, ResolvedConfig } from '../types'
@@ -23,6 +25,11 @@ export async function setupGlobalEnv(config: ResolvedConfig) {
   if (globalSetup)
     return
 
+  // always mock "required" `css` files, because we cannot process them
+  require.extensions['.css'] = () => ({})
+  require.extensions['.scss'] = () => ({})
+  require.extensions['.sass'] = () => ({})
+
   globalSetup = true
 
   if (isNode) {

test/core/src/file-css.css

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

test/core/src/file-sass.sass

@@ -0,0 +1,2 @@
+.red
+  color: red;

test/core/src/file-scss.scss

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

test/core/test/require.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+
+const _require = require
+
+describe('using "require" to import a module', () => {
+  it('importing css files works, but doesn\'t process them', () => {
+    const css = _require('./../src/file-css.css')
+    const sass = _require('./../src/file-sass.sass')
+    const scss = _require('./../src/file-scss.scss')
+
+    expect(css).toEqual({})
+    expect(sass).toEqual({})
+    expect(scss).toEqual({})
+  })
+})