Parcel: Unable to use CSS Modules example from the website

[alexeyraspopov]

🐛 bug report

Basic example from the website appeared to be not working: CSS Modules can't be used since no class names were exported.

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

No configuration. I installed Parcel using Yarn globally and used parcel index.html.

🤔 Expected Behavior

CSS class name available in JS.

😯 Current Behavior

classes.main from the snippet on the website is undefined.

💻 Code Sample

Files index.html, index.js, main.js, and main.css from https://parceljs.org/.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.6.1
| Node | 8.9.4
| Yarn | 1.3.2
| NVM | 0.27.1
| Operating System | macOS Sierra

[ronami]

Hey @alexeyraspopov, CSS modules are not enabled by default. To use them, you should install postcss-modules in your project by running:

yarn add --dev postcss-modules

Then create a .postcssrc file with the following content:

{
  "modules": true
}

Here is the link to the docs on this: https://parceljs.org/transforms.html#postcss.

[alexeyraspopov]

@ronami, thanks for the clarification. I wonder, is it possible to add a note regarding this to the homepage? It was quite unobvious to me why the example doesn't work. Also, are there any plans for enabling CSS modules by default?

[davidnagli]

@ronami @alexeyraspopov I’m pretty sure that you don’t even have to yarn install in the latest version of Parcel thanks to #306.

You should be able to just add a .postcssrc and it should work :)

[davidnagli]

@alexeyraspopov I don’t think there are any plans to enable postcss modules by default because that would probably get in the way of people who don’t want any postcss in their projects. But it should be pretty simple now that all you have to do is add a .postcssrc

We probably should make the docs more clear, since your not the first person to run into this issue where you don’t realize you need to make a .postcssrc

[raine]

Also wasted 15 minutes trying to figure out why an example on the homepage doesn't work.

[ColrBlnd]

Parcel just works... unless you try to use something as basic as CSS

[HelmZalee]

Seems a little ridiculous that after more than a year, the example still does not work as the page suggests. The least someone could do is place a link to this discussion in that example.

Being a complete newbie to this stuff, I wasted a lot more than 15 minutes trying to figure it out, not least because other elements of this house-of-cards have their own problems. In Mozilla (70.0.1), I can see main.js, but can't see index.html (even looking at Elements). In Chrome (78.0.3904.97), I can see index.html (as '(index)'), and i can see A main.js, but its the WRONG main.js, from a WMTS example I downloaded from openlayers.org, with a very different path, and which I have not looked at for weeks.

If one were to "... just add a .postcssrc and it should work", where would you put that string? In a file? What file? In the command?

[mischnic]

@HelmZalee
Would this change make it clearer? (in this paragraph: https://parceljs.org/css.html#postcss)

PostCSS is a tool for transforming CSS with plugins, like autoprefixer, Preset Env, and CSS Modules. You can configure PostCSS with Parcel by creating a configuration file using one of these namesnames (i.e. in the same folder as your package.json): .postcssrc (JSON), .postcssrc.js, or postcss.config.js.

[HelmZalee]

Thank you for the help, I very much appreciate it!

The material you point to might help, if I had installed Yarn. Instead, I'm using npm, which afaik does more or less the same thing.

So, would it "work" if I replaced yarn add postcss-modules autoprefixer with npm install postcss-modules autoprefixer?

[mischnic]

Yes.

[HelmZalee]

Hurray, that worked, but with a caveat.

The instructions (at https://parceljs.org/css.html#postcss) specify what appears to be a json literal. That was all i put into the postcss.config.js file. It didn't "work", and I guessed correctly why (no xxx =), but I didn't know what xxx was. I found this [https://gist.github.com/benfrain/c5e344affde06537d63d1f3826c9a3a3] which said, in effect, xxx = '
module.exports = '.

I prepended that to the string already in the file, saved, and it (parcel, I guess) immediately rebuilt the server, but the client found an error. Finally, I went back, deleted all the files generated by npm, and started over.

Finally, that worked: It writes two lines to the console:
_main_15534
hollow world

So: there's an editorial "shortcut" at https://parceljs.org/css.html#postcss, probably obvious to everyone already using it: the "module.exports = " is missing. Having never seen any of this, the best I could do was guess something was missing from the LHS, but I could not tell WHAT.

Now there's another problem for another thread: instant rebuild seems to optimistic about what can be rebuilt on the fly. I'm not going to pursue that.

Again, thank you for the help!