Repository: webpack-contrib/css-loader
Pull request #1009 (2019-12-10 09:41:29)

refactor: code
<!--
  HOLY CRAP a Pull Request. We ❤️ those!

  If you remove or skip this template, you'll make the 🐼 sad and the mighty god
  of Github will appear and pile-drive the close button from a great height
  while making animal noises.

  Please place an x (no spaces!) in all [ ] that apply
-->

This PR contains a:

- [ ] **bugfix**
- [ ] new **feature**
- [x] **code refactor**
- [x] **test update** <!-- if bug or feature is checked, this should be too -->
- [ ] **typo fix**
- [ ] **metadata update**

### Motivation / Use-Case

For future `esModule` option

### Breaking Changes

No

### Additional Info

No

codecov[bot]: # [Codecov](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009?src=pr&el=h1) Report
> Merging [#1009](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009?src=pr&el=desc) into [master](https://codecov.io/gh/webpack-contrib/css-loader/commit/889807a72ee614fbf6469fd2b789947f03b6e819?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `100%`.

[![Impacted file tree graph](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009/graphs/tree.svg?width=650&token=DlN3OQ0JnO&height=150&src=pr)](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009?src=pr&el=tree)

```diff
@@           Coverage Diff           @@
##           master    #1009   +/-   ##
=======================================
  Coverage   99.54%   99.54%           
=======================================
  Files          10       10           
  Lines         435      435           
  Branches      127      121    -6     
=======================================
  Hits          433      433           
  Misses          2        2
```


| [Impacted Files](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/utils.js](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009/diff?src=pr&el=tree#diff-c3JjL3V0aWxzLmpz) | `99.37% <100%> (+0.02%)` | :arrow_up: |
| [src/index.js](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009/diff?src=pr&el=tree#diff-c3JjL2luZGV4Lmpz) | `100% <100%> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009?src=pr&el=footer). Last update [889807a...cf24647](https://codecov.io/gh/webpack-contrib/css-loader/pull/1009?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 6aa5912..500925c 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -47,8 +47,8 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-8-canary:
-          node_version: ^8.9.0
+        node-10-canary:
+          node_version: ^10.13.0
           webpack_version: next
           continue_on_error: true
     steps:
@@ -99,8 +99,8 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-8-canary:
-          node_version: ^8.9.0
+        node-10-canary:
+          node_version: ^10.13.0
           webpack_version: next
           continue_on_error: true
     steps:
@@ -151,8 +151,8 @@ jobs:
         node-8:
           node_version: ^8.9.0
           webpack_version: latest
-        node-8-canary:
-          node_version: ^8.9.0
+        node-10-canary:
+          node_version: ^10.13.0
           webpack_version: next
           continue_on_error: true
     steps:
diff --git a/src/index.js b/src/index.js
index 99583ed..1f2656d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,7 +14,6 @@ import {
   normalizeSourceMap,
   getModulesPlugins,
   getFilter,
-  getApiCode,
   getImportCode,
   getModuleCode,
   getExportCode,
@@ -107,31 +106,30 @@ export default function loader(content, map, meta) {
         }
       }
 
-      // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
-      const apiCode = exportType === 'full' ? getApiCode(this, sourceMap) : '';
-      const importCode =
-        imports.length > 0
-          ? getImportCode(this, imports, {
-              importLoaders: options.importLoaders,
-              exportType,
-            })
-          : '';
-      const moduleCode =
-        exportType === 'full'
-          ? getModuleCode(this, result, replacers, sourceMap)
-          : '';
-      const exportCode =
-        exports.length > 0
-          ? getExportCode(this, exports, replacers, {
-              localsConvention: options.localsConvention,
-              exportType,
-            })
-          : '';
-
-      return callback(
-        null,
-        [apiCode, importCode, moduleCode, exportCode].join('')
+      const { importLoaders, localsConvention } = options;
+      const importCode = getImportCode(
+        this,
+        imports,
+        exportType,
+        sourceMap,
+        importLoaders
       );
+      const moduleCode = getModuleCode(
+        this,
+        result,
+        exportType,
+        sourceMap,
+        replacers
+      );
+      const exportCode = getExportCode(
+        this,
+        exports,
+        exportType,
+        replacers,
+        localsConvention
+      );
+
+      return callback(null, [importCode, moduleCode, exportCode].join(''));
     })
     .catch((error) => {
       callback(
diff --git a/src/utils.js b/src/utils.js
index f993d3d..c02cdfc 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -190,13 +190,13 @@ function normalizeSourceMap(map) {
   return newMap;
 }
 
-function getApiCode(loaderContext, sourceMap) {
-  const url = stringifyRequest(loaderContext, require.resolve('./runtime/api'));
-
-  return `exports = module.exports = require(${url})(${sourceMap});\n`;
-}
-
-function getImportCode(loaderContext, imports, options) {
+function getImportCode(
+  loaderContext,
+  imports,
+  exportType,
+  sourceMap,
+  importLoaders
+) {
   const importItems = [];
   const codeItems = [];
   const urlImportNames = new Map();
@@ -204,6 +204,17 @@ function getImportCode(loaderContext, imports, options) {
   let hasUrlHelperCode = false;
   let importPrefix;
 
+  if (exportType === 'full') {
+    const url = stringifyRequest(
+      loaderContext,
+      require.resolve('./runtime/api')
+    );
+    importItems.push(`var ___CSS_LOADER_API_IMPORT___ = require(${url});`);
+    codeItems.push(
+      `exports = module.exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`
+    );
+  }
+
   imports.forEach((item) => {
     if (item.type === '@import' || item.type === 'icss-import') {
       const media = item.media ? `, ${JSON.stringify(item.media)}` : '';
@@ -216,7 +227,7 @@ function getImportCode(loaderContext, imports, options) {
       }
 
       if (!importPrefix) {
-        importPrefix = getImportPrefix(loaderContext, options.importLoaders);
+        importPrefix = getImportPrefix(loaderContext, importLoaders);
       }
 
       const url = stringifyRequest(
@@ -226,7 +237,7 @@ function getImportCode(loaderContext, imports, options) {
 
       importItems.push(`var ${item.name} = require(${url});`);
 
-      if (options.exportType === 'full') {
+      if (exportType === 'full') {
         codeItems.push(`exports.i(${item.name}${media});`);
       }
     }
@@ -267,12 +278,25 @@ function getImportCode(loaderContext, imports, options) {
     }
   });
 
-  return `// Imports\n${importItems.join('\n')}\n${codeItems.join('\n')}\n`;
+  const items = importItems.concat(codeItems);
+
+  return items.length > 0 ? `// Imports\n${items.join('\n')}\n` : '';
 }
 
-function getModuleCode(loaderContext, result, replacers, sourceMap) {
+function getModuleCode(
+  loaderContext,
+  result,
+  exportType,
+  sourceMap,
+  replacers
+) {
+  if (exportType !== 'full') {
+    return '';
+  }
+
   const { css, map } = result;
   const sourceMapValue = sourceMap && map ? `,${map}` : '';
+
   let cssCode = JSON.stringify(css);
 
   replacers.forEach((replacer) => {
@@ -301,7 +325,17 @@ function dashesCamelCase(str) {
   );
 }
 
-function getExportCode(loaderContext, exports, replacers, options) {
+function getExportCode(
+  loaderContext,
+  exports,
+  exportType,
+  replacers,
+  localsConvention
+) {
+  if (exports.length === 0) {
+    return '';
+  }
+
   const items = [];
 
   function addExportedItem(name, value) {
@@ -311,7 +345,7 @@ function getExportCode(loaderContext, exports, replacers, options) {
   exports.forEach((item) => {
     const { name, value } = item;
 
-    switch (options.localsConvention) {
+    switch (localsConvention) {
       case 'camelCase': {
         addExportedItem(name, value);
 
@@ -348,7 +382,7 @@ function getExportCode(loaderContext, exports, replacers, options) {
   });
 
   let exportCode = `// Exports\n${
-    options.exportType === 'locals' ? 'module.exports' : 'exports.locals'
+    exportType === 'locals' ? 'module.exports' : 'exports.locals'
   } = {\n${items.join(',\n')}\n};`;
 
   replacers.forEach((replacer) => {
@@ -357,7 +391,7 @@ function getExportCode(loaderContext, exports, replacers, options) {
       const localName = JSON.stringify(replacer.localName);
 
       exportCode = exportCode.replace(new RegExp(name, 'g'), () =>
-        options.exportType === 'locals'
+        exportType === 'locals'
           ? `" + ${importName}[${localName}] + "`
           : `" + ${importName}.locals[${localName}] + "`
       );
@@ -371,7 +405,6 @@ export {
   getFilter,
   getModulesPlugins,
   normalizeSourceMap,
-  getApiCode,
   getImportCode,
   getModuleCode,
   getExportCode,


Test patch:
diff --git a/test/__snapshots__/import-option.test.js.snap b/test/__snapshots__/import-option.test.js.snap
index db3290d..c85246a 100644
--- a/test/__snapshots__/import-option.test.js.snap
+++ b/test/__snapshots__/import-option.test.js.snap
@@ -175,8 +175,8 @@ Array [
 `;
 
 exports[`import option Function: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./test-media.css\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_1___ = require(\\"-!../../../src/index.js??ref--4-0!./test-other.css\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_8___ = require(\\"-!../../../src/index.js??ref--4-0!./query.css?foo=1&bar=1\\");
@@ -189,6 +189,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_17___ = require(\\"-!../../../src/index.js??ref
 var ___CSS_LOADER_AT_RULE_IMPORT_18___ = require(\\"-!../../../src/index.js??ref--4-0!./url.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and print\\");
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"(min-width: 100px)\\");
 exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
@@ -352,10 +353,11 @@ Array [
 `;
 
 exports[`import option false: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 // Module
 exports.push([module.id, \\"@import url(test.css);\\\\n@import url('test.css');\\\\n@import url(\\\\\\"test.css\\\\\\");\\\\n@IMPORT url(test.css);\\\\n@import URL(test.css);\\\\n@import url(test.css );\\\\n@import url( test.css);\\\\n@import url( test.css );\\\\n@import url(\\\\n  test.css\\\\n);\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import \\\\\\"test.css\\\\\\";\\\\n@import 'test.css';\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\"   \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import url(test.css) screen and print;\\\\n@import url(test.css) SCREEN AND PRINT;\\\\n@import url(test.css)screen and print;\\\\n@import url(test.css)  screen and print;\\\\n@import url(test-media.css) screen and print;\\\\n@import url(test-other.css) (min-width: 100px);\\\\n@import url(http://example.com/style.css);\\\\n@import url(http://example.com/style.css);\\\\n@import url(http://example.com/style.css#hash);\\\\n@import url(http://example.com/style.css?#hash);\\\\n@import url(http://example.com/style.css?foo=bar#hash);\\\\n@import url(http://example.com/other-style.css) screen and print;\\\\n@import url(http://example.com/other-style.css) screen and print;\\\\n@import url(\\\\\\"//example.com/style.css\\\\\\");\\\\n@import url(~package/test.css);\\\\n@import ;\\\\n@import foo-bar;\\\\n@import-normalize;\\\\n@import url('http://') :root {}\\\\n@import url('query.css?foo=1&bar=1');\\\\n@import url('other-query.css?foo=1&bar=1#hash');\\\\n@import url('other-query.css?foo=1&bar=1#hash') screen and print;\\\\n@import url('https://fonts.googleapis.com/css?family=Roboto');\\\\n@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');\\\\n@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');\\\\n\\\\n.class {\\\\n  a: b c d;\\\\n}\\\\n\\\\n.foo {\\\\n  @import 'path.css';\\\\n}\\\\n\\\\n@import url('./relative.css');\\\\n@import url('../import/top-relative.css');\\\\n@import url(~package/tilde.css);\\\\n@import url(~aliasesImport/alias.css);\\\\n@import url('./url.css');\\\\n\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL_IMPORT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
@@ -545,8 +547,8 @@ Array [
 `;
 
 exports[`import option true: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./test.css\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_1___ = require(\\"-!../../../src/index.js??ref--4-0!./test.css\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_2___ = require(\\"-!../../../src/index.js??ref--4-0!./test-media.css\\");
@@ -562,6 +564,7 @@ var ___CSS_LOADER_AT_RULE_IMPORT_20___ = require(\\"-!../../../src/index.js??ref
 var ___CSS_LOADER_AT_RULE_IMPORT_21___ = require(\\"-!../../../src/index.js??ref--4-0!./url.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"screen and print\\");
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_2___, \\"screen and print\\");
diff --git a/test/__snapshots__/importLoaders-option.test.js.snap b/test/__snapshots__/importLoaders-option.test.js.snap
index 95a5129..9f71c56 100644
--- a/test/__snapshots__/importLoaders-option.test.js.snap
+++ b/test/__snapshots__/importLoaders-option.test.js.snap
@@ -26,9 +26,10 @@ Array [
 `;
 
 exports[`importLoaders option 0 (\`postcss-loader\` before): module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
@@ -63,9 +64,10 @@ Array [
 `;
 
 exports[`importLoaders option 1 (\`postcss-loader\` before): module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!../../../node_modules/postcss-loader/src/index.js??ref--4-1!./imported.css\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
@@ -100,9 +102,10 @@ Array [
 `;
 
 exports[`importLoaders option 1 (no loaders before): module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgb(0 0 100% / 90%);\\\\n}\\\\n\\", \\"\\"]);
@@ -137,9 +140,10 @@ Array [
 `;
 
 exports[`importLoaders option 2 (\`postcss-loader\` before): module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!../../../node_modules/postcss-loader/src/index.js??ref--4-1!./imported.css\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
@@ -174,9 +178,10 @@ Array [
 `;
 
 exports[`importLoaders option not specify (no loader before): module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 exports.push([module.id, \\".foo {\\\\n  color: red;\\\\n  color: rgba(0, 0, 255, 0.9);\\\\n}\\\\n\\", \\"\\"]);
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
index fcc8126..5594394 100644
--- a/test/__snapshots__/loader.test.js.snap
+++ b/test/__snapshots__/loader.test.js.snap
@@ -291,11 +291,12 @@ a[href=\\"\\" i] {
 `;
 
 exports[`loader should compile with \`css\` entry point (with \`modules\` and scope \`global\`): module 1`] = `
-"exports = module.exports = require(\\"../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../src/index.js??ref--4-0!./imported.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./url/img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 // Module
@@ -596,11 +597,12 @@ a[href=\\"\\" i] {
 `;
 
 exports[`loader should compile with \`css\` entry point (with \`modules\` and scope \`local\`): module 1`] = `
-"exports = module.exports = require(\\"../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../src/index.js??ref--4-0!./imported.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./url/img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 // Module
@@ -925,11 +927,12 @@ a[href=\\"\\" i] {
 `;
 
 exports[`loader should compile with \`css\` entry point: module 1`] = `
-"exports = module.exports = require(\\"../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../src/index.js??ref--4-0!./imported.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./url/img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 // Module
@@ -1230,11 +1233,12 @@ a[href=\\"\\" i] {
 `;
 
 exports[`loader should compile with \`js\` entry point: module 1`] = `
-"exports = module.exports = require(\\"../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../src/index.js??ref--4-0!./imported.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./url/img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 // Module
@@ -1257,7 +1261,9 @@ Array [
 `;
 
 exports[`loader should compile with empty css entry point: module 1`] = `
-"exports = module.exports = require(\\"../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\"\\", \\"\\"]);
 "
@@ -1278,7 +1284,9 @@ Array [
 `;
 
 exports[`loader should compile with empty options: module 1`] = `
-"exports = module.exports = require(\\"../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\"\\", \\"\\"]);
 "
@@ -1516,11 +1524,12 @@ console.log(styles);
 /* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(0)(false);
 // Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(0);
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = __webpack_require__(3);
 var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__(4);
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = __webpack_require__(5);
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 // Module
@@ -1531,7 +1540,9 @@ exports.push([module.i, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\
 /* 3 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(0)(false);
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(0);
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.i, \\".foo {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
 
@@ -1793,11 +1804,12 @@ console.log(styles);
 /* 2 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(0)(false);
 // Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(0);
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = __webpack_require__(3);
 var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__(4);
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = __webpack_require__(5);
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 // Module
@@ -1808,7 +1820,9 @@ exports.push([module.i, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\
 /* 3 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(0)(false);
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(0);
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.i, \\".foo {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
 
@@ -1938,11 +1952,12 @@ a:hover {
 `;
 
 exports[`loader using together with "postcss-loader" and reuse \`ast\`: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img1x.png\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_1___ = require(\\"./img2x.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_1___);
 // Module
@@ -1983,14 +1998,18 @@ Array [
 `;
 
 exports[`loader using together with "sass-loader": module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\"body {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333;\\\\n}\\", \\"\\"]);
 "
 `;
 
 exports[`loader using together with "sass-loader": module 2`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\"body {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333;\\\\n}\\", \\"\\"]);
 "
diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap
index 4deb156..08fda30 100644
--- a/test/__snapshots__/modules-option.test.js.snap
+++ b/test/__snapshots__/modules-option.test.js.snap
@@ -6143,8 +6143,8 @@ a {
 `;
 
 exports[`modules composes should supports resolving: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_ICSS_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./values.css\\");
 var ___CSS_LOADER_ICSS_IMPORT_1___ = require(\\"-!../../../src/index.js??ref--4-0!./something.css\\");
 var ___CSS_LOADER_ICSS_IMPORT_2___ = require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\");
@@ -6155,6 +6155,7 @@ var ___CSS_LOADER_ICSS_IMPORT_6___ = require(\\"-!../../../src/index.js??ref--4-
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./test-other.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"../url/img.png\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_ICSS_IMPORT_0___);
 exports.i(___CSS_LOADER_ICSS_IMPORT_1___);
 exports.i(___CSS_LOADER_ICSS_IMPORT_2___);
@@ -6267,9 +6268,10 @@ Array [
 `;
 
 exports[`modules issue #286: module 1`] = `
-"exports = module.exports = require(\\"../../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
 var ___CSS_LOADER_ICSS_IMPORT_0___ = require(\\"./dep.css\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_ICSS_IMPORT_0___);
 // Module
 exports.push([module.id, \\".b--main { }\\\\n\\", \\"\\"]);
@@ -6302,9 +6304,10 @@ Array [
 `;
 
 exports[`modules issue #636: module 1`] = `
-"exports = module.exports = require(\\"../../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
 var ___CSS_LOADER_ICSS_IMPORT_0___ = require(\\"-!../../../../src/index.js??ref--4-0!../../../../node_modules/sass-loader/dist/cjs.js??ref--4-1!./foo.scss\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_ICSS_IMPORT_0___);
 // Module
 exports.push([module.id, \\".prefix-bar {\\\\n}\\", \\"\\"]);
@@ -6358,10 +6361,11 @@ Array [
 `;
 
 exports[`modules issue #861: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_ICSS_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!@localpackage/color.css\\");
 var ___CSS_LOADER_ICSS_IMPORT_1___ = require(\\"-!../../../src/index.js??ref--4-0!@localpackage/style.css\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_ICSS_IMPORT_0___);
 exports.i(___CSS_LOADER_ICSS_IMPORT_1___);
 // Module
@@ -6391,7 +6395,9 @@ Array [
 `;
 
 exports[`modules issue #966: module 1`] = `
-"exports = module.exports = require(\\"../../../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\".button.hey {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
 // Exports
@@ -6426,7 +6432,9 @@ Array [
 `;
 
 exports[`modules issue #967: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\".modules-path-placeholder__foo__--sep---sep---sep---sep----sep---sep---sep---sep---sep-- {\\\\n  color: red;\\\\n}\\\\n\\\\n.modules-path-placeholder__foo\\\\\\\\/bar__--sep---sep---sep---sep----sep---sep---sep---sep---sep-- {\\\\n  color: blue;\\\\n}\\\\n\\\\n.modules-path-placeholder__\\\\\\\\[\\\\\\\\/\\\\\\\\?\\\\\\\\<\\\\\\\\>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\3A \\\\\\\\*\\\\\\\\|\\\\\\\\\\\\\\"\\\\\\\\3A \\\\\\\\]__--sep---sep---sep---sep----sep---sep---sep---sep---sep-- {\\\\n  color: yellow;\\\\n}\\\\n\\", \\"\\"]);
 // Exports
@@ -6455,7 +6463,9 @@ Array [
 `;
 
 exports[`modules issue #980: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\".file-with-many-dots-in-name_a_1j0Lw {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
 // Exports
@@ -6572,7 +6582,9 @@ div:not(.\\\\1F600) {
 `;
 
 exports[`modules issue #995: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\"/* class=\\\\\\"😀\\\\\\" */\\\\n.a {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀 😓\\\\\\" */\\\\n.a.b {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" > class=\\\\\\"😓\\\\\\" */\\\\n.a .b {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" */\\\\n.😀 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀 😓\\\\\\" */\\\\n.😀.😓 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" > class=\\\\\\"😓\\\\\\" */\\\\n.😀 .😓 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" */\\\\n.\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀 😓\\\\\\" */\\\\n.\\\\\\\\1F600.\\\\\\\\1F613 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" > class=\\\\\\"😓\\\\\\" */\\\\n.\\\\\\\\1F600  .\\\\\\\\1F613 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* Local */\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" */\\\\n.\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀 😓\\\\\\" */\\\\n.\\\\\\\\1F600.\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" > class=\\\\\\"😓\\\\\\" */\\\\n.\\\\\\\\1F600  .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F600  .a .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F600  .\\\\\\\\1F600  .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\ndiv:not(.\\\\\\\\1F600) {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F600  .b {\\\\n  color: red;\\\\n}\\\\n\\\\n.b .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F613  .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F613 .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F600 > .\\\\\\\\1F600 > .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
 // Exports
@@ -8189,7 +8201,9 @@ h1 #_1NoAfl4L6pYsi53yvE4szS {
 `;
 
 exports[`modules should support "pure" value: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
 exports.push([module.id, \\"._3nNRq3PQ9uK67a19lT8NHq {\\\\n  color: red;\\\\n}\\\\n\\\\nh1 ._2-tJ-0L9xa__ypZabJN82L {\\\\n  color: green;\\\\n}\\\\n\\\\n._1ItNtG9CwOxu2Vxb-etJHN h1 {\\\\n  color: blue;\\\\n}\\\\n\\\\n.SDNtlQ92cFx6fiH6yuh5K h1 ._35UJyh7y0HgDlh3_YNNxbm {\\\\n  color: red;\\\\n}\\\\n\\\\n#_15-F5dpJOOl0BGWwx4yHdh {\\\\n  color: red;\\\\n}\\\\n\\\\nh1 #_1NoAfl4L6pYsi53yvE4szS {\\\\n  color: green;\\\\n}\\\\n\\\\n#Gf_c6hz7pPUKG_4DBKZX_ h1 {\\\\n  color: blue;\\\\n}\\\\n\\\\n#gcol1OF3vPJZQgK7JWvsX h1 #_3vlp1YEgWrcYSofV_DbgLl {\\\\n  color: red;\\\\n}\\\\n\\\\n._1aIXXfKePbQyIoBtx5r_i3 .bar ._1yneLDnIvMLhNduXi5yqqV {\\\\n  color: white;\\\\n}\\\\n\\\\n._2u-qJxyLPtRRB90K5UQGa1 .Xt6ycOTkGG2zy0zRDe6BK ._3M5wEyAlDWBbzYBzLLARxJ {\\\\n  color: black;\\\\n}\\\\n\\", \\"\\"]);
 // Exports
diff --git a/test/__snapshots__/onlyLocals-option.test.js.snap b/test/__snapshots__/onlyLocals-option.test.js.snap
index 7e78cd1..98b474e 100644
--- a/test/__snapshots__/onlyLocals-option.test.js.snap
+++ b/test/__snapshots__/onlyLocals-option.test.js.snap
@@ -11,7 +11,6 @@ var ___CSS_LOADER_ICSS_IMPORT_3___ = require(\\"-!../../../src/index.js??ref--4-
 var ___CSS_LOADER_ICSS_IMPORT_4___ = require(\\"-!../../../src/index.js??ref--4-0!../modules/top-relative.css\\");
 var ___CSS_LOADER_ICSS_IMPORT_5___ = require(\\"-!../../../src/index.js??ref--4-0!package/style.css\\");
 var ___CSS_LOADER_ICSS_IMPORT_6___ = require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\");
-
 // Exports
 module.exports = {
 	\\"v-def\\": \\"\\" + ___CSS_LOADER_ICSS_IMPORT_0___[\\"v-def\\"] + \\"\\",
diff --git a/test/__snapshots__/url-option.test.js.snap b/test/__snapshots__/url-option.test.js.snap
index 95105c4..b52d63b 100644
--- a/test/__snapshots__/url-option.test.js.snap
+++ b/test/__snapshots__/url-option.test.js.snap
@@ -289,8 +289,8 @@ a {
 `;
 
 exports[`url option Function: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./font.woff\\");
@@ -306,6 +306,7 @@ var ___CSS_LOADER_URL_PURE_IMPORT_11___ = require(\\"./img-simple.png\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_12___ = require(\\"../url/img-simple.png\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_15___ = require(\\"./img3x.png\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_16___ = require(\\"./img1x.png?foo=bar\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_1___);
@@ -689,9 +690,10 @@ a {
 `;
 
 exports[`url option false: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 exports.push([module.id, \\".class {\\\\n  background: url('./img.png');\\\\n}\\\\n\\\\n.class {\\\\n  background: url(\\\\\\"./img.png\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background: url(./img.png);\\\\n}\\\\n\\\\n.class {\\\\n  background: url(\\\\\\"./img.png#hash\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background: url(\\\\n    \\\\\\"./img.png\\\\\\"\\\\n  );\\\\n}\\\\n\\\\n.class {\\\\n  background: green url( './img.png' ) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url( \\\\\\"./img.png\\\\\\" ) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url( ./img.png ) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url(~package/img.png) url(./other-img.png) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url( \\\\\\"./img img.png\\\\\\" ) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url( './img img.png' ) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url(/img.png) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background-image: url(\\\\\\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background-image: url(\\\\\\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%2523007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\"><filter id=\\\\\\"filter\\\\\\"><feGaussianBlur in=\\\\\\"SourceAlpha\\\\\\" stdDeviation=\\\\\\"0\\\\\\" /><feOffset dx=\\\\\\"1\\\\\\" dy=\\\\\\"2\\\\\\" result=\\\\\\"offsetblur\\\\\\" /><feFlood flood-color=\\\\\\"rgba(255,255,255,1)\\\\\\" /><feComposite in2=\\\\\\"offsetblur\\\\\\" operator=\\\\\\"in\\\\\\" /><feMerge><feMergeNode /><feMergeNode in=\\\\\\"SourceGraphic\\\\\\" /></feMerge></filter></svg>#filter');\\\\n}\\\\n\\\\n.class {\\\\n  filter: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%5C%22%3E%3Cfilter%20id%3D%5C%22filter%5C%22%3E%3CfeGaussianBlur%20in%3D%5C%22SourceAlpha%5C%22%20stdDeviation%3D%5C%220%5C%22%20%2F%3E%3CfeOffset%20dx%3D%5C%221%5C%22%20dy%3D%5C%222%5C%22%20result%3D%5C%22offsetblur%5C%22%20%2F%3E%3CfeFlood%20flood-color%3D%5C%22rgba(255%2C255%2C255%2C1)%5C%22%20%2F%3E%3CfeComposite%20in2%3D%5C%22offsetblur%5C%22%20operator%3D%5C%22in%5C%22%20%2F%3E%3CfeMerge%3E%3CfeMergeNode%20%2F%3E%3CfeMergeNode%20in%3D%5C%22SourceGraphic%5C%22%20%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E%23filter');\\\\n}\\\\n\\\\n.highlight {\\\\n  filter: url(#highlight);\\\\n}\\\\n\\\\n.highlight {\\\\n  filter: url('#line-marker');\\\\n}\\\\n\\\\n@font-face {\\\\n  src: url(./font.woff) format('woff'),\\\\n    url('./font.woff2') format('woff2'),\\\\n    url(\\\\\\"./font.eot\\\\\\") format('eot'),\\\\n    url(~package/font.ttf) format('truetype'),\\\\n    url(\\\\\\"./font with spaces.eot\\\\\\") format(\\\\\\"embedded-opentype\\\\\\"),\\\\n    url('./font.svg#svgFontName') format('svg'),\\\\n    url('./font.woff2?foo=bar') format('woff2'),\\\\n    url(\\\\\\"./font.eot?#iefix\\\\\\") format('embedded-opentype'),\\\\n    url(\\\\\\"./font with spaces.eot?#iefix\\\\\\") format('embedded-opentype');\\\\n}\\\\n\\\\n@media (min-width: 500px) {\\\\n  body {\\\\n    background: url(\\\\\\"./img.png\\\\\\");\\\\n  }\\\\n}\\\\n\\\\na {\\\\n  content: \\\\\\"do not use url(path)\\\\\\";\\\\n}\\\\n\\\\nb {\\\\n  content: 'do not \\\\\\"use\\\\\\" url(path)';\\\\n}\\\\n\\\\n@keyframes anim {\\\\n  background: green url('./img.png') xyz;\\\\n}\\\\n\\\\n.a {\\\\n  background-image: -webkit-image-set(url('./img1x.png') 1x, url('./img2x.png') 2x)\\\\n}\\\\n\\\\n.a {\\\\n  background-image: image-set(url('./img1x.png') 1x, url('./img2x.png') 2x)\\\\n}\\\\n\\\\n.class {\\\\n  background: green url() xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url('') xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url(\\\\\\"\\\\\\") xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url('   ') xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url(\\\\n  ) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url(https://raw.githubusercontent.com/webpack/media/master/logo/icon.png) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: green url(//raw.githubusercontent.com/webpack/media/master/logo/icon.png) xyz;\\\\n}\\\\n\\\\n.class {\\\\n  background: url(\\\\\\"./img.png?foo\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background: url(\\\\\\"./img.png?foo=bar\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background: url(\\\\\\"./img.png?foo=bar#hash\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background: url(\\\\\\"./img.png?foo=bar#hash\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background: url(\\\\\\"./img.png?\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background-image: url('./img.png') url(\\\\\\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>\\\\\\") url('./img.png');\\\\n}\\\\n\\\\n.class {\\\\n  background: ___CSS_LOADER_URL___;\\\\n  background: ___CSS_LOADER_URL___INDEX___;\\\\n  background: ___CSS_LOADER_URL___99999___;\\\\n  background: ___CSS_LOADER_IMPORT___;\\\\n  background: ___CSS_LOADER_IMPORT___INDEX___;\\\\n  background: ___CSS_LOADER_IMPORT___99999___;\\\\n}\\\\n\\\\n.pure-url {\\\\n  background: url('img-simple.png');\\\\n}\\\\n\\\\n.not-resolved {\\\\n  background: url('/img-simple.png');\\\\n}\\\\n\\\\n.above-below {\\\\n  background: url('../url/img-simple.png');\\\\n}\\\\n\\\\n.tilde {\\\\n  background: url('~package/img.png');\\\\n}\\\\n\\\\n.aliases {\\\\n  background: url('~aliasesImg/img.png') ;\\\\n}\\\\n\\\\na {\\\\n  background: url(./nested/img.png);\\\\n}\\\\n\\\\na {\\\\n  background: url(nested/img.png);\\\\n}\\\\n\\\\n@font-face {\\\\n  src: url(\\\\\\"//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  /* Broken */\\\\n  background-image: -webkit-image-set();\\\\n  background-image: -webkit-image-set('');\\\\n  background-image: image-set();\\\\n  background-image: image-set('');\\\\n  background-image: image-set(\\\\\\"\\\\\\");\\\\n  background-image: image-set(\\\\\\"\\\\\\" 1x);\\\\n  background-image: image-set(url());\\\\n  background-image: image-set(\\\\n    url()\\\\n  );\\\\n  background-image: image-set(URL());\\\\n  background-image: image-set(url(''));\\\\n  background-image: image-set(url(\\\\\\"\\\\\\"));\\\\n  background-image: image-set(url('') 1x);\\\\n  background-image: image-set(1x);\\\\n  background-image: image-set(\\\\n    1x\\\\n  );\\\\n  background: image-set(calc(1rem + 1px) 1x);\\\\n\\\\n  /* Strings */\\\\n  background-image: -webkit-image-set(\\\\\\"./img1x.png\\\\\\" 1x, \\\\\\"./img2x.png\\\\\\" 2x);\\\\n  background-image: image-set(\\\\\\"./img1x.png\\\\\\" 1x);\\\\n  background-image: image-set(\\\\\\"./img1x.png\\\\\\" 1x, \\\\\\"./img2x.png\\\\\\" 2x);\\\\n  background-image: image-set(\\\\\\"./img img.png\\\\\\" 1x, \\\\\\"./img img.png\\\\\\" 2x);\\\\n  background-image: image-set(\\\\\\"./img1x.png\\\\\\" 1x, \\\\\\"./img2x.png\\\\\\" 2x),\\\\n    image-set(\\\\\\"./img1x.png\\\\\\" 1x, \\\\\\"./img2x.png\\\\\\" 2x);\\\\n  background-image: image-set(\\\\n    \\\\\\"./img1x.png\\\\\\" 1x,\\\\n    \\\\\\"./img2x.png\\\\\\" 2x,\\\\n    \\\\\\"./img3x.png\\\\\\" 600dpi\\\\n  );\\\\n  background-image: image-set(\\\\\\"./img1x.png?foo=bar\\\\\\" 1x);\\\\n  background-image: image-set(\\\\\\"./img1x.png#hash\\\\\\" 1x);\\\\n  background-image: image-set(\\\\\\"./img1x.png?#iefix\\\\\\" 1x);\\\\n\\\\n  /* With \`url\` function */\\\\n  background-image: -webkit-image-set(url(\\\\\\"./img1x.png\\\\\\") 1x, url(\\\\\\"./img2x.png\\\\\\") 2x);\\\\n  background-image: -webkit-image-set(url(\\\\\\"./img1x.png\\\\\\") 1x);\\\\n  background-image: -webkit-image-set(\\\\n    url(\\\\\\"./img1x.png\\\\\\") 1x\\\\n  );\\\\n  background-image: image-set(url(./img1x.png) 1x);\\\\n  background-image: image-set(\\\\n    url(./img1x.png) 1x\\\\n  );\\\\n  background-image: image-set(url(\\\\\\"./img1x.png\\\\\\") 1x, url(\\\\\\"./img2x.png\\\\\\") 2x);\\\\n  background-image: image-set(\\\\n    url(./img1x.png) 1x,\\\\n    url(./img2x.png) 2x,\\\\n    url(./img3x.png) 600dpi\\\\n  );\\\\n  background-image: image-set(url(\\\\\\"./img img.png\\\\\\") 1x, url(\\\\\\"./img img.png\\\\\\") 2x);\\\\n\\\\n  background-image: image-set(url(\\\\\\"./img1x.png\\\\\\") 1x, \\\\\\"./img2x.png\\\\\\" 2x);\\\\n}\\\\n\\", \\"\\"]);
@@ -989,8 +991,8 @@ a {
 `;
 
 exports[`url option true: module 1`] = `
-"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
-// Imports
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./imported.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_0___ = require(\\"./img.png\\");
@@ -1016,6 +1018,7 @@ var ___CSS_LOADER_URL_PURE_IMPORT_23___ = require(\\"./nested/img.png\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_24___ = require(\\"./nested/img.png\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_28___ = require(\\"./img3x.png\\");
 var ___CSS_LOADER_URL_PURE_IMPORT_29___ = require(\\"./img1x.png?foo=bar\\");
+exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___);
 var ___CSS_LOADER_URL_IMPORT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_PURE_IMPORT_0___, { hash: \\"#hash\\" });