postcss-modules-values variables isn't working in a non-module css/scss files

[ssengalanto]

Desribe the bug

postcss-modules-values variables aren't working on non-module CSS/SCSS files

Did you try recovering your dependencies?

Yes, I already tried using css/scss files to know which one works but no luck, variables isn't working on non-module css/scss files

Which terms did you search for in User Guide?

Can't find any solutions, "postcss-modules-values variables isn't working on non-module/ regular css/scss files"

Environment

System:
OS: Windows 10
CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
Binaries:
Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.17763.1.0
Internet Explorer: 11.0.17763.1
npmPackages:
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-scripts: 3.0.1 => 3.0.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. I'm using postcss-modules-values library for creating variables for my css-modules
2. variables isn't working on a regular / non-modules css/scss files, I could use css variables but I don't want to refactor my codes because I'm already using postcss-modules-values, in my previous project i'm using gatsby and it works fine even with non-module css/scss files
3. it works without an error but the variable values aren't there,
4. as much as possible I don't like to eject my project, It'll be my last resort if ever.

Expected behavior

I expect that the variables created from postcss-modules-values are available with module and non-module css/scss files. Because it behave exactly like this in my gatsby-project.

Actual behavior

Nothing went wrong it works without an error, but If I import my variables to a non-module css/scss files the variable value isn't read or simply the variables isn't working.

Reproducible demo

the bug is understandable even without a bug demo, maybe it's a web pack config issue, I just want you to know that it behaves differently in create-react-app. it works perfectly in other setups like gatsby.

[dudekaa]

Hi

reproduced your issue in our setup.

To workaround, you have to eject configs and put implicit module require for postcss-modules-values among postcss loader options.

Hope it helps

[ssengalanto]

thanks, I really appreciate your help :)

[esvyridov]

@mrmckeb In order to fix that issue I can add require('postcss-modules-values') to postcss-loader to enable CSS Modules values feature for non *.module.css files.

Note: CRA already has postcss-modules-values as a dependency of css-loader

[Rovack]

This is a regression in CRA 3.0.0. Downgrading to any 2.x.x version seems to work (I'm using 2.1.8).