Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] HMR and PostCSS modules, styles disappear

See original GitHub issue

🐛 bug report

🎛 Configuration

.babelrc

{
	"presets": [
		"react",
		["env", {
			"targets": {
				"browsers": [ "last 2 versions" ]
			},
			"debug": true
		}]
	]
}

.postcssrc.js

module.exports = {
	modules: true,
	plugins: {
		"autoprefixer": {}
	}
};

browserslist

last 2 versions

index.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>React App</title>
	</head>
	<body>
		<div id="app"></div>

		<script src="./index.js"></script>
	</body>
</html>

index.js

require("babel-polyfill");

const styles = require("./app.styl");

console.log("styles???", styles);

const React = require("react");
const ReactDOM = require("react-dom");

const App = () => (
	<div className={ styles.app }>Hello!!</div>
);

ReactDOM.render(<App/>, document.getElementById("app"));

app.styl

.app
	color: blue
	transform: scale(0.95)
	transition: transform 0.4s ease

CLI: ./node_modules/.bin/parcel index.html

🤔 Expected Behavior

Changing app.styl should update styles properly.

😯 Current Behavior

Styles disappear after change to app.styl. index.js (which requires app.styl) is not reloaded when the app.styl file is changed.

💻 Code Sample

Source code: parcel-postcss-modules-bug.tar.gz

🌍 Your Environment

Software	Version(s)
Parcel	1.5.1 and `master` at 6deec80b3491dc5ac690da6550323b51deec6530
Node	9.5.0
npm	5.6.0
Operating System	Linux x86_64

Issue Analytics

State:
Created 6 years ago
Reactions:7
Comments:26 (4 by maintainers)

Top GitHub Comments

31reactions

BipinBhandaricommented, Apr 29, 2018

Finally I was able to solve this issue by adding this on plugins in .postcssrc

    "postcss-modules": {
      "generateScopedName": "[name]_[local]_[hash:base64:5]"
    }

.postcssrc now looks like

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

@aelsv also seems to have suggested this solution. thanks @aelsv

11reactions

joakincommented, Jul 2, 2018

I’ve updated parcel to the latest release on parcel-bundler-test, and now:

Only with modules: true in .postcssrc.js HMR is still broken, but
Adding generateScopedName configuration now fixes it and HMR works. See .postcssrc.js in the fixed-postcss-classnames branch

I am not sure if it is the PostCSS docs that need updating to include configuring generateScopedName or if this is something that should be fixed in the bundler itself being an issue with HMR.

In any case, leaving these comment as reference for others coming by with the same issue.

Top Results From Across the Web

Page styles break when I change styles in Chrome DevTools ...

I'm using Webpack (with Vue-CLI) + HMR. When I try to change styles in the browser in DevTools, then my page itself changes...

style-loader - webpack

Automatically injects styles into the DOM using multiple <style></style> . It is default behaviour. component.js import "./styles.css";. Example ...

@parcel/optimizer-blob-url: Versions | Openbase

Default interop missing when importing a CommonJS module - Details ... when a CSS module is processed by postcss; Fix bundling issue with...

parcel-bundler | Yarn - Package Manager

BUG: postcss module generates wrong hashes Details; Shake exports with pure property assignments Details; Clear scope cache before crawling to fix scope ...

Basic Features: Fast Refresh - Next.js

You can edit anything in that file, including styles, rendering logic, ... The error will disappear automatically, so you won't need to reload...