Parcel: [email protected] corrupts module styles when CSS files are edited

Created on 23 Nov 2019 · 8Comments · Source: parcel-bundler/parcel

I'm using PostCSS as suggested here with the following .postcssrc configuration:

{
  "modules": true,
  "plugins": {
  }
}

It seems that any time I edit a .css file, Parcel loses all of the styles defined in that module and I need to wipe out the .parcel-cache directory entirely and restart Parcel to fix it.

Bug CSS Preprocessing HMR ✨ Parcel 2

Source

bvaughn

All 8 comments

Doesn't seem to happen with: 🤔

<body>hello</body>
<script type="text/javascript" src="./index.js"></script>

```js
import { Main } from "./index.css";

document.body.className = Main;

```css
.Main {
    color: blue;
    background-color: orange;
    font-size: 200;
}

mischnic on 23 Nov 2019

My apologies. I should have created a smaller repro case. I have done so now:
https://github.com/bvaughn/parcel-alpha-postcss-bug

In this smaller project, the bug dose not trigger _every time_ :frown: If I edit index.css and App.css a couple of times though, the bug _does_ trigger (empty imported styles object), requiring me to remove .parcel-cache. If I am able to come up with a more predictable repro case, I'll update this issue. (Sorry!)

May also be worth pointing out that every time I edit a .css file, I see the following error in the console:

Uncaught SyntaxError: Unexpected token '.'
    at new Function (<anonymous>)
    at hmrApply (HMRRuntime.js:180)
    at HMRRuntime.js:60
    at Array.forEach (<anonymous>)
    at WebSocket.ws.onmessage (HMRRuntime.js:61)

bvaughn on 23 Nov 2019

I think this is a bug in HMR. Seems to be sending CSS assets over the web socket, and then trying to evaluate them as JS. Oops. 😬

devongovett on 24 Nov 2019

The second part yes, V1's parcel-bundler/src/builtins/css-loader.js isn't ported yet.

Still couldn't reproduce the caching issue

mischnic on 24 Nov 2019

Yeah, I think the two issues are separate :grin: Just mentioned the HMR one while I was here since I was also seeing it.

Still not sure how to make the first issue reproducible without just monkeying around a bit :frown: Sorry

bvaughn on 24 Nov 2019

👍1

I have the same issue when changing .module CSS file. I see an error in the console:

Uncaught SyntaxError: Unexpected token '.'
    at new Function (<anonymous>)
    at hmrApply (HMRRuntime.js:180)
    at HMRRuntime.js:60
    at Array.forEach (<anonymous>)
    at WebSocket.ws.onmessage (HMRRuntime.js:61)

And styles does not apply.

KatSick on 28 Feb 2020

👀2

Same problem here too @KatSick.

I am using [email protected] and [email protected] and importing styles.scss in my App.tsx file. When I change content of the .scss file the style is not hot-reloaded and console is greeted with this error:

SyntaxError: unexpected token: '{'
    hmrApply                         HMRRuntime.js:180
    onmessage                        HMRRuntime.js:62
    forEach                          self-hosted:235
    onmessage                        HMRRuntime.js:61
    (Async: EventHandlerNonNull)
    d347dc37b6ca23899ffbbc32fd87b43f HMRRuntime.js:33
    newRequire                       client.55de45e5.js:68
    <anonymous>                      client.55de45e5.js:111
    <anonymous>                      client.55de45e5.js:134

This is content of my styles.scss: