chore: merge main

Author: sapphi-red

docs/.vitepress/config.ts

@@ -43,6 +43,10 @@ const additionalTitle = ((): string => {
 })()
 const versionLinks = ((): DefaultTheme.NavItemWithLink[] => {
   const oldVersions: DefaultTheme.NavItemWithLink[] = [
+    {
+      text: 'Vite 6 Docs',
+      link: 'https://v6.vite.dev',
+    },
     {
       text: 'Vite 5 Docs',
       link: 'https://v5.vite.dev',
@@ -66,7 +70,7 @@ const versionLinks = ((): DefaultTheme.NavItemWithLink[] => {
     case 'local':
       return [
         {
-          text: 'Vite 6 Docs (release)',
+          text: 'Vite 7 Docs (release)',
           link: 'https://vite.dev',
         },
         ...oldVersions,

docs/config/server-options.md

@@ -254,7 +254,7 @@ export default defineConfig({
 
 File system watcher options to pass on to [chokidar](https://github.com/paulmillr/chokidar/tree/3.6.0#api).
 
-The Vite server watcher watches the `root` and skips the `.git/`, `node_modules/`, and Vite's `cacheDir` and `build.outDir` directories by default. When updating a watched file, Vite will apply HMR and update the page only if needed.
+The Vite server watcher watches the `root` and skips the `.git/`, `node_modules/`, `test-results/`, and Vite's `cacheDir` and `build.outDir` directories by default. When updating a watched file, Vite will apply HMR and update the page only if needed.
 
 If set to `null`, no files will be watched. `server.watcher` will provide a compatible event emitter, but calling `add` or `unwatch` will have no effect.
 

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

@@ -2448,23 +2448,31 @@ const makeScssWorker = (
         return unquotedUrl.startsWith('#{')
       }
 
-      const internalImporter: Sass.Importer<'async'> = {
+      const createInternalImporter = (
+        isForRelative: boolean,
+      ): Sass.Importer<'async'> => ({
         async canonicalize(url, context) {
-          const importer = context.containingUrl
-            ? fileURLToPath(context.containingUrl)
-            : options.filename
-          const resolved = await resolvers.sass(
-            environment,
-            url,
-            cleanScssBugUrl(importer),
-          )
-          if (
-            resolved &&
-            (resolved.endsWith('.css') ||
-              resolved.endsWith('.scss') ||
-              resolved.endsWith('.sass'))
-          ) {
-            return pathToFileURL(resolved)
+          if (isForRelative) {
+            // sass passes resolved paths for importer passed to `importer` option
+            const resolved = new URL(url, context.containingUrl ?? undefined)
+            if (fs.existsSync(resolved)) return resolved
+          } else {
+            const importer = context.containingUrl
+              ? fileURLToPath(context.containingUrl)
+              : options.filename
+            const resolved = await resolvers.sass(
+              environment,
+              url,
+              cleanScssBugUrl(importer),
+            )
+            if (
+              resolved &&
+              (resolved.endsWith('.css') ||
+                resolved.endsWith('.scss') ||
+                resolved.endsWith('.sass'))
+            ) {
+              return pathToFileURL(resolved)
+            }
           }
           return null
         },
@@ -2487,12 +2495,13 @@ const makeScssWorker = (
             result.contents ?? (await fsp.readFile(result.file, 'utf-8'))
           return { contents, syntax, sourceMapUrl: canonicalUrl }
         },
-      }
+      })
+
       sassOptions.importers = [
         ...(sassOptions.importers ?? []),
-        internalImporter,
+        createInternalImporter(false),
       ]
-      sassOptions.importer ??= internalImporter
+      sassOptions.importer ??= createInternalImporter(true)
 
       const result = await compiler.compileStringAsync(data, sassOptions)
       return {

packages/vite/tsconfig.check.json

@@ -3,7 +3,7 @@
     "target": "ES2020",
     "moduleResolution": "node16",
     "module": "Node16",
-    "lib": ["ES2020", "WebWorker"], // ES2020 is very conservative check for client types, could be bumped if needed
+    "lib": ["ES2020"], // ES2020 is very conservative check for client types, could be bumped if needed
     "types": [], // Avoid checking unrelated node_modules types
     "noEmit": true,
     "strict": true,

packages/vite/types/importGlob.d.ts

@@ -36,6 +36,16 @@ export interface ImportGlobOptions<
 
 export type GeneralImportGlobOptions = ImportGlobOptions<boolean, string>
 
+/**
+ * Declare Worker in case DOM is not added to the tsconfig lib causing
+ * Worker interface is not defined. For developers with DOM lib added,
+ * the Worker interface will be merged correctly.
+ */
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface Worker {}
+}
+
 export interface KnownAsTypeMap {
   raw: string
   url: string

playground/css/__tests__/sass-tests.ts

@@ -7,6 +7,9 @@ export const sassTest = () => {
     const atImport = await page.$('.sass-at-import')
     const atImportAlias = await page.$('.sass-at-import-alias')
     const atImportRelative = await page.$('.sass-at-import-relative')
+    const atImportReplacementAlias = await page.$(
+      '.sass-at-import-replacement-alias',
+    )
     const urlStartsWithVariable = await page.$('.sass-url-starts-with-variable')
     const urlStartsWithVariableInterpolation1 = await page.$(
       '.sass-url-starts-with-interpolation1',
@@ -35,6 +38,7 @@ export const sassTest = () => {
     expect(await getBg(atImportRelative)).toMatch(
       isBuild ? /base64/ : '/nested/icon.png',
     )
+    expect(await getColor(atImportReplacementAlias)).toBe('olive')
     expect(await getBg(urlStartsWithVariable)).toMatch(
       isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
     )

playground/css/index.html

@@ -36,6 +36,9 @@ <h1>CSS</h1>
   <p class="sass-at-import-relative">
     @import from SASS relative: This should be olive and have bg image
   </p>
+  <p class="sass-at-import-replacement-alias">
+    @import with replacement alias from SASS: This should be olive
+  </p>
   <p class="sass-partial">@import from SASS _partial: This should be orchid</p>
   <p class="sass-url-starts-with-variable">url starts with variable</p>
   <p class="sass-url-starts-with-interpolation1">

playground/css/nested/replacement-alias.scss

@@ -0,0 +1,3 @@
+.sass-at-import-replacement-alias {
+  color: olive;
+}

playground/css/sass.scss

@@ -9,6 +9,7 @@
 @use '=/weapp.wxss'; // wxss file
 @use 'virtual-file-absolute';
 @use '=/scss-dir/main.scss'; // "./dir" reference from vite custom importer
+@use '=replace/nested/replacement-alias.scss';
 
 .sass {
   /* injected via vite.config.js */

playground/css/vite.config.js

@@ -62,13 +62,20 @@ export default defineConfig({
     },
   },
   resolve: {
-    alias: {
-      '=': __dirname,
-      spacefolder: __dirname + '/folder with space',
-      '#alias': __dirname + '/aliased/foo.css',
-      '#alias?inline': __dirname + '/aliased/foo.css?inline',
-      '#alias-module': __dirname + '/aliased/bar.module.css',
-    },
+    alias: [
+      { find: '=', replacement: __dirname },
+      { find: /=replace\/(.*)/, replacement: `${__dirname}/$1` },
+      { find: 'spacefolder', replacement: __dirname + '/folder with space' },
+      { find: '#alias', replacement: __dirname + '/aliased/foo.css' },
+      {
+        find: '#alias?inline',
+        replacement: __dirname + '/aliased/foo.css?inline',
+      },
+      {
+        find: '#alias-module',
+        replacement: __dirname + '/aliased/bar.module.css',
+      },
+    ],
   },
   css: {
     modules: {