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

Created on 12 Jul 2020 · 7Comments · Source: parcel-bundler/parcel

🐛 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: https://github.com/parcel-bundler/parcel/discussions/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

Bug Help Wanted ✨ Parcel 2

Source

Cristy94

All 7 comments

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

mischnic on 12 Jul 2020

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 on 12 Jul 2020

Offtopic:

Not related, but as a side note, even with this simple example, after moving the entry point from <head> to <body> parcel kept crashing with this error until I cleared the cache:

Error: Got unexpected null
    at nullthrows (C:\wamp64\www\test-parcel\node_modules\nullthrows\nullthrows.js:7:15)
    at Asset.get publicId [as publicId] (C:\wamp64\www\test-parcel\node_modules\@parcel\core\lib\public\Asset.js:202:36)
    at C:\wamp64\www\test-parcel\node_modules\@parcel\reporter-dev-server\lib\HMRServer.js:102:19
    at Array.map (<anonymous>)
    at HMRServer.emitUpdate (C:\wamp64\www\test-parcel\node_modules\@parcel\reporter-dev-server\lib\HMRServer.js:83:50)
    at Object.report (C:\wamp64\www\test-parcel\node_modules\@parcel\reporter-dev-server\lib\ServerReporter.js:125:21)
    at ReporterRunner.report (C:\wamp64\www\test-parcel\node_modules\@parcel\core\lib\ReporterRunner.js:73:31)
    at async Parcel.build (C:\wamp64\www\test-parcel\node_modules\@parcel\core\lib\Parcel.js:383:7)
    at async Parcel.startNextBuild (C:\wamp64\www\test-parcel\node_modules\@parcel\core\lib\Parcel.js:272:21)
    at async PromiseQueue._runFn (C:\wamp64\www\test-parcel\node_modules\@parcel\utils\lib\PromiseQueue.js:98:7) {
  framesToPop: 1
}

This can always be reproduced in a few seconds: just move a few times the <script> from body to <head> and maybe also update the index.js once or twice. This also happens in the latest nightly version (333).

LE: Oh, actually the reproduction is easy:

Run parcel.
Remove the entry point (script tag), save file.
Undo (add back the entry point), save file.

Parcel now keeps crashing until cache is cleared.

Cristy94 on 12 Jul 2020

Parcel now keeps crashing until cache is cleared.

Yes, already fixed. Wait for the next nightly

mischnic on 12 Jul 2020

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

Cristy94 on 12 Jul 2020

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>

mischnic on 13 Jul 2020

👍1

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

Cristy94 on 21 Sep 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings