Font path in inline style tag

[kevinresol]

🐛 bug report

When font-face is defined in inline <style> tag inside the html file, the bundled path is incorrect.

Consider the following source:

<link rel="stylesheet" type="text/css" href="/css/foo.css">
	
<style>
	@font-face {
		font-family: 'Bar';
		src: url(/css/bar.woff2);
	}
</style>

🎛 Configuration (.babelrc, package.json, cli command)

N/A

😯 Current Behavior

Bundled:

<link rel="stylesheet" type="text/css" href="/index.38f67c4d.css">
	
<style>
	@font-face {
		font-family: 'Bar';
		src: url(bar.4da7d43b.woff2);
	}
</style>

If the html is accessed via /index.html it will work fine.

If the html is accessed via /deeper/path (e.g. in SPA), the font file will fail to load because it resolves to /deeper/bar.4da7d43b.woff2 while the actual path is /bar.4da7d43b.woff2. However note that the css file will load fine because it is specified to load from root.

🤔 Expected Behavior

The font url should be absolute.

💁 Possible Solution

Current workaround is to move the font-face definition into a .css file and reference that css in the html.

🔦 Context

N/A

💻 Code Sample

See above.

🌍 Your Environment

Software	Version(s)
Parcel	2.0.1
Node	14.18.1
npm/Yarn	yarn 1.22.17
Operating System	macos 12.0.1

[devongovett]

This is a good point. Normally, urls in CSS are relative to the file they are contained within, but when inlined into an HTML file that could potentially change. We should make these absolute instead.

[SetTrend]

I observe the same problem here and at the same time the opposite:

A relative path in my source (shown on the left) has been changed to an absolute path (shown on the right), making it inaccessible:

Source

<script src="./show_content.ts"></script>

Transpiled

<script src="/test.e86b5fc5.js"></script>