feat: exportOnlyLocals option (#824)

BREAKING CHANGE: `css-loader/locals` was dropped in favor `exportOnlyLocals` option

Author: evilebottnawi

README.md

@@ -102,6 +102,7 @@ It's useful when you, for instance, need to post process the CSS as a string.
 |**[`sourceMap`](#sourcemap)**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
 |**[`camelCase`](#camelcase)**|`{Boolean\|String}`|`false`|Export Classnames in CamelCase|
 |**[`importLoaders`](#importloaders)**|`{Number}`|`0`|Number of loaders applied before CSS loader|
+|**[`exportOnlyLocals`](#exportonlylocals)**|`{Boolean}`|`false`|Export only locals|
 
 ### `url`
 
@@ -277,8 +278,6 @@ You can also specify the absolute path to your custom `getLocalIdent` function t
 }
 ```
 
-> ℹ️ For prerendering with extract-text-webpack-plugin you should use `css-loader/locals` instead of `style-loader!css-loader` **in the prerendering bundle**. It doesn't embed CSS but only exports the identifier mappings.
-
 ### `sourceMap`
 
 To include source maps set the `sourceMap` option.
@@ -352,6 +351,22 @@ The query parameter `importLoaders` allows you to configure how many loaders bef
 
 This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
 
+### `exportOnlyLocals`
+
+Export only locals (**useful** when you use **css modules**).
+For pre-rendering with `mini-css-extract-plugin` you should use this option instead of `style-loader!css-loader` **in the pre-rendering bundle**. 
+It doesn't embed CSS but only exports the identifier mappings.
+
+**webpack.config.js**
+```js
+{
+  loader: 'css-loader',
+  options: {
+    exportOnlyLocals: true
+  }
+}
+```
+
 <h2 align="center">Examples</h2>
 
 ### Assets

lib/loader.js

@@ -47,11 +47,30 @@ module.exports = function loader(content, map) {
         return callback(err);
       }
 
-      let cssAsString = JSON.stringify(result.source);
-
       // for importing CSS
       const importUrlPrefix = getImportPrefix(this, options);
 
+      let exportJs = compileExports(
+        result,
+        placeholderImportItemReplacer(
+          this,
+          result,
+          importUrlPrefix,
+          options.exportOnlyLocals
+        ),
+        options.camelCase
+      );
+
+      if (options.exportOnlyLocals) {
+        if (exportJs) {
+          exportJs = `module.exports = ${exportJs};`;
+        }
+
+        return callback(null, exportJs);
+      }
+
+      let cssAsString = JSON.stringify(result.source);
+
       const alreadyImported = {};
       const importJs = result.importItems
         .filter((imp) => {
@@ -127,11 +146,6 @@ module.exports = function loader(content, map) {
         });
       }
 
-      let exportJs = compileExports(
-        result,
-        placeholderImportItemReplacer(this, result, importUrlPrefix),
-        options.camelCase
-      );
       if (exportJs) {
         exportJs = `exports.locals = ${exportJs};`;
       }

lib/localsLoader.js

@@ -85,9 +85,7 @@ const moduleConfig = (config) => {
             test: (config.loader && config.loader.test) || /\.css$/,
             use: [
               {
-                loader: config.localsLoader
-                  ? path.resolve(__dirname, '../locals.js')
-                  : path.resolve(__dirname, '../index.js'),
+                loader: path.resolve(__dirname, '../index.js'),
                 options: (config.loader && config.loader.options) || {},
               },
             ].concat(

locals.js

@@ -6,18 +6,21 @@ const { webpack, evaluated } = require('./helpers');
 const testCasesPath = path.join(__dirname, 'fixtures/modules/tests-cases');
 const testCases = fs.readdirSync(testCasesPath);
 
-describe('modules option', () => {
-  [false, true].forEach((isLocalsLoader) => {
+describe('modules', () => {
+  [false, true].forEach((exportOnlyLocalsValue) => {
     [false, true].forEach((modulesValue) => {
       testCases.forEach((name) => {
-        it(`case name \`${name}\`: (use \`${
-          isLocalsLoader ? 'localsLoader.js' : 'loader.js'
-        }\`) (\`modules\` option is ${modulesValue})`, async () => {
+        it(`case \`${name}\`: (export \`${
+          exportOnlyLocalsValue ? 'only locals' : 'all'
+        }\`) (\`modules\` value is \`${modulesValue})\``, async () => {
           const config = {
             loader: {
-              options: { modules: modulesValue, localIdentName: '_[local]' },
+              options: {
+                modules: modulesValue,
+                exportOnlyLocals: exportOnlyLocalsValue,
+                localIdentName: '_[local]',
+              },
             },
-            localsLoader: isLocalsLoader,
           };
           const testId = `./modules/tests-cases/${name}/source.css`;
           const stats = await webpack(testId, config);