vite 5.0.0-beta.5 → 5.0.0-beta.7

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

@@ -11876,11 +11876,22 @@ const replaceSlashOrColonRE = /[/:]/g;
 const replaceDotRE = /\./g;
 const replaceNestedIdRE = /(\s*>\s*)/g;
 const replaceHashRE = /#/g;
-const flattenId = (id) => id
-    .replace(replaceSlashOrColonRE, '_')
-    .replace(replaceDotRE, '__')
-    .replace(replaceNestedIdRE, '___')
-    .replace(replaceHashRE, '____');
+const flattenId = (id) => {
+    const flatId = limitFlattenIdLength(id
+        .replace(replaceSlashOrColonRE, '_')
+        .replace(replaceDotRE, '__')
+        .replace(replaceNestedIdRE, '___')
+        .replace(replaceHashRE, '____'));
+    return flatId;
+};
+const FLATTEN_ID_HASH_LENGTH = 8;
+const FLATTEN_ID_MAX_FILE_LENGTH = 170;
+const limitFlattenIdLength = (id, limit = FLATTEN_ID_MAX_FILE_LENGTH) => {
+    if (id.length <= limit) {
+        return id;
+    }
+    return id.slice(0, limit - (FLATTEN_ID_HASH_LENGTH + 1)) + '_' + getHash(id);
+};
 const normalizeId = (id) => id.replace(replaceNestedIdRE, ' > ');
 // Supported by Node, Deno, Bun
 const NODE_BUILTIN_NAMESPACE = 'node:';
@@ -28500,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,
 });
@@ -28592,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
@@ -38042,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>
                     //
@@ -38116,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
@@ -38171,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) {
@@ -38449,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;
@@ -38902,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
@@ -38945,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);
             }
@@ -39148,13 +39170,7 @@ function cssPostPlugin(config) {
                     .filter((chunk) => chunk.type === 'chunk')
                     .map((chunk) => [chunk.preliminaryFileName, chunk.fileName]));
                 const pureCssChunkNames = [...pureCssChunks].map((pureCssChunk) => prelimaryNameToChunkMap[pureCssChunk.fileName]);
-                const emptyChunkFiles = pureCssChunkNames
-                    .map((file) => path$o.basename(file))
-                    .join('|')
-                    .replace(/\./g, '\\.');
-                const emptyChunkRE = new RegExp(opts.format === 'es'
-                    ? `\\bimport\\s*["'][^"']*(?:${emptyChunkFiles})["'];\n?`
-                    : `\\brequire\\(\\s*["'][^"']*(?:${emptyChunkFiles})["']\\);\n?`, 'g');
+                const replaceEmptyChunk = getEmptyChunkReplacer(pureCssChunkNames, opts.format);
                 for (const file in bundle) {
                     const chunk = bundle[file];
                     if (chunk.type === 'chunk') {
@@ -39170,9 +39186,7 @@ function cssPostPlugin(config) {
                             }
                             return true;
                         });
-                        chunk.code = chunk.code.replace(emptyChunkRE, 
-                        // remove css import while preserving source map location
-                        (m) => `/* empty css ${''.padEnd(m.length - 15)}*/`);
+                        chunk.code = replaceEmptyChunk(chunk.code);
                     }
                 }
                 const removedPureCssFiles = removedPureCssFilesCache.get(config);
@@ -39213,6 +39227,23 @@ function cssPostPlugin(config) {
         },
     };
 }
+/**
+ * Create a replacer function that takes code and replaces given pure CSS chunk imports
+ * @param pureCssChunkNames The chunks that only contain pure CSS and should be replaced
+ * @param outputFormat The module output format to decide whether to replace `import` or `require`
+ */
+function getEmptyChunkReplacer(pureCssChunkNames, outputFormat) {
+    const emptyChunkFiles = pureCssChunkNames
+        .map((file) => path$o.basename(file))
+        .join('|')
+        .replace(/\./g, '\\.');
+    const emptyChunkRE = new RegExp(outputFormat === 'es'
+        ? `\\bimport\\s*["'][^"']*(?:${emptyChunkFiles})["'];\n?`
+        : `\\brequire\\(\\s*["'][^"']*(?:${emptyChunkFiles})["']\\);\n?`, 'g');
+    return (code) => code.replace(emptyChunkRE, 
+    // remove css import while preserving source map location
+    (m) => `/* empty css ${''.padEnd(m.length - 15)}*/`);
+}
 function createCSSResolvers(config) {
     let cssResolve;
     let sassResolve;
@@ -39508,8 +39539,8 @@ function createCachedImport(imp) {
         return cached;
     };
 }
-const importPostcssImport = createCachedImport(() => import('./dep-958c4c65.js').then(function (n) { return n.i; }));
-const importPostcssModules = createCachedImport(() => import('./dep-86245b77.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
@@ -42330,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;
@@ -42733,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;
@@ -47277,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;
@@ -47444,6 +47484,23 @@ function buildImportAnalysisPlugin(config) {
                     }
                     const s = new MagicString(code);
                     const rewroteMarkerStartPos = new Set(); // position of the leading double quote
+                    const fileDeps = [];
+                    const addFileDep = (url, runtime = false) => {
+                        const index = fileDeps.findIndex((dep) => dep.url === url);
+                        if (index === -1) {
+                            return fileDeps.push({ url, runtime }) - 1;
+                        }
+                        else {
+                            return index;
+                        }
+                    };
+                    const getFileDep = (index) => {
+                        const fileDep = fileDeps[index];
+                        if (!fileDep) {
+                            throw new Error(`Cannot find file dep at index ${index}`);
+                        }
+                        return fileDep;
+                    };
                     if (imports.length) {
                         for (let index = 0; index < imports.length; index++) {
                             // To handle escape sequences in specifier strings, the .n field will be provided where possible.
@@ -47471,12 +47528,12 @@ function buildImportAnalysisPlugin(config) {
                                     analyzed.add(filename);
                                     const chunk = bundle[filename];
                                     if (chunk) {
-                                        deps.add(chunk.fileName);
+                                        deps.add(addFileDep(chunk.fileName));
                                         chunk.imports.forEach(addDeps);
                                         // Ensure that the css imported by current chunk is loaded after the dependencies.
                                         // So the style of current chunk won't be overwritten unexpectedly.
                                         chunk.viteMetadata.importedCss.forEach((file) => {
-                                            deps.add(file);
+                                            deps.add(addFileDep(file));
                                         });
                                     }
                                     else {
@@ -47485,7 +47542,7 @@ function buildImportAnalysisPlugin(config) {
                                         if (chunk) {
                                             if (chunk.viteMetadata.importedCss.size) {
                                                 chunk.viteMetadata.importedCss.forEach((file) => {
-                                                    deps.add(file);
+                                                    deps.add(addFileDep(file));
                                                 });
                                                 hasRemovedPureCssChunk = true;
                                             }
@@ -47508,7 +47565,7 @@ function buildImportAnalysisPlugin(config) {
                                     ? modulePreload === false
                                         ? // CSS deps use the same mechanism as module preloads, so even if disabled,
                                             // we still need to pass these deps to the preload helper in dynamic imports.
-                                            [...deps].filter((d) => d.endsWith('.css'))
+                                            [...deps].filter((d) => getFileDep(d).url.endsWith('.css'))
                                         : [...deps]
                                     : [];
                                 let renderedDeps;
@@ -47524,13 +47581,18 @@ function buildImportAnalysisPlugin(config) {
                                         const cssDeps = [];
                                         const otherDeps = [];
                                         for (const dep of depsArray) {
-                                            (dep.endsWith('.css') ? cssDeps : otherDeps).push(dep);
+                                            if (getFileDep(dep).url.endsWith('.css')) {
+                                                cssDeps.push(dep);
+                                            }
+                                            else {
+                                                otherDeps.push(dep);
+                                            }
                                         }
                                         resolvedDeps = [
-                                            ...resolveDependencies(normalizedFile, otherDeps, {
+                                            ...resolveDependencies(normalizedFile, otherDeps.map((otherDep) => getFileDep(otherDep).url), {
                                                 hostId: file,
                                                 hostType: 'js',
-                                            }),
+                                            }).map((otherDep) => addFileDep(otherDep)),
                                             ...cssDeps,
                                         ];
                                     }
@@ -47538,26 +47600,36 @@ function buildImportAnalysisPlugin(config) {
                                         resolvedDeps = depsArray;
                                     }
                                     renderedDeps = resolvedDeps.map((dep) => {
-                                        const replacement = toOutputFilePathInJS(dep, 'asset', chunk.fileName, 'js', config, toRelativePath);
-                                        const replacementString = typeof replacement === 'string'
-                                            ? JSON.stringify(replacement)
-                                            : replacement.runtime;
-                                        return replacementString;
+                                        const replacement = toOutputFilePathInJS(getFileDep(dep).url, 'asset', chunk.fileName, 'js', config, toRelativePath);
+                                        if (typeof replacement === 'string') {
+                                            return addFileDep(replacement);
+                                        }
+                                        return addFileDep(replacement.runtime, true);
                                     });
                                 }
                                 else {
                                     renderedDeps = depsArray.map((d) => 
                                     // Don't include the assets dir if the default asset file names
                                     // are used, the path will be reconstructed by the import preload helper
-                                    JSON.stringify(optimizeModulePreloadRelativePaths
-                                        ? toRelativePath(d, file)
-                                        : d));
+                                    optimizeModulePreloadRelativePaths
+                                        ? addFileDep(toRelativePath(getFileDep(d).url, file))
+                                        : d);
                                 }
-                                s.update(markerStartPos, markerStartPos + preloadMarker.length + 2, `[${renderedDeps.join(',')}]`);
+                                s.update(markerStartPos, markerStartPos + preloadMarker.length + 2, `__vite__mapDeps([${renderedDeps.join(',')}])`);
                                 rewroteMarkerStartPos.add(markerStartPos);
                             }
                         }
                     }
+                    const fileDepsCode = `[${fileDeps
+                        .map((fileDep) => fileDep.runtime ? fileDep.url : JSON.stringify(fileDep.url))
+                        .join(',')}]`;
+                    s.append(`\
+function __vite__mapDeps(indexes) {
+  if (!__vite__mapDeps.viteFileDeps) {
+    __vite__mapDeps.viteFileDeps = ${fileDepsCode}
+  }
+  return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
+}`);
                     // there may still be markers due to inlined dynamic imports, remove
                     // all the markers regardless
                     let markerStartPos = indexOfMatchInSlice(code, preloadMarkerWithQuote);
@@ -64895,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}`);
@@ -65300,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) {
@@ -65312,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') {
@@ -65333,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 }) => {
@@ -65364,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];
@@ -65396,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];
@@ -65416,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,
@@ -66866,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-958c4c65.js → dep-8648c2fe.js}

@@ -1,4 +1,4 @@
-import { D as getDefaultExportFromCjs } from './dep-4109817a.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-86245b77.js → dep-cb981dcb.js}

@@ -1,4 +1,4 @@
-import { E as commonjsGlobal, D as getDefaultExportFromCjs } from './dep-4109817a.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-4109817a.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-4109817a.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-4109817a.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-4109817a.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-4109817a.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,