parcel icon indicating copy to clipboard operation
parcel copied to clipboard

Published 20 hours ago • verified publisher icon parcel-bundler

HMR is not working for inlined css (`@import`ed from `style` tag)

Open baoshan opened this issue 2 years ago • 5 comments

🐛 bug report

HMR is not working for inlined CSS (@imported from style tag).

💻 Code Sample

index.html

<!DOCTYPE html>
<html>
<head>
    <style>@import './index.css';</style>
</head>
<body>
</body>
</html>

index.css

body {
    background-color: beige;
}

🎛 CLI Command

parcel index.html

🤔 Expected Behavior

Stylesheet reloaded when @imported css is saved.

😯 Current Behavior

HMR is not triggered when @imported css is saved.

🌍 Your Environment

Software Version(s)
Parcel 2.7.0
Node v18.5.0
npm 8.12.1
Operating System macOS 12.5.1

baoshan avatar Aug 20 '22 03:08 baoshan

If someone wants to look into this, I would expect changedAssets to include both the CSS and HTML file here: https://github.com/parcel-bundler/parcel/blob/cbc84b0c1d538b0ec15a3bf01f95da3ed623ebbb/packages/reporters/dev-server/src/HMRServer.js#L160

Then, in the runtime, this check should fail and result in a page reload because one of the assets is not a CSS or JS file. https://github.com/parcel-bundler/parcel/blob/cbc84b0c1d538b0ec15a3bf01f95da3ed623ebbb/packages/runtimes/hmr/src/loaders/hmr-runtime.js#L136-L142

Looking into why this isn't the case would go a long way to figuring out what's going on here!

devongovett avatar Aug 23 '22 03:08 devongovett

I would like to take a look at this.

niftytyro avatar Aug 27 '22 14:08 niftytyro

One thing I've noticed is when I use /path/to/monorepo/packages/core/parcel/src/bin.js src/index.html to start my server, HMR doesn't work at all, tried updating the html file while the server was running. And the same does work when using yarn parcel src/index.html.

Am I missing something?

UPDATE: It does work with the js file.

niftytyro avatar Aug 27 '22 15:08 niftytyro

Okay now after some deep dive, here's what I have found:

When adding @import "./index.css"; and saving the html file, as you suggested @devongovett, changedAssets does contain both html and css. And as a matter of fact, HMR actually works in that case.

Here's when it doesn't work: updating the already @imported css file because changedAssets now only contains the css file and not html, so hmrAcceptCheck returns true.

HMR is not triggered when @imported css is saved.

@baoshan Can you confirm when you say this ^, which one of these do you mean:

  • the css file is saved?
  • or the html file with the @import directive is saved?

niftytyro avatar Aug 27 '22 18:08 niftytyro

HMR is not triggered when @imported css is saved.

I think I expressed it clearly: saving the css file does not trigger an expected HMR

baoshan avatar Aug 28 '22 04:08 baoshan

Just ran into this. Just to make sure it's clear:

<link rel="stylesheet" href="./styles.css"> // HMR works with this
<style>
  @import "./styles.css"; // HMR does not work with this
</style>

rienheuver avatar Jan 12 '23 19:01 rienheuver

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

github-actions[bot] avatar Jul 12 '23 00:07 github-actions[bot]