fix(loader): Correctly preserve CSS module locals

[Jessidhia]

The handling was there, but the property it tried to access was being clobbered by the .map's result.

[sokra]

Thanks

[sylver]

Same issue, the finale css file is populated with classes, as expected, but my class attributes are empty everywhere I use one of these classes. This isn't fixed.

I went back to use [email protected] which works as expected.

[alexander-akait]

@Onelin @Sylv3r can you create minimum reproducible test repo? Also please create new issue. Thanks!

[sylver]

@evilebottnawi @Onelin I actually found the solution while trying to prepare the MRE..

One needs to switch between style-loader and MiniCssExtractPlugin.loader as the first loader used by the rule depending on the env (ie. development for HMR or production for dist builds) since this plugin is not HMR ready, yet.

Short example (without loaders options) :

{
  test: /\.s?[ac]ss$/,
  use: [
    NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader',
  ],
}

I think this should be explained in the docs since this is a bit tricky.

[alexander-akait]

@Sylv3r Can you do PR?

[sylver]

Sure, have a look at #101 @evilebottnawi

[Onelin]

I solved my problem by using the MiniCssExtractPlugin in the use:[], but not using the 'style-loader' in front of it, causing a conflict. Tks