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 file is included multiple times in <head> (when using parcel serve) #9277

Open
cernychristopher opened this issue Sep 27, 2023 · 2 comments
Open

css file is included multiple times in <head> (when using parcel serve) #9277

cernychristopher opened this issue Sep 27, 2023 · 2 comments

Comments

@cernychristopher
Copy link

🐛 bug report

I am facing a problem with serving css for an app built with parcel. The same css file is included multiple times into the <head> of the page.

head

(in this case: FeatureC.2a93835a.css)

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

My setup is as follows: one index.html, react-router that shows either an overview page or one of three ‘subpages’ (=features of my app). Every subpage has its own styles.css file and uses some general purpose components, which also each have their own styles.css file.

The subpages are included via React.lazy so that js/css resources are only loaded when a user actually navigates to the page.

{
  "plugins": [
    "@babel/transform-runtime",
    [
      "module-resolver", {
        "root": ["src"],
        "extensions": [".js", ".ts", ".tsx"]
      }
    ]
  ]
}

parcel serve ./src/index.html --no-cache --dist-dir ./dist

😯 Current Behavior

When building the app, the css-styles for the ‘general purpose’ components and for one feature/subpage are placed in the same css file (can be seen in the sample repo below). This means when I navigate between different subpages:

  • The css styles for the first subpage, which also includes the common styles has to be loaded (going to featureA requires us to load the css styles for featureC). Not pretty, but I can live with that.
    • the order of declaration of the components in my main source file (App.tsx) is relevant: most css is included in along the subpage that is listed as first component in App.tsx. If I change the order and put another component first, that one now gets a larger css file with unrelated styles in it.
  • The file that contains the common styles is inserted into the head whenever I visit a feature for the first time. So if I visit three features/subpages, the same file is loaded three times.
  • The look of my components changes, because later loaded ‘common styles’ now take precedence over earlier included styles that were specific for just one subpage/feature.

🤔 Expected Behavior

Ideally, the css for my shared components (that are used on several pages) would be bundled into a separate 'index.css' file on top level, or their own 'MyComponent.css' file - rather than into the css file for some random subpage.

Another thing that would solve the issue for me would be a way to disable cache busting (appending a timestamp in the request to a resource) in serve mode. If I didn’t have that, the splitting of css would still be weird, but at least the colors would not change mid-navigation.

💁 Possible Solution

🔦 Context

I'm updating a much larger application from parcel1 to parcel2. For a production build everything looks ok, but for the dev setup with HMR, the app layout breaks after a few clicks because of css files being loaded multiple times.

💻 Code Sample

https://github.com/cernychristopher/parcel2cssoverwrite/tree/main#the-issue

The README.md file gives instructions on how to run it and reproduce my issue, also with more screenshots and detailed analysis which classes are assigned to which component.

🌍 Your Environment

Software Version(s)
Parcel 2.9.3
Node 16.14.2
npm/Yarn 8.5.0
Operating System MacOS 12.3.1
@cernychristopher cernychristopher changed the title css file is included multiple times in <head> css file is included multiple times in <head> (when using parcel serve) Sep 27, 2023
@foxt
Copy link

foxt commented Nov 2, 2023

doesn't seem to be specific to parcel serve. using parcel to output to a folder, and getting this mess after clicking through the app
image

@SrBrahma
Copy link

Up. Any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cernychristopher @foxt @SrBrahma