Parcel inserts bundled CSS immediately after <head>, so it is overwritten by other components. #4820

Cristy94 · 2020-06-30T00:24:04Z

Cristy94
Jun 30, 2020

I am using "parcel": "^2.0.0-nightly.318", and the bundled CSS is imported immediately after <head>, but I need it to be imported last so that my CSS should overwrite all other global CSS included.

Was this changed recently?
Why does it import at the top of <head> instead of just before </head>?

Cristy94 · 2020-06-30T22:19:54Z

Cristy94
Jun 30, 2020
Author

Any suggestions on how I can make the bundled CSS be added later in the <head> tag, not as first child?

0 replies

mischnic · 2020-07-06T08:37:23Z

mischnic
Jul 6, 2020
Collaborator

Could you give an example?

0 replies

Cristy94 · 2020-07-06T18:21:35Z

Cristy94
Jul 6, 2020
Author

Sure,

So my index.html looks like this before build:

...
<head>
<link rel="stylesheet" href="www.example.com/some.css" />
</head>
...

And after build it looks like this:

...
<head>
<link rel="stylesheet" href="/bundle.css" />
<link rel="stylesheet" href="www.example.com/some.css" />
</head>
...

But I want it to look like this:

...
<head>
<link rel="stylesheet" href="www.example.com/some.css" />
<link rel="stylesheet" href="/bundle.css" /> <!-- THIS SHOULD BE LAST, SO IT OVERWRITES OTHER RULES -->
</head>
...

The main issue is that I use MaterialUI in my project and I need to have this order:

material-icons.css
MUI inline injected CSS
bundle.css

I can currently do this, but it's not what I want:

MUI inline injected CSS (I inject this as the first child of )
bundle.css (this was automatically added at the top)
material-icons.css (problem is that this now overwrites MaterialUI font sizes for icons and also whatever I write in my CSS bundle).

So, how can I make sure that the parcel bundle.css will be included after the other stylesheets imported in index.html?

0 replies

Cristy94 · 2020-07-10T14:59:52Z

Cristy94
Jul 10, 2020
Author

@mischnic Any suggestions? 🙏

0 replies

mischnic · 2020-07-10T15:50:14Z

mischnic
Jul 10, 2020
Collaborator

So with

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

body {
	color: red;
}

import "./index.css";

I get:

<head>
	<link rel="stylesheet" href="https://www.example.com/some.css" />
	<link rel="stylesheet" href="/index.2c4451d2.css" />
	<script src="/index.f81b525c.js"></script>
</head>

0 replies

Cristy94 · 2020-07-12T15:58:09Z

Cristy94
Jul 12, 2020
Author

1 reply

Cristy94 Jul 12, 2020
Author

Also the script generated is added at the end of the </body> tag, not inside <head>. Oh, that is because I have <script src="./index.tsx"></script> after the <div id="app"></div>. But still can't explain the CSS at the top.

Cristy94 · 2020-07-12T16:07:25Z

Cristy94
Jul 12, 2020
Author

I found the issue! Whenever you add an inline style in the head, the CSS is imported at the top:

Try this:

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

The output now looks like:


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

Any idea why simply adding a <style> tag makes the bundled CSS to be placed at the top? It doesn't even add a new line before it anymore (looks bugged?).

0 replies

Cristy94 · 2020-07-12T16:16:08Z

Cristy94
Jul 12, 2020
Author

Created an issue for this: #4882

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parcel inserts bundled CSS immediately after <head>, so it is overwritten by other components. #4820

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Parcel inserts bundled CSS immediately after <head>, so it is overwritten by other components. #4820

Cristy94 Jun 30, 2020

Replies: 8 comments · 1 reply

Cristy94 Jun 30, 2020 Author

mischnic Jul 6, 2020 Collaborator

Cristy94 Jul 6, 2020 Author

Cristy94 Jul 10, 2020 Author

mischnic Jul 10, 2020 Collaborator

Cristy94 Jul 12, 2020 Author

Cristy94 Jul 12, 2020 Author

Cristy94 Jul 12, 2020 Author

Cristy94 Jul 12, 2020 Author

Cristy94
Jun 30, 2020

Replies: 8 comments 1 reply

Cristy94
Jun 30, 2020
Author

mischnic
Jul 6, 2020
Collaborator

Cristy94
Jul 6, 2020
Author

Cristy94
Jul 10, 2020
Author

mischnic
Jul 10, 2020
Collaborator

Cristy94
Jul 12, 2020
Author

Cristy94 Jul 12, 2020
Author

Cristy94
Jul 12, 2020
Author

Cristy94
Jul 12, 2020
Author