Parcel: Changing `scss`/`css` file breaks style on livereload

[wesleycoder]

Choose one: is this a 🐛 bug report or 🙋 feature request?
🐛 bug report

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

The project I'm working is available here, you can checkout and reproduce the issue on it.

.babelrc:

{
  "presets": ["env", "preact"],
  "plugins": [
    "transform-function-bind",
    ["transform-react-jsx", { "pragma": "h" }],
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "@app": "./src"
      }
    }],
    "transform-object-rest-spread"
  ]
}

.postcssrc:

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

🤔 Expected Behavior

Changing a scss file with css modules enabled that is "named-imported" (import s from './style.scss') in js and used in className by preact/react/etc should update the js that requires it providing the new className variable to it, without needing a manual full page reload.

😯 Current Behavior

Changing the scss updates the stylesheet causing the network fetch for the new asset but not for the js file, so all styles changed breaks on the page since the old classes doesn't exist anymore, to see the changes a manual full page reload is needed.

💁 Possible Solution

I really don't have a clue about this... Sorry...

🔦 Context

For example going into src/home/home.scss and changing .Title color will reproduce the bug (as of commit 451f3a2)

💻 Code Sample

You can see the open sourced project here (https://github.com/wescoder/tavern)

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | ^1.4.1 |
| Node | v9.2.0 |
| npm/Yarn | 1.3.2
| Operating System | Linux Deepin 15.5 (Ubuntu based) |

[urfolomeus]

I have pretty much the same problem using CSS Modules but without SCSS. I figured it would be better to add to this thread than create a new one.

You can see my example project and the steps to replicate here.

| Software | Version(s) |
|---|---|
| Parcel | 1.4.1 |
| Node | 8.8.0 |
| Yarn | 1.3.2 |
| OS | OS X 10.13.2 |

[dmsvlks]

Same problem for me when using CSS modules with HMR. This is the only thing that keeps me from using parcel for new projects.

[BipinBhandari]

I was able to get fix this by setting this on .postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-modules": {
      "generateScopedName": "[name]_[local]_[hash:base64:5]"
    }
  }
}

from https://github.com/parcel-bundler/parcel/issues/809#issuecomment-385250361

[DeMoorJasper]

So this appears to be a misconfiguration can this be closed?

[wesleycoder]

Before closing it we should update the documentation to explain the behavior.
Users should be aware of the need for this specific configuration.
And this would need to be further tested and confirmed.

[BipinBhandari]

Please check if this is the best way to to solve this problem. And we should also update the documentation.

[github-actions[bot]]

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.