ICSS export not working in CRA 4

[justsolarry]

Describe the bug

Exporting keys like this used to work in CRA 3 (react-scripts : 3.4.4) but when we upgraded to CRA 4 (react-scripts : 4.0.0) it stopped working.

After exporting, you can use it like this:

Did you try recovering your dependencies?

1.22.4

Which terms did you search for in User Guide?

export
ICSS

Environment

Environment Info:

current version of create-react-app: 3.4.1
running from /Users/you-haurliu/.config/yarn/global/node_modules/create-react-app

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 12.16.1 - /usr/local/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Browsers:
Chrome: 87.0.4280.67
Firefox: 82.0
Safari: 14.0
npmPackages:
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
react-scripts: 3.4.4 => 3.4.4
npmGlobalPackages:
create-react-app: 1.5.2

Steps to reproduce

1. Use CRA and create a project
2. install node-sass as a dependency to allow for scss files
3. Create a new file called colors.scssin the src folder
4. Add this block of code inside colors.scss

:export {
  primary: red;
}

5. import this file in app.js with import colors from './colors.scss'
6. Apply the style to any p tag
7. For example

<p style={{color: colors.primary}}>
      This should be red
</p>

8. The text should be red

But if you update react-scripts to 4.0.0 and delete the node modules and yarn lock. Then yarn and start up the server, the text is white and the colors object is empty.

Expected behavior

colors object should contain primary

Actual behavior

colors object is empty

Reproducible demo

Instructions are included in the link
https://github.com/justsolarry/test-cra

[ghoullier]

I confirmed the problem on [email protected] and [email protected]

[ghoullier]

@justsolarry I've create a repository the share my investigations about this problem

TD;LR; the problem seems to come from a regression introduce by css-loader@4.

I will continue my research on this problem, and share here my progression.

[ghoullier]

According to @alexander-akait response webpack-contrib/css-loader#1262 (comment)
There is no current solutions to fix the problem without ejecting your app :(

I will propose soon a PR to support /\.icss\.(scss|sass)$/ pattern natively in create-react-app.

[ghoullier]

There is already a PR opened by @thabemmz to fix this issue.