vite 5.0.0-beta.6 → 5.0.0-beta.7

package/dist/node/chunks/{dep-db07a1ea.js → dep-7af400e9.js}

@@ -28511,7 +28511,7 @@ const browserExternalId = '__vite-browser-external';
 // special id for packages that are optional peer deps
 const optionalPeerDepId = '__vite-optional-peer-dep';
 const subpathImportsPrefix = '#';
-const startsWithWordCharRE = /^\w/;
+const startsWithWordCharRE$1 = /^\w/;
 const debug$e = createDebugger('vite:resolve-details', {
     onlyWhenFocused: true,
 });
@@ -28603,7 +28603,7 @@ function resolvePlugin(resolveOptions) {
             // relative
             if (id[0] === '.' ||
                 ((preferRelative || importer?.endsWith('.html')) &&
-                    startsWithWordCharRE.test(id))) {
+                    startsWithWordCharRE$1.test(id))) {
                 const basedir = importer ? path$o.dirname(importer) : process.cwd();
                 const fsPath = path$o.resolve(basedir, id);
                 // handle browser field mapping for relative imports
@@ -38053,7 +38053,7 @@ function buildHtmlPlugin(config) {
                     // newline trailing the previous node
                     const lineStartOffset = node.sourceCodeLocation.startOffset -
                         node.sourceCodeLocation.startCol;
-                    const line = s.slice(lineStartOffset, node.sourceCodeLocation.startOffset);
+                    const line = s.slice(Math.max(0, lineStartOffset), node.sourceCodeLocation.startOffset);
                     // <previous-line-node></previous-line-node>
                     // <target-node></target-node>
                     //
@@ -38127,21 +38127,7 @@ function buildHtmlPlugin(config) {
                         }
                         else if (node.childNodes.length) {
                             const scriptNode = node.childNodes.pop();
-                            const cleanCode = stripLiteral(scriptNode.value);
-                            let match;
-                            inlineImportRE.lastIndex = 0;
-                            while ((match = inlineImportRE.exec(cleanCode))) {
-                                const { 1: url, index } = match;
-                                const startUrl = cleanCode.indexOf(url, index);
-                                const start = startUrl + 1;
-                                const end = start + url.length - 2;
-                                const startOffset = scriptNode.sourceCodeLocation.startOffset;
-                                scriptUrls.push({
-                                    start: start + startOffset,
-                                    end: end + startOffset,
-                                    url: scriptNode.value.slice(start, end),
-                                });
-                            }
+                            scriptUrls.push(...extractImportExpressionFromClassicScript(scriptNode));
                         }
                     }
                     // For asset references in index.html, also generate an import
@@ -38182,26 +38168,19 @@ function buildHtmlPlugin(config) {
                             }
                         }
                     }
-                    // <tag style="... url(...) or image-set(...) ..."></tag>
-                    // extract inline styles as virtual css and add class attribute to tag for selecting
-                    const inlineStyle = node.attrs.find((prop) => prop.prefix === undefined &&
-                        prop.name === 'style' &&
-                        // only url(...) or image-set(...) in css need to emit file
-                        (prop.value.includes('url(') ||
-                            prop.value.includes('image-set(')));
+                    const inlineStyle = findNeedTransformStyleAttribute(node);
                     if (inlineStyle) {
                         inlineModuleIndex++;
-                        // replace `inline style` to class
+                        // replace `inline style` with __VITE_INLINE_CSS__**_**__
                         // and import css in js code
-                        const code = inlineStyle.value;
+                        const code = inlineStyle.attr.value;
                         const filePath = id.replace(normalizePath$3(config.root), '');
                         addToHTMLProxyCache(config, filePath, inlineModuleIndex, { code });
                         // will transform with css plugin and cache result with css-post plugin
                         js += `\nimport "${id}?html-proxy&inline-css&style-attr&index=${inlineModuleIndex}.css"`;
                         const hash = getHash(cleanUrl(id));
                         // will transform in `applyHtmlTransforms`
-                        const sourceCodeLocation = node.sourceCodeLocation.attrs['style'];
-                        overwriteAttrValue(s, sourceCodeLocation, `__VITE_INLINE_CSS__${hash}_${inlineModuleIndex}__`);
+                        overwriteAttrValue(s, inlineStyle.location, `__VITE_INLINE_CSS__${hash}_${inlineModuleIndex}__`);
                     }
                     // <style>...</style>
                     if (node.nodeName === 'style' && node.childNodes.length) {
@@ -38460,6 +38439,37 @@ function buildHtmlPlugin(config) {
         },
     };
 }
+// <tag style="... url(...) or image-set(...) ..."></tag>
+// extract inline styles as virtual css
+function findNeedTransformStyleAttribute(node) {
+    const attr = node.attrs.find((prop) => prop.prefix === undefined &&
+        prop.name === 'style' &&
+        // only url(...) or image-set(...) in css need to emit file
+        (prop.value.includes('url(') || prop.value.includes('image-set(')));
+    if (!attr)
+        return undefined;
+    const location = node.sourceCodeLocation?.attrs?.['style'];
+    return { attr, location };
+}
+function extractImportExpressionFromClassicScript(scriptTextNode) {
+    const startOffset = scriptTextNode.sourceCodeLocation.startOffset;
+    const cleanCode = stripLiteral(scriptTextNode.value);
+    const scriptUrls = [];
+    let match;
+    inlineImportRE.lastIndex = 0;
+    while ((match = inlineImportRE.exec(cleanCode))) {
+        const { 1: url, index } = match;
+        const startUrl = cleanCode.indexOf(url, index);
+        const start = startUrl + 1;
+        const end = start + url.length - 2;
+        scriptUrls.push({
+            start: start + startOffset,
+            end: end + startOffset,
+            url: scriptTextNode.value.slice(start, end),
+        });
+    }
+    return scriptUrls;
+}
 function preImportMapHook(config) {
     return (html, ctx) => {
         const importMapIndex = html.match(importMapRE)?.index;
@@ -38913,6 +38923,19 @@ function cssPostPlugin(config) {
                 return;
             }
             css = stripBomTag(css);
+            // cache css compile result to map
+            // and then use the cache replace inline-style-flag
+            // when `generateBundle` in vite:build-html plugin and devHtmlHook
+            const inlineCSS = inlineCSSRE.test(id);
+            const isHTMLProxy = htmlProxyRE.test(id);
+            if (inlineCSS && isHTMLProxy) {
+                const query = parseRequest(id);
+                if (styleAttrRE.test(id)) {
+                    css = css.replace(/"/g, '&quot;');
+                }
+                addToHTMLProxyTransformResult(`${getHash(cleanUrl(id))}_${Number.parseInt(query.index)}`, css);
+                return `export default ''`;
+            }
             const inlined = inlineRE.test(id);
             const modules = cssModulesCache.get(config).get(id);
             // #6984, #7552
@@ -38956,18 +38979,6 @@ function cssPostPlugin(config) {
             }
             // build CSS handling ----------------------------------------------------
             // record css
-            // cache css compile result to map
-            // and then use the cache replace inline-style-flag when `generateBundle` in vite:build-html plugin
-            const inlineCSS = inlineCSSRE.test(id);
-            const isHTMLProxy = htmlProxyRE.test(id);
-            const query = parseRequest(id);
-            if (inlineCSS && isHTMLProxy) {
-                if (styleAttrRE.test(id)) {
-                    css = css.replace(/"/g, '&quot;');
-                }
-                addToHTMLProxyTransformResult(`${getHash(cleanUrl(id))}_${Number.parseInt(query.index)}`, css);
-                return `export default ''`;
-            }
             if (!inlined) {
                 styles.set(id, css);
             }
@@ -39528,8 +39539,8 @@ function createCachedImport(imp) {
         return cached;
     };
 }
-const importPostcssImport = createCachedImport(() => import('./dep-ce41d4ea.js').then(function (n) { return n.i; }));
-const importPostcssModules = createCachedImport(() => import('./dep-c3c41c00.js').then(function (n) { return n.i; }));
+const importPostcssImport = createCachedImport(() => import('./dep-8648c2fe.js').then(function (n) { return n.i; }));
+const importPostcssModules = createCachedImport(() => import('./dep-cb981dcb.js').then(function (n) { return n.i; }));
 const importPostcss = createCachedImport(() => import('postcss'));
 /**
  * @experimental
@@ -42350,19 +42361,8 @@ function importAnalysisPlugin(config) {
                 [imports, exports] = parse$e(source);
             }
             catch (e) {
-                const isVue = importer.endsWith('.vue');
-                const isJsx = importer.endsWith('.jsx') || importer.endsWith('.tsx');
-                const maybeJSX = !isVue && isJSRequest(importer);
-                const msg = isVue
-                    ? `Install @vitejs/plugin-vue to handle .vue files.`
-                    : maybeJSX
-                        ? isJsx
-                            ? `If you use tsconfig.json, make sure to not set jsx to preserve.`
-                            : `If you are using JSX, make sure to name the file with the .jsx or .tsx extension.`
-                        : `You may need to install appropriate plugins to handle the ${path$o.extname(importer)} file format, or if it's an asset, add "**/*${path$o.extname(importer)}" to \`assetsInclude\` in your configuration.`;
-                this.error(`Failed to parse source for import analysis because the content ` +
-                    `contains invalid JS syntax. ` +
-                    msg, e.idx);
+                const { message, showCodeFrame } = createParseErrorInfo(importer, source);
+                this.error(message, showCodeFrame ? e.idx : undefined);
             }
             const depsOptimizer = getDepsOptimizer(config, ssr);
             const { moduleGraph } = server;
@@ -42753,6 +42753,25 @@ function mergeAcceptedUrls(orderedUrls) {
     }
     return acceptedUrls;
 }
+function createParseErrorInfo(importer, source) {
+    const isVue = importer.endsWith('.vue');
+    const isJsx = importer.endsWith('.jsx') || importer.endsWith('.tsx');
+    const maybeJSX = !isVue && isJSRequest(importer);
+    const probablyBinary = source.includes('\ufffd' /* unicode replacement character */);
+    const msg = isVue
+        ? `Install @vitejs/plugin-vue to handle .vue files.`
+        : maybeJSX
+            ? isJsx
+                ? `If you use tsconfig.json, make sure to not set jsx to preserve.`
+                : `If you are using JSX, make sure to name the file with the .jsx or .tsx extension.`
+            : `You may need to install appropriate plugins to handle the ${path$o.extname(importer)} file format, or if it's an asset, add "**/*${path$o.extname(importer)}" to \`assetsInclude\` in your configuration.`;
+    return {
+        message: `Failed to parse source for import analysis because the content ` +
+            `contains invalid JS syntax. ` +
+            msg,
+        showCodeFrame: !probablyBinary,
+    };
+}
 function interopNamedImports(str, importSpecifier, rewrittenUrl, importIndex, importer, config) {
     const source = str.original;
     const { s: start, e: end, ss: expStart, se: expEnd, d: dynamicIndex, } = importSpecifier;
@@ -47297,7 +47316,8 @@ function buildImportAnalysisPlugin(config) {
                 imports = parse$e(source)[0];
             }
             catch (e) {
-                this.error(e, e.idx);
+                const { message, showCodeFrame } = createParseErrorInfo(importer, source);
+                this.error(message, showCodeFrame ? e.idx : undefined);
             }
             if (!imports.length) {
                 return null;
@@ -64947,7 +64967,8 @@ function proxyMiddleware(httpServer, options, config) {
                     }
                     else if (bypassResult === false) {
                         debug$1?.(`bypass: ${req.url} -> 404`);
-                        return res.end(404);
+                        res.statusCode = 404;
+                        return res.end();
                     }
                 }
                 debug$1?.(`${req.url} -> ${opts.target || opts.forward}`);
@@ -65352,8 +65373,9 @@ function getHtmlFilename(url, server) {
 function shouldPreTransform(url, config) {
     return (!checkPublicFile(url, config) && (isJSRequest(url) || isCSSRequest(url)));
 }
-const processNodeUrl = (attr, sourceCodeLocation, s, config, htmlPath, originalUrl, server) => {
-    let url = attr.value || '';
+const startsWithWordCharRE = /^\w/;
+const isSrcSet = (attr) => attr.name === 'srcset' && attr.prefix === undefined;
+const processNodeUrl = (url, useSrcSetReplacer, config, htmlPath, originalUrl, server) => {
     if (server?.moduleGraph) {
         const mod = server.moduleGraph.urlToModuleMap.get(url);
         if (mod && mod.lastHMRTimestamp > 0) {
@@ -65364,12 +65386,12 @@ const processNodeUrl = (attr, sourceCodeLocation, s, config, htmlPath, originalU
     if (url[0] === '/' && url[1] !== '/') {
         // prefix with base (dev only, base is never relative)
         const fullUrl = path$o.posix.join(devBase, url);
-        overwriteAttrValue(s, sourceCodeLocation, fullUrl);
         if (server && shouldPreTransform(url, config)) {
             preTransformRequest(server, fullUrl, devBase);
         }
+        return fullUrl;
     }
-    else if (url[0] === '.' &&
+    else if ((url[0] === '.' || startsWithWordCharRE.test(url)) &&
         originalUrl &&
         originalUrl !== '/' &&
         htmlPath === '/index.html') {
@@ -65385,10 +65407,10 @@ const processNodeUrl = (attr, sourceCodeLocation, s, config, htmlPath, originalU
         // path will add `/a/` prefix, it will caused 404.
         // rewrite before `./index.js` -> `localhost:5173/a/index.js`.
         // rewrite after `../index.js` -> `localhost:5173/index.js`.
-        const processedUrl = attr.name === 'srcset' && attr.prefix === undefined
+        const processedUrl = useSrcSetReplacer
             ? processSrcSetSync(url, ({ url }) => replacer(url))
             : replacer(url);
-        overwriteAttrValue(s, sourceCodeLocation, processedUrl);
+        return processedUrl;
     }
 };
 const devHtmlHook = async (html, { path: htmlPath, filename, server, originalUrl }) => {
@@ -65416,6 +65438,7 @@ const devHtmlHook = async (html, { path: htmlPath, filename, server, originalUrl
     let inlineModuleIndex = -1;
     const proxyCacheUrl = cleanUrl(proxyModulePath).replace(normalizePath$3(config.root), '');
     const styleUrl = [];
+    const inlineStyles = [];
     const addInlineModule = (node, ext) => {
         inlineModuleIndex++;
         const contentNode = node.childNodes[0];
@@ -65448,11 +65471,32 @@ const devHtmlHook = async (html, { path: htmlPath, filename, server, originalUrl
         if (node.nodeName === 'script') {
             const { src, sourceCodeLocation, isModule } = getScriptInfo(node);
             if (src) {
-                processNodeUrl(src, sourceCodeLocation, s, config, htmlPath, originalUrl, server);
+                const processedUrl = processNodeUrl(src.value, isSrcSet(src), config, htmlPath, originalUrl, server);
+                if (processedUrl) {
+                    overwriteAttrValue(s, sourceCodeLocation, processedUrl);
+                }
             }
             else if (isModule && node.childNodes.length) {
                 addInlineModule(node, 'js');
             }
+            else if (node.childNodes.length) {
+                const scriptNode = node.childNodes[node.childNodes.length - 1];
+                for (const { url, start, end, } of extractImportExpressionFromClassicScript(scriptNode)) {
+                    const processedUrl = processNodeUrl(url, false, config, htmlPath, originalUrl);
+                    if (processedUrl) {
+                        s.update(start, end, processedUrl);
+                    }
+                }
+            }
+        }
+        const inlineStyle = findNeedTransformStyleAttribute(node);
+        if (inlineStyle) {
+            inlineModuleIndex++;
+            inlineStyles.push({
+                index: inlineModuleIndex,
+                location: inlineStyle.location,
+                code: inlineStyle.attr.value,
+            });
         }
         if (node.nodeName === 'style' && node.childNodes.length) {
             const children = node.childNodes[0];
@@ -65468,31 +65512,46 @@ const devHtmlHook = async (html, { path: htmlPath, filename, server, originalUrl
             for (const p of node.attrs) {
                 const attrKey = getAttrKey(p);
                 if (p.value && assetAttrs.includes(attrKey)) {
-                    processNodeUrl(p, node.sourceCodeLocation.attrs[attrKey], s, config, htmlPath, originalUrl);
+                    const processedUrl = processNodeUrl(p.value, isSrcSet(p), config, htmlPath, originalUrl);
+                    if (processedUrl) {
+                        overwriteAttrValue(s, node.sourceCodeLocation.attrs[attrKey], processedUrl);
+                    }
                 }
             }
         }
     });
-    await Promise.all(styleUrl.map(async ({ start, end, code }, index) => {
-        const url = `${proxyModulePath}?html-proxy&direct&index=${index}.css`;
-        // ensure module in graph after successful load
-        const mod = await moduleGraph.ensureEntryFromUrl(url, false);
-        ensureWatchedFile(watcher, mod.file, config.root);
-        const result = await server.pluginContainer.transform(code, mod.id);
-        let content = '';
-        if (result) {
-            if (result.map && 'version' in result.map) {
-                if (result.map.mappings) {
-                    await injectSourcesContent(result.map, proxyModulePath, config.logger);
+    await Promise.all([
+        ...styleUrl.map(async ({ start, end, code }, index) => {
+            const url = `${proxyModulePath}?html-proxy&direct&index=${index}.css`;
+            // ensure module in graph after successful load
+            const mod = await moduleGraph.ensureEntryFromUrl(url, false);
+            ensureWatchedFile(watcher, mod.file, config.root);
+            const result = await server.pluginContainer.transform(code, mod.id);
+            let content = '';
+            if (result) {
+                if (result.map && 'version' in result.map) {
+                    if (result.map.mappings) {
+                        await injectSourcesContent(result.map, proxyModulePath, config.logger);
+                    }
+                    content = getCodeWithSourcemap('css', result.code, result.map);
+                }
+                else {
+                    content = result.code;
                 }
-                content = getCodeWithSourcemap('css', result.code, result.map);
-            }
-            else {
-                content = result.code;
             }
-        }
-        s.overwrite(start, end, content);
-    }));
+            s.overwrite(start, end, content);
+        }),
+        ...inlineStyles.map(async ({ index, location, code }) => {
+            // will transform with css plugin and cache result with css-post plugin
+            const url = `${proxyModulePath}?html-proxy&inline-css&style-attr&index=${index}.css`;
+            const mod = await moduleGraph.ensureEntryFromUrl(url, false);
+            ensureWatchedFile(watcher, mod.file, config.root);
+            await server?.pluginContainer.transform(code, mod.id);
+            const hash = getHash(cleanUrl(mod.id));
+            const result = htmlProxyResult.get(`${hash}_${index}`);
+            overwriteAttrValue(s, location, result ?? '');
+        }),
+    ]);
     html = s.toString();
     return {
         html,
@@ -66918,8 +66977,8 @@ assetFileNames isn't equal for every build.rollupOptions.output. A single patter
  */
 function resolveBaseUrl(base = '/', isBuild, logger) {
     if (base[0] === '.') {
-        logger.warn(colors$1.yellow(colors$1.bold(`(!) invalid "base" option: ${base}. The value can only be an absolute ` +
-            `URL, ./, or an empty string.`)));
+        logger.warn(colors$1.yellow(colors$1.bold(`(!) invalid "base" option: "${base}". The value can only be an absolute ` +
+            `URL, "./", or an empty string.`)));
         return '/';
     }
     // external URL flag

package/dist/node/chunks/{dep-ce41d4ea.js → dep-8648c2fe.js}

@@ -1,4 +1,4 @@
-import { D as getDefaultExportFromCjs } from './dep-db07a1ea.js';
+import { D as getDefaultExportFromCjs } from './dep-7af400e9.js';
 import require$$0 from 'path';
 import require$$0__default from 'fs';
 import { l as lib } from './dep-c423598f.js';

package/dist/node/chunks/{dep-c3c41c00.js → dep-cb981dcb.js}

@@ -1,4 +1,4 @@
-import { E as commonjsGlobal, D as getDefaultExportFromCjs } from './dep-db07a1ea.js';
+import { E as commonjsGlobal, D as getDefaultExportFromCjs } from './dep-7af400e9.js';
 import require$$0__default from 'fs';
 import require$$0 from 'postcss';
 import require$$0$1 from 'path';

package/dist/node/cli.js

@@ -2,7 +2,7 @@ import path from 'node:path';
 import fs from 'node:fs';
 import { performance } from 'node:perf_hooks';
 import { EventEmitter } from 'events';
-import { C as colors, x as createLogger, h as resolveConfig } from './chunks/dep-db07a1ea.js';
+import { C as colors, x as createLogger, h as resolveConfig } from './chunks/dep-7af400e9.js';
 import { VERSION } from './constants.js';
 import 'node:fs/promises';
 import 'node:url';
@@ -759,7 +759,7 @@ cli
     filterDuplicateOptions(options);
     // output structure is preserved even after bundling so require()
     // is ok here
-    const { createServer } = await import('./chunks/dep-db07a1ea.js').then(function (n) { return n.H; });
+    const { createServer } = await import('./chunks/dep-7af400e9.js').then(function (n) { return n.H; });
     try {
         const server = await createServer({
             root,
@@ -840,7 +840,7 @@ cli
     .option('-w, --watch', `[boolean] rebuilds when modules have changed on disk`)
     .action(async (root, options) => {
     filterDuplicateOptions(options);
-    const { build } = await import('./chunks/dep-db07a1ea.js').then(function (n) { return n.G; });
+    const { build } = await import('./chunks/dep-7af400e9.js').then(function (n) { return n.G; });
     const buildOptions = cleanOptions(options);
     try {
         await build({
@@ -868,7 +868,7 @@ cli
     .option('--force', `[boolean] force the optimizer to ignore the cache and re-bundle`)
     .action(async (root, options) => {
     filterDuplicateOptions(options);
-    const { optimizeDeps } = await import('./chunks/dep-db07a1ea.js').then(function (n) { return n.F; });
+    const { optimizeDeps } = await import('./chunks/dep-7af400e9.js').then(function (n) { return n.F; });
     try {
         const config = await resolveConfig({
             root,
@@ -895,7 +895,7 @@ cli
     .option('--outDir <dir>', `[string] output directory (default: dist)`)
     .action(async (root, options) => {
     filterDuplicateOptions(options);
-    const { preview } = await import('./chunks/dep-db07a1ea.js').then(function (n) { return n.I; });
+    const { preview } = await import('./chunks/dep-7af400e9.js').then(function (n) { return n.I; });
     try {
         const server = await preview({
             root,