Regression from css-loader@4 on exported variables behavior

[ghoullier]

• Operating System: 'Darwin Kernel Version 20.3.0: Thu Jan 21 00:07:06 PST 2021; root:xnu-7195.81.3~1/RELEASE_X86_64'
• Node Version: 12.16.0
• NPM Version: 6.13.4
• webpack Version: 5.21.2
• css-loader Version: >=4.0

Expected Behavior

Before css-loader@4 exported variables with the block :export {} could be imported in a JavaScript file.
The imported variables in the JavaScript land contains all exported variables in the scss file.

I've detect this problem with a migration from react-scripts@3 to react-scripts@4. After some investigations the problem seems coming from css-loader and not sass-loader itself.

A related issue in the create-react-app repository.

Actual Behavior

From css-loader@4 the imported variables is empty.

Code

webpack.config.js

$white: '#FFF';

:export {
  white: $white
}

import colors from './colors.scss';

// expected 1 but got 0
console.assert(Object.keys(colors).length === 0; 

document.body.innerHTML = JSON.stringify(colors);

How Do We Reproduce?

I've created a repository with the minimal setup to reproduce the problem.

[alexander-akait]

Fixed in v5, icss disable by default for v4, because you are using CRA you can't change options, but we have the modules.auto and module.compileType options, these options enable module or icss output based on filename, so update css-loader to v5 and rename colors.scss to colors.icss.scss, I will update docs about the modules.auto option

[alexander-akait]

Anyway if you found how you can change the compileType options to the icss value, all will work fine

[ghoullier]

Thanks for your explanation.