Repository navigation
Composing class from another scss css modules results in invalid stylesheet in production #7596
Description
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
- Have
App.module.scss, as a stylesheet using Sass features (such as variables for background colour) - Have
other.module.scss, as a stylesheet, with a class name that composes something fromApp.module.scss - Import both
App.module.scssandother.module.scss 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
Activity
joshhunt commentedon Aug 26, 2019
We fixed this problem in our main codebase by ejecting it and making this change joshhunt/destinyDataExplorer@a25e3e0 to the webpack config. I don't understand why this fixes it.
stale commentedon Sep 25, 2019
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 commentedon Sep 25, 2019
no please don't
thinkerelwin commentedon Oct 5, 2019
got a similar problems too, may related to #7777
texas697 commentedon Oct 15, 2019
need help with same issue
HPsunilkumar commentedon Oct 31, 2019
need help with the same
floroz commentedon Nov 1, 2019
Same issue here:
saiichihashimoto commentedon Nov 7, 2019
Same issue here!
saiichihashimoto commentedon Nov 7, 2019
For me, it happened when upgrading from react-scripts 3.0.1 to 3.1.0
test(build): test for css modules composing scss module also being im…
fix(build): backing react-scripts to v3.0.1
stale commentedon Dec 7, 2019
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 commentedon Dec 8, 2019
Any news on this?
joshhunt commentedon Dec 9, 2019
I submitted a pull request to fix this issue, but unfortunately it has not been looked at yet #7950 :)
stale commentedon Jan 8, 2020
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 commentedon Jan 13, 2020
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.