CSS Modules don't work (still/again?)

Hey there, I hate to bring this up since it seems like there was a whole saga of CSS Modules not working for almost a year at #601, but… CSS Modules don’t seem to work. Things are fine in development, but when creating a build, classnames aren’t getting generated.

Steps to Reproduce the problem

I’ve uploaded a repro project here. It starts from the basic template and adds as little code as possible – just adding the plugin and slightly amending App.js to import the classname and use it. I’ve also added a background color to the rule in question to make the problem more obvious.

Here’s what I did via CLI to make this happen:

$ npx react-static create --name=basic-repro
npx: installed 1258 in 73.608s

? Select a template below... basic
=> Creating new react-static project...

Using React Static template: basic
=> Installing dependencies with: Yarn...

=> [✓] Project "basic-repro" created (10.6s)

  => To get started:

    cd "basic-repro" 

    yarn start - Start the development server
    yarn build - Build for production
    yarn serve - Test a production build locally
  
$ cd basic-repro/
$ yarn add react-static-plugin-css-modules
yarn add v1.13.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ react-static-plugin-css-modules@6.3.0
info All dependencies
└─ react-static-plugin-css-modules@6.3.0
Done in 6.12s.
$ yarn start

So far so good. Let’s make a build:

$ yarn build
yarn run v1.13.0
$ react-static build

=> Info: No 'siteRoot' is defined in 'static.config.js'. This is suggested for absolute urls and a sitemap.xml to be automatically generated.

=> Cleaning dist...
=> [✓] Dist cleaned (0.8s)
=> Building Routes...
=> [✓] Routes Built (0.3s)
=> Building Templates
=> [✓] Templates Built
=> Copying public directory...
=> [✓] Public directory copied
=> Bundling App...
Version: webpack 4.28.1
Time: 5201ms
Built at: 01/21/2019 10:59:41 PM
                                        Asset       Size  Chunks             Chunk Names
                             main.4d8f0b1d.js   5.16 KiB       0  [emitted]  main
                         main.4d8f0b1d.js.map   17.9 KiB       0  [emitted]  main
                          styles.a0d6e5b9.css  381 bytes       6  [emitted]  styles
    templates/src-containers-Post.00df4394.js  444 bytes       1  [emitted]  src-containers-Post
templates/src-containers-Post.00df4394.js.map   1.07 KiB       1  [emitted]  src-containers-Post
          templates/src-pages-404.8e8e99dc.js  306 bytes       2  [emitted]  src-pages-404
      templates/src-pages-404.8e8e99dc.js.map  597 bytes       2  [emitted]  src-pages-404
        templates/src-pages-about.5f967393.js  325 bytes       3  [emitted]  src-pages-about
    templates/src-pages-about.5f967393.js.map  617 bytes       3  [emitted]  src-pages-about
         templates/src-pages-blog.012dea97.js  537 bytes       4  [emitted]  src-pages-blog
     templates/src-pages-blog.012dea97.js.map   1.28 KiB       4  [emitted]  src-pages-blog
        templates/src-pages-index.a4109f0d.js  343 bytes       5  [emitted]  src-pages-index
    templates/src-pages-index.a4109f0d.js.map  792 bytes       5  [emitted]  src-pages-index
                 templates/styles.a0d6e5b9.js  170 bytes       6  [emitted]  styles
             templates/styles.a0d6e5b9.js.map  343 bytes       6  [emitted]  styles
           templates/vendors~main.aeb98042.js    264 KiB       7  [emitted]  vendors~main
       templates/vendors~main.aeb98042.js.map    900 KiB       7  [emitted]  vendors~main
  [0] basic-repro/node_modules/react/index.js 189 bytes {7} [built]
  [1] basic-repro/node_modules/react-hot-loader/index.js 676 bytes {7} [built]
  [2] basic-repro/node_modules/@babel/runtime/helpers/typeof.js 817 bytes {7} [built]
  [3] (webpack)/buildin/module.js 552 bytes {7} [built]
  [5] basic-repro/node_modules/path-browserify/index.js 6.02 KiB {7} [built]
  [6] basic-repro/node_modules/babel-plugin-universal-import/universalImport.js 888 bytes {7} [built]
  [8] ../lib/browser/index.js 25.8 KiB {7} [built]
 [15] ../lib/browser/components/StaticInfo.js 3.02 KiB {7} [built]
 [25]basic-repro/dist/react-static-browser-plugins.js 234 bytes {0} [built]
 [33]basic-repro/dist/react-static-templates.js 3.16 KiB {0} [built]
 [47] multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js 52 bytes {0} [built]
 [48] ../lib/bootstrapPlugins.js 942 bytes {7} [built]
 [75] ../lib/bootstrapTemplates.js 966 bytes {7} [built]
 [82] ../lib/bootstrapApp.js 1.98 KiB {7} [built]
[106] basic-repro/src/index.js + 1 modules 1.03 KiB {0} [built]
      | basic-repro/src/index.js 581 bytes [built]
      | basic-repro/src/App.js 447 bytes [built]
    + 93 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  templates/vendors~main.aeb98042.js (264 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (269 KiB)
      styles.a0d6e5b9.css
      templates/styles.a0d6e5b9.js
      templates/vendors~main.aeb98042.js
      main.4d8f0b1d.js

Child extract-css-chunks-webpack-plugin ../../css-loader/dist/cjs.js??ref--4-oneOf-0-1!../../../src/app.css:
    [0] basic-repro/node_modules/css-loader/dist/cjs.js??ref--4-oneOf-0-1!/home/s/Code/basic-repro/src/app.css 737 bytes {0} [built]
    [1] basic-repro/node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]

=> There were WARNINGS during the prod build stage. Your site will still function, but you may achieve better performance by addressing the warnings above.

=> [✓] App Bundled (6s)
=> Fetching Site Data...
=> [✓] Site Data Downloaded
=> Fetching Route Data...
=> [========================================================================================================] 104/104 100% 10400/s 0.0s 
=> [✓] Route Data Downloaded (0.1s)
=> Exporting HTML across 4 threads...
=> [========================================================================================================] 104/104 100% 398/s 0.0s 
=> [✓] HTML Exported (4.1s)
Done in 13.74s.

Not sure why I’m getting warnings out of the gate with a very slightly modified basic template using an official plugin exactly as recommended, but okay. Let’s take a look:

$ yarn serve

This seems obviously and immediately wrong. Any ideas?

Environment

1. react-static -V: 6.3.3
2. node -v: v11.6.0
3. npm -v: 6.5.0-next.0
4. Operating system: Ubuntu 16.04
5. Browser and version (if relevant): Chrome/FF

[lostfictions]

@ScriptedAlchemy thanks for the reply! i thought you meant there’s a beta for react-static under next at first, but it seems to just be a beta for 6.0.0?

i’m starting a new project and will probably just opt for a different generator, unfortunately – react-static’s had too many bugs and oddities for me since i started trying to use the new version 😦

[ScriptedAlchemy]

@lostfictions thanks for tagging me. Indeed I’m the guy for CSS stuff (i own the underlaying plugin, we are merging with webpack mini css)

Can you send me a repo? So i can tinker.

Alternatively, because of the mini-css merge, you can use mini-css-extract in production if it helps. Ill fix extract css chunks for you in prod builds, builds either way. If you can give me a demo repo then ill track down the problem