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

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)

3 thoughts on “Changing `scss`/`css` file breaks style on livereload

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

  2. 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 #809 (comment)

  3. 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.