feat: add exportGlobals option

Author: David Liu

README.md

@@ -531,6 +531,7 @@ module.exports = {
             localIdentName: '[path][name]__[local]--[hash:base64:5]',
             context: path.resolve(__dirname, 'src'),
             hashPrefix: 'my-custom-hash',
+            exportGlobals: true,
           },
         },
       },
@@ -886,6 +887,33 @@ module.exports = {
 };
 ```
 
+### `exportGlobals`
+
+Type: `Boolean`
+Default: `false`
+
+Allow `css-loader` to export names from global class or id, so you can use that as local name.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          modules: {
+            exportGlobals: true,
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Assets

src/options.json

@@ -67,6 +67,9 @@
                   "instanceof": "Function"
                 }
               ]
+            },
+            "exportGlobals": {
+              "type": "boolean"
             }
           }
         }

src/utils.js

@@ -103,6 +103,7 @@ function getModulesPlugins(options, loaderContext) {
     getLocalIdent,
     hashPrefix: '',
     localIdentRegExp: null,
+    exportGlobals: false,
   };
 
   if (
@@ -147,6 +148,7 @@ function getModulesPlugins(options, loaderContext) {
 
         return localIdent;
       },
+      exportGlobals: modulesOptions.exportGlobals,
     }),
   ];
 }

test/__snapshots__/modules-option.test.js.snap

@@ -10811,6 +10811,37 @@ Array [
 
 exports[`"modules" option should work with case \`values-10\` (\`modules\` value is \`true)\`: warnings 1`] = `Array []`;
 
+exports[`"modules" option should work with exportGlobals option: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with exportGlobals option: module 1`] = `
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+exports.push([module.id, \\".foo {\\\\n    background-color: #ffffff;\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+exports.locals = {
+	\\"foo\\": \\"foo\\"
+};
+module.exports = exports;
+"
+`;
+
+exports[`"modules" option should work with exportGlobals option: result 1`] = `
+Array [
+  Array [
+    "./modules/exportGlobals/exportGlobals.css",
+    ".foo {
+    background-color: #ffffff;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"modules" option should work with exportGlobals option: warnings 1`] = `Array []`;
+
 exports[`"modules" option should work with the "[local]" placeholder for the "localIdentName" option: errors 1`] = `Array []`;
 
 exports[`"modules" option should work with the "[local]" placeholder for the "localIdentName" option: module 1`] = `

test/__snapshots__/validate-options.test.js.snap

@@ -48,10 +48,15 @@ exports[`validate options should throw an error on the "modules" option with "{"
  - options.modules.context should be a string."
 `;
 
+exports[`validate options should throw an error on the "modules" option with "{"exportGlobals":"invalid"}" value 1`] = `
+"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
+ - options.modules.exportGlobals should be a boolean."
+`;
+
 exports[`validate options should throw an error on the "modules" option with "{"getLocalIdent":[]}" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options.modules should be one of these:
-   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
+   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }
    -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
    Details:
     * options.modules.getLocalIdent should be one of these:
@@ -74,7 +79,7 @@ exports[`validate options should throw an error on the "modules" option with "{"
 exports[`validate options should throw an error on the "modules" option with "{"localIdentRegExp":true}" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options.modules should be one of these:
-   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
+   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }
    -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
    Details:
     * options.modules.localIdentRegExp should be one of these:
@@ -111,53 +116,53 @@ exports[`validate options should throw an error on the "modules" option with "{"
 exports[`validate options should throw an error on the "modules" option with "globals" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options.modules should be one of these:
-   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
+   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }
    -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
    Details:
     * options.modules should be a boolean.
     * options.modules should be one of these:
       \\"local\\" | \\"global\\" | \\"pure\\"
     * options.modules should be an object:
-      object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
+      object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }"
 `;
 
 exports[`validate options should throw an error on the "modules" option with "locals" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options.modules should be one of these:
-   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
+   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }
    -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
    Details:
     * options.modules should be a boolean.
     * options.modules should be one of these:
       \\"local\\" | \\"global\\" | \\"pure\\"
     * options.modules should be an object:
-      object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
+      object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }"
 `;
 
 exports[`validate options should throw an error on the "modules" option with "pures" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options.modules should be one of these:
-   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
+   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }
    -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
    Details:
     * options.modules should be a boolean.
     * options.modules should be one of these:
       \\"local\\" | \\"global\\" | \\"pure\\"
     * options.modules should be an object:
-      object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
+      object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }"
 `;
 
 exports[`validate options should throw an error on the "modules" option with "true" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options.modules should be one of these:
-   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
+   boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }
    -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
    Details:
     * options.modules should be a boolean.
     * options.modules should be one of these:
       \\"local\\" | \\"global\\" | \\"pure\\"
     * options.modules should be an object:
-      object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
+      object { mode?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent?, exportGlobals? }"
 `;
 
 exports[`validate options should throw an error on the "onlyLocals" option with "true" value 1`] = `

test/fixtures/modules/exportGlobals/exportGlobals.css

@@ -0,0 +1,3 @@
+:global(.foo) {
+    background-color: #ffffff;
+}

test/fixtures/modules/exportGlobals/exportGlobals.js

@@ -0,0 +1,5 @@
+import css from './exportGlobals.css';
+
+__export__ = css;
+
+export default css;

test/modules-option.test.js

@@ -565,4 +565,22 @@ describe('"modules" option', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
+
+  it('should work with exportGlobals option', async () => {
+    const compiler = getCompiler('./modules/exportGlobals/exportGlobals.js', {
+      modules: {
+        exportGlobals: true,
+      },
+    });
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./modules/exportGlobals/exportGlobals.css', stats)
+    ).toMatchSnapshot('module');
+    expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot(
+      'result'
+    );
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });

test/validate-options.test.js

@@ -26,6 +26,7 @@ describe('validate options', () => {
         { getLocalIdent: () => {} },
         { localIdentRegExp: 'page-(.*)\\.js' },
         { localIdentRegExp: /page-(.*)\.js/ },
+        { exportGlobals: true },
       ],
       failure: [
         'true',
@@ -41,6 +42,7 @@ describe('validate options', () => {
         { hashPrefix: true },
         { getLocalIdent: [] },
         { localIdentRegExp: true },
+        { exportGlobals: 'invalid' },
       ],
     },
     sourceMap: {