Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS in HTML (inline) fails to build #15527

Closed
7 tasks done
movahhedi opened this issue Jan 7, 2024 · 3 comments · Fixed by #15554
Closed
7 tasks done

CSS in HTML (inline) fails to build #15527

movahhedi opened this issue Jan 7, 2024 · 3 comments · Fixed by #15554
Labels
feat: css feat: html p4-important Violate documented behavior or significantly improves performance (priority)

Comments

@movahhedi
Copy link

movahhedi commented Jan 7, 2024 •
edited
Loading

Describe the bug

Hello there.
I'm trying to put CSS inline in HTML. But upon build, I get this:

C:\Shahab\repos\vite-bug-inline-css>yarn build
vite v5.0.11 building for production...
✓ 1 modules transformed.
epose:html-inline-proxy] Could not load C:Shahab
eposbug-inline-cssindex.html?html-proxy&inline-css&index=0.css (imported by index.html): No matching HTML proxy module found from C:Shahab
ite-bug-inline-cssindex.html?html-proxy&inline-css&index=0.css
error during build:
eposr: Could not load C:Shahab
eposbug-inline-cssindex.html?html-proxy&inline-css&index=0.css (imported by index.html): No matching HTML proxy module found from C:Shahab
ite-bug-inline-cssindex.html?html-proxy&inline-css&index=0.css
    at Object.load (file:///C:/Shahab/repos/vite-bug-inline-css/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:38723:27)
    at file:///C:/Shahab/repos/vite-bug-inline-css/node_modules/rollup/dist/es/shared/node-entry.js:18670:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///C:/Shahab/repos/vite-bug-inline-css/node_modules/rollup/dist/es/shared/node-entry.js:18570:28)
    at async file:///C:/Shahab/repos/vite-bug-inline-css/node_modules/rollup/dist/es/shared/node-entry.js:17740:33
    at async Queue.work (file:///C:/Shahab/repos/vite-bug-inline-css/node_modules/rollup/dist/es/shared/node-entry.js:18780:32)

C:\Shahab\repos\vite-bug-inline-css>

I've created a minimal reproduction here.

index.html

<!DOCTYPE html>
<html id="root">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
	<style>
		body {
			background: red;
		}
	</style>
</body>

</html>

Putting the <style> in <head> doesn't make any difference.

vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
	// base: "",
	build: {
		rollupOptions: {
			input: {
				main: "index.html",
			},
		},
	},
});

tsconfig.json

{
	"compilerOptions": {
		"noImplicitAny": false,
		"target": "es2020",
		"module": "ESNext",
		"outDir": "dist",
		"removeComments": false,
		"preserveConstEnums": true,
		"sourceMap": true,
		"esModuleInterop": true,
		"resolveJsonModule": true,
		"allowSyntheticDefaultImports": true,
		"moduleResolution": "node",
		"allowImportingTsExtensions": false,
		"noEmit": false,
		"typeRoots": ["./node_modules/@types", "./@types", "./node_modules"],
		"types": ["vite/client"],
		"declaration": true,
		"strict": true,
	},
	"include": ["api/**/*", "../shared/src", "rollup.config.js", "vite.config.ts", "*.cjs"],
	"exclude": ["node_modules", "**/*.spec.ts"]
}

Reproduction

https://github.com/movahhedi/vite-bug-inline-css

Steps to reproduce

In the reproduction repo, (using Yarn Berry v4.0.2), after yarn install, run yarn build.

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13400
    Memory: 5.71 GB / 15.75 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 4.0.2 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.91)
    Internet Explorer: 11.0.22621.1

Used Package Manager

yarn

Logs

No response

Validations
@chaejunlee
Copy link
Contributor

Your minimum reproduction doesn't seem to error.

https://stackblitz.com/github/movahhedi/vite-bug-inline-css?file=package.json

Screenshot 2024-01-07 at 16 36 44

@bluwy
Copy link
Member

bluwy commented Jan 8, 2024

I think this is a Windows bug where we're not properly handling backslashes in id here:

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

Line 459 in b44c493

js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.js"`

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

Line 584 in b44c493

js += `\nimport "${id}?html-proxy&inline-css&style-attr&index=${inlineModuleIndex}.css"`

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

Line 603 in b44c493

js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"`

I'm a bit surprised we only got this bug report today.

As a fix, we could probably call normalizePath on the filePath above those linked codes and use that directly instead of id. That way we can compute this part quicker:

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

Lines 99 to 107 in b44c493

const index = Number(proxyMatch[1])
const file = cleanUrl(id)
const url = file.replace(normalizePath(config.root), '')
const result = htmlProxyMap.get(config)!.get(url)?.[index]
if (result) {
return result
} else {
throw new Error(`No matching HTML proxy module found from ${id}`)
}

@bluwy bluwy added feat: css feat: html p4-important Violate documented behavior or significantly improves performance (priority) and removed pending triage labels Jan 8, 2024
@btea btea mentioned this issue Jan 10, 2024
Merged
9 tasks
@jrust
Copy link

jrust commented Jan 10, 2024

I was also having the error and can confirm the linked PR fixed it.

@github-actions github-actions bot locked and limited conversation to collaborators Jan 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
feat: css feat: html p4-important Violate documented behavior or significantly improves performance (priority)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(build): normalize html path btea/vite
4 participants
@jrust @bluwy @movahhedi @chaejunlee