Parcel 2: Bundled CSS is imported at the top of <head> instead of being last #4882

Cristy94 · 2020-07-12T16:15:53Z

🐛 bug report

If you add a <style> tag in the head, the CSS bundle will be imported before everything instead of being added as a last child in <head>.

Previous discussion: #4820

🤔 Expected Behavior

Bundled CSS is always added as last child in <head>.

<head>
	<link rel="stylesheet" href="https://www.example.com/some.css" />
        <style>html,body {background: #e9eaed;}</style> 
        <link rel="stylesheet" href="/bundle.22506e2f.css">
</head>

😯 Current Behavior

Bundled CSS is imported as first child.
The bundled CSS is no longer at the end of the <head> tag, so some.css would overwrite it.

<head><link rel="stylesheet" href="/bundle.22506e2f.css">
	<link rel="stylesheet" href="https://www.example.com/some.css" />
        <style>html,body {background: #e9eaed;}</style>
</head>

💁 Possible Solution

Not sure why this happens, maybe it tries to add the bundle before the inline styles, which might be ok, but it shouldn't add it before all the other nodes in head.

🔦 Context

I can't overwrite library CSS as the bundled stylesheet is imported before those extenral CSS files.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.286

The text was updated successfully, but these errors were encountered:

mischnic · 2020-07-12T16:21:47Z

What do the input HTML/JS file(s) look like?

Cristy94 · 2020-07-12T16:36:50Z

Actually, I think it's just having the index.js imported in the body instead of the head:

index.html:

<html>
<head>
    <link rel="stylesheet" href="https://www.example.com/some.css" />
</head>
<body>
    <h1>Hey</h1>
    <script src="index.js"></script>
</body>
</html>

index.js

import "/styles/test.css";

test.css

body {
    background: red;
}

Output:

<html>
<head><link rel="stylesheet" href="/index.22506e2f.css">
	<link rel="stylesheet" href="https://www.example.com/some.css">
</head>
<body>
    <h1>Hey</h1>
    <script src="/index.2c77b0be.js"></script>
</body>
</html>

Not sure why sometimes the <style> tag triggered this problem, but now it seems that having the JS entry point in body is the problem.

Cristy94 · 2020-07-12T20:00:19Z

Can you confirm that the example above reproduces the issue on your machine?

mischnic · 2020-07-13T08:13:59Z

Yes

Your example

<html>
	<head>
		<link rel="stylesheet" href="https://www.example.com/some.css" />
	</head>
	<body>
		<h1>Hey</h1>
		<script src="index.js"></script>
	</body>
</html>

shoud behave like

<html>
	<head>
		<link rel="stylesheet" href="https://www.example.com/some.css" />
		<script src="index.js"></script>
	</head>
	<body>
		<h1>Hey</h1>
	</body>
</html>

which already correctly inserts the link after the existing one:

<html>
	<head>
		<link rel="stylesheet" href="https://www.example.com/some.css" />
		<link rel="stylesheet" href="/index.2ccae8b1.css" />
		<script src="/index.b1eda6b3.js"></script>
	</head>
	<body>
		<h1>Hey</h1>
	</body>
</html>

Cristy94 · 2020-09-20T22:27:14Z

Any progress on this? The order of CSS imports is really important.

euljr · 2021-06-28T16:52:53Z

I have the same issue and I think I found the reason for this to happen.

parcel/packages/packagers/html/src/HTMLPackager.js

Line 231 in 413a093

return doctypeIndex ? doctypeIndex + 1 : 0;

The function findBundleInsertIndex defaults to the first position when it can't find neither the doctype (which doesn't exists inside the head tag) nor a non-metadata tag.

By changing the line to fallback to the last position should fix the issue, something like:

  return doctypeIndex ? doctypeIndex + 1 : content.length;

What do you think? I can open a PR but I would need help to figure out if this can have a negative impact somewhere else.

Cristy94 · 2021-06-30T10:06:10Z

nor a non-metadata tag

Are you saying that I can somehow force the bundled CSS to be added after a specific tag (before the fix is implemented)?
A fix would be greatly appreciated as I still have the same issue for a year, I can't overwrite material-icons font size in my SASS files.

euljr · 2021-06-30T10:55:03Z

Are you saying that I can somehow force the bundled CSS to be added after a specific tag (before the fix is implemented)?

It's not ideal but, right now if you add a <span></span> inside the <head> in your main html file, the link tag will be inserted before it.

The result will be something like:

<head>
	<link rel="stylesheet" href="https://www.example.com/some.css" />
        <style>html,body {background: #e9eaed;}</style> 
        <link rel="stylesheet" href="/bundle.22506e2f.css"> <!-- HERE -->
        <span></span>
</head>

Edit.: Not just span, but any tag other than base, link, meta, noscript, style, template and title

Cristy94 · 2021-07-02T10:04:11Z

So adding an empty <script> should be both valid and maintain the order. I will test it, thanks!

euljr · 2021-07-02T10:34:58Z

So adding an empty <script> should be both valid and maintain the order.

Absolutely! I didn't notice that the <script> was commented when skimming.

I'll try to open a PR in the next few days, still haven't got the time just yet.

mischnic · 2021-07-02T22:22:42Z

A PR would be great! Here are the related test cases we currently have. I remember adding the last two tests listed here when I added the doctypeIndex-related logic, so duplicating and modifying one of them should work.

parcel/packages/core/integration-tests/test/html.js

Line 221 in 8d50ec6

    
           it('should insert sibling bundles before body element if no HEAD', async function() {

parcel/packages/core/integration-tests/test/html.js

Line 252 in 8d50ec6

it('should insert sibling bundles after doctype if no html', async function() {

parcel/packages/core/integration-tests/test/html.js

Line 318 in 8d50ec6

    
           it('should insert sibling bundles at correct location in tree when optional elements are absent', async function() {

parcel/packages/core/integration-tests/test/html.js

Line 1618 in 8d50ec6

    
           it('inserts sibling bundles into html in the correct order (no head)', async function() {

parcel/packages/core/integration-tests/test/html.js

Line 1673 in 8d50ec6

    
           it('inserts sibling bundles into html in the correct order (head)', async function() {

This avoids issues with Parcel as Parcel places style sheet links always at the top of the head section. See parcel-bundler/parcel#4882 Fixes #11

mischnic added the 🕐 Waiting label Jul 12, 2020

Cristy94 changed the title ~~Parcel 2: Adding an inline <style> tag moves the bundled CSS to the top of <head>~~ Parcel 2: Bundled CSS is imported at the top of <head> instead of being last Jul 12, 2020

This comment has been minimized.

Sign in to view

mischnic added 🐛 Bug 🙏 Help Wanted ✨ Parcel 2 and removed 🕐 Waiting labels Jul 13, 2020

Cristy94 mentioned this issue Jan 14, 2021

JSON file empty when loaded in in 2.0.0-nightly.524 #5623

Closed

mischnic added the CSS label Feb 15, 2021

PSanetra mentioned this issue Mar 1, 2024

Styles of Parcel-bundled apps might be broken codecentric/single-page-application-server#11

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parcel 2: Bundled CSS is imported at the top of <head> instead of being last #4882

Parcel 2: Bundled CSS is imported at the top of <head> instead of being last #4882

Cristy94 commented Jul 12, 2020 •

edited

Loading

mischnic commented Jul 12, 2020

Cristy94 commented Jul 12, 2020 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

Cristy94 commented Jul 12, 2020

mischnic commented Jul 13, 2020

Cristy94 commented Sep 20, 2020

euljr commented Jun 28, 2021

Cristy94 commented Jun 30, 2021 •

edited

Loading

euljr commented Jun 30, 2021 •

edited

Loading

Cristy94 commented Jul 2, 2021

euljr commented Jul 2, 2021

mischnic commented Jul 2, 2021

Parcel 2: Bundled CSS is imported at the top of <head> instead of being last #4882

Parcel 2: Bundled CSS is imported at the top of <head> instead of being last #4882

Comments

Cristy94 commented Jul 12, 2020 • edited Loading

🐛 bug report

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

mischnic commented Jul 12, 2020

Cristy94 commented Jul 12, 2020 • edited Loading

This comment has been minimized.

This comment has been minimized.

Cristy94 commented Jul 12, 2020

mischnic commented Jul 13, 2020

Cristy94 commented Sep 20, 2020

euljr commented Jun 28, 2021

Cristy94 commented Jun 30, 2021 • edited Loading

euljr commented Jun 30, 2021 • edited Loading

Cristy94 commented Jul 2, 2021

euljr commented Jul 2, 2021

mischnic commented Jul 2, 2021

Cristy94 commented Jul 12, 2020 •

edited

Loading

Cristy94 commented Jul 12, 2020 •

edited

Loading

Cristy94 commented Jun 30, 2021 •

edited

Loading

euljr commented Jun 30, 2021 •

edited

Loading