feat: reduce runtime

BREAKING CHANGE: runtime doesn't contain source maps function without `sourceMap: true`

Author: cap-Bernardito

Diff for: src/index.js

@@ -197,6 +197,16 @@ export default async function loader(content, map, meta) {
       importName: '___CSS_LOADER_API_IMPORT___',
       url: stringifyRequest(this, require.resolve('./runtime/api')),
     });
+
+    if (options.sourceMap) {
+      imports.unshift({
+        importName: '___CSS_LOADER_API_SOURCEMAP_IMPORT___',
+        url: stringifyRequest(
+          this,
+          require.resolve('./runtime/cssWithMappingToString')
+        ),
+      });
+    }
   }
 
   const importCode = getImportCode(imports, options);

Diff for: src/runtime/api.js

@@ -4,13 +4,13 @@
 */
 // css base code, injected by the css-loader
 // eslint-disable-next-line func-names
-module.exports = function (useSourceMap) {
+module.exports = function (cssWithMappingToString) {
   const list = [];
 
   // return the list of modules as css string
   list.toString = function toString() {
     return this.map((item) => {
-      const content = cssWithMappingToString(item, useSourceMap);
+      const content = cssWithMappingToString(item);
 
       if (item[2]) {
         return `@media ${item[2]} {${content}}`;
@@ -63,33 +63,3 @@ module.exports = function (useSourceMap) {
 
   return list;
 };
-
-function cssWithMappingToString(item, useSourceMap) {
-  const content = item[1] || '';
-  // eslint-disable-next-line prefer-destructuring
-  const cssMapping = item[3];
-
-  if (!cssMapping) {
-    return content;
-  }
-
-  if (useSourceMap && typeof btoa === 'function') {
-    const sourceMapping = toComment(cssMapping);
-    const sourceURLs = cssMapping.sources.map(
-      (source) => `/*# sourceURL=${cssMapping.sourceRoot || ''}${source} */`
-    );
-
-    return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
-  }
-
-  return [content].join('\n');
-}
-
-// Adapted from convert-source-map (MIT)
-function toComment(sourceMap) {
-  // eslint-disable-next-line no-undef
-  const base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
-  const data = `sourceMappingURL=data:application/json;charset=utf-8;base64,${base64}`;
-
-  return `/*# ${data} */`;
-}

Diff for: src/runtime/cssWithMappingToString.js

@@ -0,0 +1,20 @@
+module.exports = function cssWithMappingToString(item) {
+  const [, content, , cssMapping] = item;
+
+  if (typeof btoa === 'function') {
+    // eslint-disable-next-line no-undef
+    const base64 = btoa(
+      unescape(encodeURIComponent(JSON.stringify(cssMapping)))
+    );
+    const data = `sourceMappingURL=data:application/json;charset=utf-8;base64,${base64}`;
+    const sourceMapping = `/*# ${data} */`;
+
+    const sourceURLs = cssMapping.sources.map(
+      (source) => `/*# sourceURL=${cssMapping.sourceRoot || ''}${source} */`
+    );
+
+    return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
+  }
+
+  return [content].join('\n');
+};

Diff for: src/utils.js

@@ -484,7 +484,12 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
     : '';
 
   let code = JSON.stringify(result.css);
-  let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${options.sourceMap});\n`;
+
+  let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${
+    options.sourceMap
+      ? '___CSS_LOADER_API_SOURCEMAP_IMPORT___'
+      : 'function(i){return i[1]}'
+  });\n`;
 
   for (const item of api) {
     const { url, media, dedupe } = item;

Diff for: test/__snapshots__/esModule-option.test.js.snap

@@ -8,7 +8,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
@@ -54,7 +54,7 @@ var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??[ident]!./imported.css\\");
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_IMPORT_0___ = require(\\"./img.png\\");
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
@@ -100,7 +100,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
@@ -146,7 +146,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
@@ -195,7 +195,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
@@ -244,7 +244,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module

Diff for: test/__snapshots__/import-option.test.js.snap

@@ -9,7 +9,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident
 import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"-!../../../src/index.js??[ident]!./order-2.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_2___ from \\"-!../../../src/index.js??[ident]!./order-3.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_3___ from \\"-!../../../src/index.js??[ident]!./order-4.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
@@ -158,7 +158,7 @@ exports[`"import" option should resolve "file" protocol: module 1`] = `
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./test.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, \\"\\", \\"\\"]);
@@ -193,7 +193,7 @@ exports[`"import" option should resolve absolute path: module 1`] = `
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./test.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, \\"\\", \\"\\"]);
@@ -228,7 +228,7 @@ exports[`"import" option should resolve server-relative url relative rootContext
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./test.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
@@ -275,7 +275,7 @@ exports[`"import" option should respect conditionNames: module 1`] = `
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./node_modules/package-with-exports/style.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, \\"\\\\n\\", \\"\\"]);
@@ -310,7 +310,7 @@ exports[`"import" option should respect style field in package.json: errors 1`]
 exports[`"import" option should respect style field in package.json: module 1`] = `
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../src/runtime/api.js\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, \\".test {\\\\n  color: coral;\\\\n}\\\\n\\", \\"\\"]);
 // Exports
@@ -356,7 +356,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./test.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"-!../../../src/index.js??[ident]!./issue-683.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_2___ from \\"-!../../../src/index.js??[ident]!./node_modules/package/tilde.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_2___);
@@ -436,7 +436,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_17___ from \\"-!../../../src/index.js??[iden
 import ___CSS_LOADER_AT_RULE_IMPORT_18___ from \\"-!../../../src/index.js??[ident]!./something.css?foo=2&bar=1\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\");
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"(min-width: 100px)\\");
 ___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
@@ -960,7 +960,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_23___ from \\"-!../../../src/index.js??[iden
 import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??[ident]!./something.css?foo=2&bar=1\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
@@ -1791,7 +1791,7 @@ exports[`"import" option should work with a value equal to "false": module 1`] =
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
 ___CSS_LOADER_EXPORT___.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 (orientation:landscape);\\\\n@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE);\\\\n@import url(test.css)screen and (orientation:landscape);\\\\n@import url(test.css)  screen and (orientation:landscape);\\\\n@import url(test-media.css) screen and (orientation:landscape);\\\\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 (orientation:landscape);\\\\n@import url(http://example.com/other-style.css) screen and (orientation:landscape);\\\\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 (orientation:landscape);\\\\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_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n@import url(./test.css);\\\\n\\\\n@import './te\\\\\\\\\\\\nst.css';\\\\n@import './te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css';\\\\n@import url('./te\\\\\\\\\\\\nst.css');\\\\n@import url('./te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css');\\\\n\\\\n@import \\\\\\"./te'st.css\\\\\\";\\\\n@import url(\\\\\\"./te'st.css\\\\\\");\\\\n@import './te\\\\\\\\'st.css';\\\\n@import url('./te\\\\\\\\'st.css');\\\\n@import './test test.css';\\\\n@import url('./test test.css');\\\\n@import './test\\\\\\\\ test.css';\\\\n@import url('./test\\\\\\\\ test.css');\\\\n@import './test%20test.css';\\\\n@import url('./test%20test.css');\\\\n@import './\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import './t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import url(./test\\\\\\\\ test.css);\\\\n@import url(./t\\\\\\\\65st%20test.css);\\\\n@import url('./t\\\\\\\\65st%20test.css');\\\\n@import url(\\\\\\"./t\\\\\\\\65st%20test.css\\\\\\");\\\\n@import \\\\\\"./t\\\\\\\\65st%20test.css\\\\\\";\\\\n@import './t\\\\\\\\65st%20test.css';\\\\n@import url(                 test.css                      );\\\\n@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css');\\\\n@import url(test.css?foo=bar);\\\\n@import url(test.css?foo=bar#hash);\\\\n@import url(test.css?#hash);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex) screen and (orientation:landscape);\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css');\\\\n@import url('something.css');\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar');\\\\n@import url('something.css?foo=bar');\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar#hash');\\\\n@import url('something.css?foo=bar#hash');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar');\\\\n@import url('something.css?bar=foo');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar#one');\\\\n@import url('something.css?foo=bar#two');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=1&bar=2');\\\\n@import url('something.css?foo=2&bar=1');\\\\n\\", \\"\\"]);
@@ -1989,7 +1989,7 @@ import ___CSS_LOADER_AT_RULE_IMPORT_23___ from \\"-!../../../src/index.js??[iden
 import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??[ident]!./something.css?foo=2&bar=1\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);

Diff for: test/__snapshots__/importLoaders-option.test.js.snap

@@ -7,7 +7,7 @@ exports[`"importLoaders" option should work when not specified: module 1`] = `
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js!./imported.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"-!../../../src/index.js!./other-imported.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
 // Module
@@ -58,7 +58,7 @@ exports[`"importLoaders" option should work with a value equal to ""1"" ("postcs
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"-!../../../src/index.js??[ident]!./other-imported.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
 // Module
@@ -109,7 +109,7 @@ exports[`"importLoaders" option should work with a value equal to "0" (\`postcss
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"-!../../../src/index.js??[ident]!./other-imported.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
 // Module
@@ -160,7 +160,7 @@ exports[`"importLoaders" option should work with a value equal to "1" ("postcss-
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"-!../../../src/index.js??[ident]!./other-imported.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
 // Module
@@ -211,7 +211,7 @@ exports[`"importLoaders" option should work with a value equal to "1" (no loader
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"-!../../../src/index.js??[ident]!./other-imported.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
 // Module
@@ -262,7 +262,7 @@ exports[`"importLoaders" option should work with a value equal to "2" ("postcss-
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"-!../../../src/index.js??[ident]!./other-imported.css\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
 // Module

Diff for: test/__snapshots__/loader.test.js.snap

@@ -5,7 +5,7 @@ exports[`loader issue #1033 (2): errors 1`] = `Array []`;
 exports[`loader issue #1033 (2): module 1`] = `
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, \\"\\", \\"\\"]);
 // Exports
@@ -47,7 +47,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img1x.png\\";
 import ___CSS_LOADER_URL_IMPORT_1___ from \\"./img2x.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
 // Module
@@ -177,7 +177,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../src/index.js!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./url/img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
@@ -347,7 +347,7 @@ exports[`loader should work with "sass-loader": errors 1`] = `Array []`;
 exports[`loader should work with "sass-loader": module 1`] = `
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, \\"body {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333;\\\\n}\\", \\"\\"]);
 // Exports
@@ -387,7 +387,7 @@ exports[`loader should work with empty css: errors 1`] = `Array []`;
 exports[`loader should work with empty css: module 1`] = `
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, \\"\\", \\"\\"]);
 // Exports
@@ -415,7 +415,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./url/img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
@@ -675,7 +675,7 @@ import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../src/index.js??[ident]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
 import ___CSS_LOADER_URL_IMPORT_0___ from \\"./url/img.png\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module

Diff for: test/__snapshots__/modules-option.test.js.snap

@@ -2,7 +2,10 @@
  * @jest-environment jsdom
  */
 
+/* eslint-disable func-names */
+
 const api = require('../../src/runtime/api');
+const cssWithMappingToString = require('../../src/runtime/cssWithMappingToString');
 
 describe('api', () => {
   beforeAll(() => {
@@ -24,15 +27,19 @@ describe('api', () => {
   });
 
   it('should toString a single module', () => {
-    const m = api();
+    const m = api(function (i) {
+      return i[1];
+    });
 
     m.push([1, 'body { a: 1; }', '']);
 
     expect(m.toString()).toMatchSnapshot();
   });
 
   it('should toString multiple modules', () => {
-    const m = api();
+    const m = api(function (i) {
+      return i[1];
+    });
 
     m.push([2, 'body { b: 2; }', '']);
     m.push([1, 'body { a: 1; }', '']);
@@ -41,7 +48,9 @@ describe('api', () => {
   });
 
   it('should toString with media query', () => {
-    const m = api();
+    const m = api(function (i) {
+      return i[1];
+    });
 
     const m1 = [1, 'body { a: 1; }', 'screen'];
     const m2 = [2, 'body { b: 2; }', ''];
@@ -57,7 +66,9 @@ describe('api', () => {
   });
 
   it('should import modules', () => {
-    const m = api();
+    const m = api(function (i) {
+      return i[1];
+    });
     const m1 = [1, 'body { a: 1; }', '(orientation:landscape)'];
     const m2 = [2, 'body { b: 2; }', ''];
     const m3 = [3, 'body { c: 3; }', ''];
@@ -73,7 +84,9 @@ describe('api', () => {
   });
 
   it('should import named modules', () => {
-    const m = api();
+    const m = api(function (i) {
+      return i[1];
+    });
     const m1 = ['./module1', 'body { a: 1; }', 'screen'];
     const m2 = ['./module2', 'body { b: 2; }', ''];
     const m3 = ['./module3', 'body { c: 3; }', ''];
@@ -88,7 +101,7 @@ describe('api', () => {
   });
 
   it('should toString with source mapping', () => {
-    const m = api(true);
+    const m = api(cssWithMappingToString);
 
     m.push([
       1,
@@ -106,7 +119,7 @@ describe('api', () => {
   });
 
   it('should toString with a source map without "sourceRoot"', () => {
-    const m = api(true);
+    const m = api(cssWithMappingToString);
 
     m.push([
       1,
@@ -125,7 +138,7 @@ describe('api', () => {
   it('should toString without source mapping if btoa not available', () => {
     global.btoa = null;
 
-    const m = api(true);
+    const m = api(cssWithMappingToString);
 
     m.push([
       1,
@@ -143,7 +156,9 @@ describe('api', () => {
   });
 
   it('should import modules with dedupe', () => {
-    const m = api();
+    const m = api(function (i) {
+      return i[1];
+    });
 
     const m1 = [null, 'body { b: 1; }', ''];
     const m2 = ['./module2', 'body { b: 2; }', ''];
@@ -160,11 +175,14 @@ describe('api', () => {
   });
 
   it('should import modules when module string', () => {
-    const m = api();
+    const m = api(function (i) {
+      return i[1];
+    });
 
     m.i('.button { b: 2; }');
     m.i('');
 
     expect(m.toString()).toMatchSnapshot();
   });
 });
+/* eslint-enable func-names */

Diff for: test/__snapshots__/sourceMap-option.test.js.snap

@@ -501,8 +501,8 @@ describe('"sourceMap" option', () => {
 
       expect(chunkName).toBe(
         webpack.version[0] === '5'
-          ? 'main.f8a941345941e8190135.bundle.js'
-          : 'main.bad4e3fa71e9f3e4c073.bundle.js'
+          ? 'main.02755d36ce181558963d.bundle.js'
+          : 'main.535d928b9abb27709302.bundle.js'
       );
       expect(
         getModuleSource('fixtures/source-map/basic.css', stats)