parcel: CSS Module does not work

Currently, you need to install postcss-modules in your app, and add this to your .postcssrc file:

{
  "modules": true
}

This is documented briefly at https://parceljs.org/transforms.html#postcss. It’s necessary to do this because we don’t want to include the classes in the JS bundle by default for people that aren’t using CSS modules.

Perhaps there is a better way we could detect CSS modules so we don’t need to require that configuration (e.g. based on import statements maybe), so open to suggestions there.

Parcel just works… unless you use something basic like CSS, then it requires complex configurations

Hi, I meet @jrop same problem here but seems it is a problem with hot reload. When I start with parcel --no-hmr src/index.html, it works as expected.

Not to undermine the purpose of this issue… I recommend a css-in-js solution instead of a style sheet. I use typestyle but there are others. Just a friendly tip. For most new app development cases.

I am getting the same results as @Jayphen and @thomasfortes, except I am using Stylus.

postcss.config.js

module.exports = {
	modules: true,
}

index.js

import React from 'react'
import {render} from 'react-dom'

import styles from './index.styl'

console.log(styles)

const App = () => <div className={styles.app}>Hello from React!</div>
render(<App />, document.getElementById('root'))

index.styl

.app {
	font-family: sans-serif;
}

When I run parcel src/index.html, the app logs an empty object: {}. However when I produce the production bundle with parcel bundle src/index.html, it loads the styles correctly.

I am using parcle-bundler@1.4.1.

Using the example provided by @micooz (and in my own testing), the styles seem to be removed as soon as the module hot reloads, and are not re-applied even on refresh.

@devongovett

Perhaps there is a better way we could detect CSS modules so we don’t need to require that configuration (e.g. based on import statements maybe), so open to suggestions there.

You could do it the way https://poi.js.org/ does it, *.module.(css|scss|less). That way it’s not an all or nothing approach.

Is there a way to tell the Bundler to disable HMR? Trying to use the fix @azzgo suggested, but I’m using Parcel as middleware with express so that I can proxy API calls.

In the long term, I assume fixing HMR mode so that it respects CSS Modules naming is the fix…

UPDATE:

The API docs for Bundler don’t seem to show it, but it looks like there is an hmr parameter within options that does the trick:

import ParcelBundler from 'parcel-bundler'
import express from 'express'
import proxy from 'http-proxy-middleware'

const parcel = new ParcelBundler('./static/index.html', { hmr: false })
const app = express()

app.use('/api', proxy({ target: 'http://localhost:8000' }))
app.use(parcel.middleware())
app.listen(Number(process.env.UI_PORT || 1234))

Again, this is a temporary fix until HMR with CSS Modules is fixed.

It turned out its caused by less, getting back to v2 from v3 help solved the issue.

Is there a way to tell postcss to only transform “.css” files to css modules and not e.g. “.scss” files? Like an "input": "src/**/*.css" property in the .postcssrc file?

Also, even after installing PostCSS and creating a postcssrc file, my modules didn’t work. I had to find another closed Github issue which told me to clear the .cache directory, and then it worked. Can we clarify the documentation a bit to make that step more explicit?

I’ve noticed that when the --no-hmr flag is set that the css classes are transpiled correctly, and without the flag, the class names are the same as they are in source.

With hot modules: .root WIthout: hot modules ._root_17swk_1

Almost the same as @Jayphen here, global styles are applied when the module hot-reloads, local ones do not, but when I refresh the page they are applied normally.

Managed to succeed thanks to @micooz Guys, css modules in parcel for some reason don’t work without autoprefixer installed and added to .postcssrc

@meiriko Here it is: https://github.com/micooz/react-parcel-example/commit/77d495992645733881156c276b56cd53f50b0187

You may need to upgrade parcel-bundler to v1.0.3 to make it work.