Create-react-app: Composing class from another scss css modules results in invalid stylesheet in production

[joshhunt]

Describe the bug

SCSS + CSS Modules problem.

During production build only, Composing from one SCSS + CSS Modules stylesheet into another results in invalid CSS in the final main.hash.chunk.css stylesheet. This problem does not occur when doing a development build.

In the final css file, there are basically two copies of the composed stylesheet, one of which has not been processed by Sass, the the other of which has missing properties (only properties that had sass variables?) . This results in invalid syntax in the file, and invalid styles.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

I've searched to see if there's any caveats with using Sass and CSS Modules together. It did not appear there are any.

Environment

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.15.3 - /usr/local/opt/node@10/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/opt/node@10/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 67.0
    Safari: 12.1.1
  npmPackages:
    react: ^16.9.0 => 16.9.0
    react-dom: ^16.9.0 => 16.9.0
    react-scripts: 3.1.1 => 3.1.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Have App.module.scss, as a stylesheet using Sass features (such as variables for background colour)
2. Have other.module.scss, as a stylesheet, with a class name that composes something from App.module.scss
3. Import both App.module.scss and other.module.scss
4. yarn build

Expected behavior

Styles are fine. It should look like this https://deploy-preview-9--destiny-data-explorer.netlify.com, and the compiled stylesheet should something like this https://gist.github.com/joshhunt/d2efc72f133e448b0c67a93bb1bde36d#file-correctbutnocomposes-css

Actual behavior

Styles are not fine, it looks like this https://deploy-preview-8--destiny-data-explorer.netlify.com and the compiled stylesheet looks something like this https://gist.github.com/joshhunt/d2efc72f133e448b0c67a93bb1bde36d#file-wrong-css

As seen in the linked file, the Sass variables have not been compiled away.

Reproducible demo

I have created a minimal reproduction branch here https://github.com/joshhunt/destinyDataExplorer/tree/cra-repro/bug which has been deployed https://deploy-preview-8--destiny-data-explorer.netlify.com

If I comment out the composes: the issue does away, which you can see deployed here https://deploy-preview-9--destiny-data-explorer.netlify.com

[joshhunt]

We fixed this problem in our main codebase by ejecting it and making this change https://github.com/joshhunt/destinyDataExplorer/commit/a25e3e072a11ac37bca718a1361fa3ecdc47af96 to the webpack config. I don't understand why this fixes it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[joshhunt]

no please don't

[thinkerelwin]

got a similar problems too, may related to #7777

[texas697]

need help with same issue

[HPsunilkumar]

need help with the same

[floroz]

Same issue here:

[saiichihashimoto]

Same issue here!

[saiichihashimoto]

For me, it happened when upgrading from react-scripts 3.0.1 to 3.1.0

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[saiichihashimoto]

Any news on this?

[joshhunt]

I submitted a pull request to fix this issue, but unfortunately it has not been looked at yet https://github.com/facebook/create-react-app/pull/7950 :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.