fix(coverage): ignore SCSS in browser mode (#8161)

Author: sheremet-va

packages/browser/src/node/providers/playwright.ts

@@ -20,7 +20,7 @@ import type {
 } from 'vitest/node'
 import { createManualModuleSource } from '@vitest/mocker/node'
 import c from 'tinyrainbow'
-import { createDebugger } from 'vitest/node'
+import { createDebugger, isCSSRequest } from 'vitest/node'
 
 const debug = createDebugger('vitest:browser:playwright')
 
@@ -471,10 +471,8 @@ function genSourceMapUrl(map: SourceMap | string): string {
   return `data:application/json;base64,${Buffer.from(map).toString('base64')}`
 }
 
-const CSS_LANGS_RE
-  = /\.(?:css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/
 const directRequestRE = /[?&]direct\b/
 
 function isDirectCSSRequest(request: string): boolean {
-  return CSS_LANGS_RE.test(request) && directRequestRE.test(request)
+  return isCSSRequest(request) && directRequestRE.test(request)
 }

packages/coverage-istanbul/src/provider.ts

@@ -16,6 +16,7 @@ import { resolve } from 'pathe'
 import TestExclude from 'test-exclude'
 import c from 'tinyrainbow'
 import { BaseCoverageProvider } from 'vitest/coverage'
+import { isCSSRequest } from 'vitest/node'
 
 import { version } from '../package.json' with { type: 'json' }
 import { COVERAGE_STORE_KEY } from './constants'
@@ -64,7 +65,7 @@ export class IstanbulCoverageProvider extends BaseCoverageProvider<ResolvedCover
     // Istanbul/babel cannot instrument CSS - e.g. Vue imports end up here.
     // File extension itself is .vue, but it contains CSS.
     // e.g. "Example.vue?vue&type=style&index=0&scoped=f7f04e08&lang.css"
-    if (id.endsWith('.css')) {
+    if (isCSSRequest(id)) {
       return
     }
 

packages/vitest/src/public/node.ts

@@ -168,6 +168,7 @@ export type { SerializedError } from '@vitest/utils'
 
 export {
   esbuildVersion,
+  isCSSRequest,
   isFileServingAllowed,
   parseAst,
   parseAstAsync,

pnpm-lock.yaml

@@ -103,6 +103,7 @@ it('exports snapshot', async ({ skip, task }) => {
           "esbuildVersion": "string",
           "generateFileHash": "function",
           "getFilePoolName": "function",
+          "isCSSRequest": "function",
           "isFileServingAllowed": "function",
           "isValidApiRequest": "function",
           "parseAst": "function",
@@ -259,6 +260,7 @@ it('exports snapshot', async ({ skip, task }) => {
             "esbuildVersion": "string",
             "generateFileHash": "function",
             "getFilePoolName": "function",
+            "isCSSRequest": "function",
             "isFileServingAllowed": "function",
             "isValidApiRequest": "function",
             "parseAst": "function",

test/core/test/exports.test.ts

@@ -15,3 +15,11 @@ defineExpose(props)
     x1
   </button>
 </template>
+
+<!-- Style block triggers a specific condition where sourcemaps used to break randomly -->
+<!-- https://github.com/vitest-dev/vitest/issues/8154 -->
+<style lang="scss">
+body {
+  background-color: #FFF;
+}
+</style>

test/coverage-test/fixtures/src/Vue/Hello.vue

@@ -21,6 +21,7 @@
     "istanbul-lib-report": "catalog:",
     "magic-string": "^0.30.17",
     "magicast": "^0.3.5",
+    "sass-embedded": "^1.89.2",
     "unplugin-swc": "^1.5.4",
     "vite": "latest",
     "vitest": "workspace:*",