CSS modules don't seem to work when using bundle:true

[vivianeasley]

Thanks in advance for looking at this! It's been driving me a bit nuts. I'm using css modules as defined in the docs:

import styles from './style.module.css';
<div className={styles.app}>

This works great in DEV and even the build until I set bundle to true. Then all the class names are "undefined undefined" because the object that holds the mapped class name is empty:

Zr={}
H.createElement("div",{className:Zr.app}

Whats weird is that when I change the css file extension to .scss (I'm not actually using SASS) the classnames are in the object but then my compiled CSS file doesn't have the CSS in it. So it's a one or the other scenario. I added some console.logs to the snowpack build code and it looks like it's loading the .css files. Is there some setting not in the docs to handle CSS modules? Am I missing something really obvious? Thanks!!!

[Manish3323]

hi @robertpage, snowpack uses esbuild to bundle files and there is a open issue at esbuild for bundling css modules. so unless esbuild supports bundling of css modules, snowpack wont be able to support it when bundle : true.
evanw/esbuild#20

[vivianeasley]

Ahhh, thanks! That's super helpful! So then I assume the alternative is the Webpack plugin for now?

Also, I'm surprised seeing that when I rename the file to module.scss everything looks correct in the JS file. This is the actual output:

var fc="_app_aapz4_1"
Jr={app:fc,appLogo:cc,appHeader:dc,appLink:pc}
W.createElement("div",{className:Jr.app}

It just doesn't output the bundled .css file... although it does when the module files are named module.css. I assume there is a complicated answer that involves the inner workings of snowpack and how it uses esbuild so no need to respond. Just surprised musing.