css-loader 6.2.0 → 6.3.0

package/README.md

@@ -54,69 +54,19 @@ module.exports = {
 
 And run `webpack` via your preferred method.
 
-### `toString`
-
-You can also use the css-loader results directly as a string, such as in Angular's component style.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: ["to-string-loader", "css-loader"],
-      },
-    ],
-  },
-};
-```
-
-or
-
-```js
-const css = require("./test.css").toString();
-
-console.log(css); // {String}
-```
-
-If there are SourceMaps, they will also be included in the result string.
-
-If, for one reason or another, you need to extract CSS as a
-plain string resource (i.e. not wrapped in a JS module) you
-might want to check out the [extract-loader](https://github.com/peerigon/extract-loader).
-It's useful when you, for instance, need to post process the CSS as a string.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: [
-          "handlebars-loader", // handlebars loader expects raw resource string
-          "extract-loader",
-          "css-loader",
-        ],
-      },
-    ],
-  },
-};
-```
+If, for one reason or another, you need to extract CSS as a file (i.e. do not store CSS in a JS module) you might want to check out the [recommend example](https://github.com/webpack-contrib/css-loader#recommend).
 
 ## Options
 
-|                 Name                  |            Type             |      Default       | Description                                                                                                              |
-| :-----------------------------------: | :-------------------------: | :----------------: | :----------------------------------------------------------------------------------------------------------------------- |
-|           **[`url`](#url)**           |     `{Boolean\|Object}`     |       `true`       | Allows to enables/disables `url()`/`image-set()` functions handling                                                      |
-|        **[`import`](#import)**        |     `{Boolean\|Object}`     |       `true`       | Allows to enables/disables `@import` at-rules handling                                                                   |
-|       **[`modules`](#modules)**       | `{Boolean\|String\|Object}` |   `{auto: true}`   | Allows to enables/disables or setup CSS Modules options                                                                  |
-|     **[`sourceMap`](#sourcemap)**     |         `{Boolean}`         | `compiler.devtool` | Enables/Disables generation of source maps                                                                               |
-| **[`importLoaders`](#importloaders)** |         `{Number}`          |        `0`         | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
-|      **[`esModule`](#esmodule)**      |         `{Boolean}`         |       `true`       | Use ES modules syntax                                                                                                    |
+|                 Name                  |                     Type                     |      Default       | Description                                                                                                                                                                                                                                               |
+| :-----------------------------------: | :------------------------------------------: | :----------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|           **[`url`](#url)**           |             `{Boolean\|Object}`              |       `true`       | Allows to enables/disables `url()`/`image-set()` functions handling                                                                                                                                                                                       |
+|        **[`import`](#import)**        |             `{Boolean\|Object}`              |       `true`       | Allows to enables/disables `@import` at-rules handling                                                                                                                                                                                                    |
+|       **[`modules`](#modules)**       |         `{Boolean\|String\|Object}`          |   `{auto: true}`   | Allows to enables/disables or setup CSS Modules options                                                                                                                                                                                                   |
+|     **[`sourceMap`](#sourcemap)**     |                 `{Boolean}`                  | `compiler.devtool` | Enables/Disables generation of source maps                                                                                                                                                                                                                |
+| **[`importLoaders`](#importloaders)** |                  `{Number}`                  |        `0`         | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports                                                                                                                                  |
+|      **[`esModule`](#esmodule)**      |                 `{Boolean}`                  |       `true`       | Use ES modules syntax                                                                                                                                                                                                                                     |
+|    **[`exportType`](#exporttype)**    | `{'array' \| 'string' \| 'css-style-sheet'}` |      `array`       | Allows exporting styles as array with modules, string or [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)) |
 
 ### `url`
 
@@ -745,13 +695,14 @@ For more information on options see:
 
 Supported template strings:
 
-- [name] the basename of the resource
-- [path] the path of the resource relative to the `compiler.context` option or `modules.localIdentContext` option.
-- [file] - filename and path.
-- [ext] - extension with leading .
-- [hash] - the hash of the string, generated based on `localIdentHashSalt`, `localIdentHashFunction`, `localIdentHashDigest`, `localIdentHashDigestLength`, `localIdentContext`, `resourcePath` and `exportName`
-- [<hashFunction>:hash:<hashDigest>:<hashDigestLength>] - hash with hash settings.
-- [local] - original class.
+- `[name]` the basename of the resource
+- `[folder]` the folder the resource relative to the `compiler.context` option or `modules.localIdentContext` option.
+- `[path]` the path of the resource relative to the `compiler.context` option or `modules.localIdentContext` option.
+- `[file]` - filename and path.
+- `[ext]` - extension with leading `.`.
+- `[hash]` - the hash of the string, generated based on `localIdentHashSalt`, `localIdentHashFunction`, `localIdentHashDigest`, `localIdentHashDigestLength`, `localIdentContext`, `resourcePath` and `exportName`
+- `[<hashFunction>:hash:<hashDigest>:<hashDigestLength>]` - hash with hash settings.
+- `[local]` - original class.
 
 Recommendations:
 
@@ -1290,6 +1241,203 @@ module.exports = {
 };
 ```
 
+### `exportType`
+
+Type: `'array' | 'string' | 'css-style-sheet'`
+Default: `'array'`
+
+Allows exporting styles as array with modules, string or [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)).
+Default value is `'array'`, i.e. loader exports array of modules with specific API which is used in `style-loader` or other.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        assert: { type: "css" },
+        loader: "css-loader",
+        options: {
+          exportType: "css-style-sheet",
+        },
+      },
+    ],
+  },
+};
+```
+
+**src/index.js**
+
+```js
+import sheet from "./styles.css" assert { type: "css" };
+
+document.adoptedStyleSheets = [sheet];
+shadowRoot.adoptedStyleSheets = [sheet];
+```
+
+#### `'array'`
+
+The default export is array of modules with specific API which is used in `style-loader` or other.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/i,
+        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
+      },
+    ],
+  },
+};
+```
+
+**src/index.js**
+
+```js
+// `style-loader` applies styles to DOM
+import "./styles.css";
+```
+
+#### `'string'`
+
+> ⚠ You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
+> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
+
+The default export is `string`.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/i,
+        use: ["css-loader", "postcss-loader", "sass-loader"],
+      },
+    ],
+  },
+};
+```
+
+**src/index.js**
+
+```js
+import sheet from "./styles.css";
+
+console.log(sheet);
+```
+
+#### `'css-style-sheet'`
+
+> ⚠ `@import` rules not yet allowed, more [information](https://web.dev/css-module-scripts/#@import-rules-not-yet-allowed)
+> ⚠ You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
+> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
+> ⚠ Source maps are not currently supported in `Chrome` due [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2)
+
+The default export is a [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)).
+
+Useful for [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) and shadow DOM.
+
+More information:
+
+- [Using CSS Module Scripts to import stylesheets](https://web.dev/css-module-scripts/)
+- [Constructable Stylesheets: seamless reusable styles](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        assert: { type: "css" },
+        loader: "css-loader",
+        options: {
+          exportType: "css-style-sheet",
+        },
+      },
+
+      // For Sass/SCSS:
+      //
+      // {
+      //   assert: { type: "css" },
+      //   rules: [
+      //     {
+      //       loader: "css-loader",
+      //       options: {
+      //         exportType: "css-style-sheet",
+      //         // Other options
+      //       },
+      //     },
+      //     {
+      //       loader: "sass-loader",
+      //       options: {
+      //         // Other options
+      //       },
+      //     },
+      //   ],
+      // },
+    ],
+  },
+};
+```
+
+**src/index.js**
+
+```js
+// Example for Sass/SCSS:
+// import sheet from "./styles.scss" assert { type: "css" };
+
+// Example for CSS modules:
+// import sheet, { myClass } from "./styles.scss" assert { type: "css" };
+
+// Example for CSS:
+import sheet from "./styles.css" assert { type: "css" };
+
+document.adoptedStyleSheets = [sheet];
+shadowRoot.adoptedStyleSheets = [sheet];
+```
+
+For migration purposes, you can use the following configuration:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        oneOf: [
+          {
+            assert: { type: "css" },
+            loader: "css-loader",
+            options: {
+              exportType: "css-style-sheet",
+              // Other options
+            },
+          },
+          {
+            use: [
+              "style-loader",
+              {
+                loader: "css-loader",
+                options: {
+                  // Other options
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Recommend
@@ -1310,7 +1458,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(sa|sc|c)ss$/,
+        test: /\.(sa|sc|c)ss$/i,
         use: [
           devMode ? "style-loader" : MiniCssExtractPlugin.loader,
           "css-loader",
@@ -1533,8 +1681,8 @@ module.exports = {
       // --------
       // SCSS ALL EXCEPT MODULES
       {
-        test: /\.scss$/,
-        exclude: /\.module\.scss$/,
+        test: /\.scss$/i,
+        exclude: /\.module\.scss$/i,
         use: [
           {
             loader: "style-loader",
@@ -1556,7 +1704,7 @@ module.exports = {
       // --------
       // SCSS MODULES
       {
-        test: /\.module\.scss$/,
+        test: /\.module\.scss$/i,
         use: [
           {
             loader: "style-loader",

package/dist/index.js

@@ -51,22 +51,12 @@ async function loader(content, map, meta) {
   const importPluginApi = [];
 
   if ((0, _utils.shouldUseImportPlugin)(options)) {
-    const resolver = this.getResolve({
-      dependencyType: "css",
-      conditionNames: ["style"],
-      mainFields: ["css", "style", "main", "..."],
-      mainFiles: ["index", "..."],
-      extensions: [".css", "..."],
-      preferRelative: true
-    });
     plugins.push((0, _plugins.importParser)({
+      isCSSStyleSheet: options.exportType === "css-style-sheet",
+      loaderContext: this,
       imports: importPluginImports,
       api: importPluginApi,
-      context: this.context,
-      rootContext: this.rootContext,
-      resourcePath: this.resourcePath,
-      filter: (0, _utils.getFilter)(options.import.filter, this.resourcePath),
-      resolver,
+      filter: options.import.filter,
       urlHandler: url => (0, _utils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
     }));
   }
@@ -99,22 +89,12 @@ async function loader(content, map, meta) {
   const needToUseIcssPlugin = (0, _utils.shouldUseIcssPlugin)(options);
 
   if (needToUseIcssPlugin) {
-    const icssResolver = this.getResolve({
-      dependencyType: "icss",
-      conditionNames: ["style"],
-      extensions: ["..."],
-      mainFields: ["css", "style", "main", "..."],
-      mainFiles: ["index", "..."],
-      preferRelative: true
-    });
     plugins.push((0, _plugins.icssParser)({
+      loaderContext: this,
       imports: icssPluginImports,
       api: icssPluginApi,
       replacements,
       exports,
-      context: this.context,
-      rootContext: this.rootContext,
-      resolver: icssResolver,
       urlHandler: url => (0, _utils.stringifyRequest)(this, (0, _utils.combineRequests)((0, _utils.getPreRequester)(this)(options.importLoaders), url))
     }));
   } // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
@@ -172,9 +152,13 @@ async function loader(content, map, meta) {
 
     if (options.sourceMap) {
       imports.unshift({
-        type: "api_sourcemap_import",
         importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
-        url: (0, _utils.stringifyRequest)(this, require.resolve("./runtime/cssWithMappingToString"))
+        url: (0, _utils.stringifyRequest)(this, require.resolve("./runtime/sourceMaps"))
+      });
+    } else {
+      imports.unshift({
+        importName: "___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___",
+        url: (0, _utils.stringifyRequest)(this, require.resolve("./runtime/noSourceMaps"))
       });
     }
   }

package/dist/options.json

@@ -193,6 +193,11 @@
       "description": "Use the ES modules syntax.",
       "link": "https://github.com/webpack-contrib/css-loader#esmodule",
       "type": "boolean"
+    },
+    "exportType": {
+      "description": "Allows exporting styles as array with modules, string or constructable stylesheet (i.e. `CSSStyleSheet`).",
+      "link": "https://github.com/webpack-contrib/css-loader#exporttype",
+      "enum": ["array", "string", "css-style-sheet"]
     }
   },
   "type": "object"

package/dist/plugins/postcss-icss-parser.js

@@ -20,7 +20,18 @@ const plugin = (options = {}) => {
         icssExports
       } = (0, _icssUtils.extractICSS)(root);
       const imports = new Map();
-      const tasks = []; // eslint-disable-next-line guard-for-in
+      const tasks = [];
+      const {
+        loaderContext
+      } = options;
+      const resolver = loaderContext.getResolve({
+        dependencyType: "icss",
+        conditionNames: ["style"],
+        extensions: ["..."],
+        mainFields: ["css", "style", "main", "..."],
+        mainFiles: ["index", "..."],
+        preferRelative: true
+      }); // eslint-disable-next-line guard-for-in
 
       for (const url in icssImports) {
         const tokens = icssImports[url];
@@ -39,14 +50,10 @@ const plugin = (options = {}) => {
           prefix = queryParts.join("!");
         }
 
-        const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), options.rootContext);
+        const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), loaderContext.rootContext);
 
         const doResolve = async () => {
-          const {
-            resolver,
-            context
-          } = options;
-          const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([normalizedUrl, request])]);
+          const resolvedUrl = await (0, _utils.resolveRequests)(resolver, loaderContext.context, [...new Set([normalizedUrl, request])]);
 
           if (!resolvedUrl) {
             return;

package/dist/plugins/postcss-import-parser.js

@@ -43,9 +43,10 @@ function parseNode(atRule, key) {
     throw error;
   }
 
+  const rawParams = atRule.raws && atRule.raws[key] && typeof atRule.raws[key].raw !== "undefined" ? atRule.raws[key].raw : atRule[key];
   const {
     nodes: paramsNodes
-  } = (0, _postcssValueParser.default)(atRule[key]); // No nodes - `@import ;`
+  } = (0, _postcssValueParser.default)(rawParams); // No nodes - `@import ;`
   // Invalid type - `@import foo-bar;`
 
   if (paramsNodes.length === 0 || paramsNodes[0].type !== "string" && paramsNodes[0].type !== "function") {
@@ -92,11 +93,42 @@ function parseNode(atRule, key) {
     throw error;
   }
 
-  const mediaNodes = paramsNodes.slice(1);
+  const additionalNodes = paramsNodes.slice(1);
+  let supports;
+  let layer;
   let media;
 
-  if (mediaNodes.length > 0) {
-    media = _postcssValueParser.default.stringify(mediaNodes).trim().toLowerCase();
+  if (additionalNodes.length > 0) {
+    let nodes = [];
+
+    for (const node of additionalNodes) {
+      nodes.push(node);
+      const isLayerFunction = node.type === "function" && node.value.toLowerCase() === "layer";
+      const isLayerWord = node.type === "word" && node.value.toLowerCase() === "layer";
+
+      if (isLayerFunction || isLayerWord) {
+        if (isLayerFunction) {
+          nodes.splice(nodes.length - 1, 1, ...node.nodes);
+        } else {
+          nodes.splice(nodes.length - 1, 1, {
+            type: "string",
+            value: "",
+            unclosed: false
+          });
+        }
+
+        layer = _postcssValueParser.default.stringify(nodes).trim().toLowerCase();
+        nodes = [];
+      } else if (node.type === "function" && node.value.toLowerCase() === "supports") {
+        nodes.splice(nodes.length - 1, 1, ...node.nodes);
+        supports = _postcssValueParser.default.stringify(nodes).trim().toLowerCase();
+        nodes = [];
+      }
+    }
+
+    if (nodes.length > 0) {
+      media = _postcssValueParser.default.stringify(nodes).trim().toLowerCase();
+    }
   } // eslint-disable-next-line consistent-return
 
 
@@ -104,6 +136,8 @@ function parseNode(atRule, key) {
     atRule,
     prefix,
     url,
+    layer,
+    supports,
     media,
     isRequestable
   };
@@ -118,6 +152,11 @@ const plugin = (options = {}) => {
       return {
         AtRule: {
           import(atRule) {
+            if (options.isCSSStyleSheet) {
+              options.loaderContext.emitError(new Error(atRule.error("'@import' rules are not allowed here and will not be processed").message));
+              return;
+            }
+
             let parsedAtRule;
 
             try {
@@ -142,17 +181,30 @@ const plugin = (options = {}) => {
             return;
           }
 
+          const {
+            loaderContext
+          } = options;
+          const resolver = loaderContext.getResolve({
+            dependencyType: "css",
+            conditionNames: ["style"],
+            mainFields: ["css", "style", "main", "..."],
+            mainFiles: ["index", "..."],
+            extensions: [".css", "..."],
+            preferRelative: true
+          });
           const resolvedAtRules = await Promise.all(parsedAtRules.map(async parsedAtRule => {
             const {
               atRule,
               isRequestable,
               prefix,
               url,
+              layer,
+              supports,
               media
             } = parsedAtRule;
 
             if (options.filter) {
-              const needKeep = await options.filter(url, media);
+              const needKeep = await options.filter(url, media, loaderContext.resourcePath, supports, layer);
 
               if (!needKeep) {
                 return;
@@ -160,18 +212,14 @@ const plugin = (options = {}) => {
             }
 
             if (isRequestable) {
-              const request = (0, _utils.requestify)(url, options.rootContext);
-              const {
-                resolver,
-                context
-              } = options;
-              const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([request, url])]);
+              const request = (0, _utils.requestify)(url, loaderContext.rootContext);
+              const resolvedUrl = await (0, _utils.resolveRequests)(resolver, loaderContext.context, [...new Set([request, url])]);
 
               if (!resolvedUrl) {
                 return;
               }
 
-              if (resolvedUrl === options.resourcePath) {
+              if (resolvedUrl === loaderContext.resourcePath) {
                 atRule.remove();
                 return;
               }
@@ -180,6 +228,8 @@ const plugin = (options = {}) => {
 
               return {
                 url: resolvedUrl,
+                layer,
+                supports,
                 media,
                 prefix,
                 isRequestable
@@ -190,6 +240,8 @@ const plugin = (options = {}) => {
 
             return {
               url,
+              layer,
+              supports,
               media,
               prefix,
               isRequestable
@@ -208,12 +260,16 @@ const plugin = (options = {}) => {
             const {
               url,
               isRequestable,
+              layer,
+              supports,
               media
             } = resolvedAtRule;
 
             if (!isRequestable) {
               options.api.push({
                 url,
+                layer,
+                supports,
                 media,
                 index
               }); // eslint-disable-next-line no-continue
@@ -240,6 +296,8 @@ const plugin = (options = {}) => {
 
             options.api.push({
               importName,
+              layer,
+              supports,
               media,
               index
             });

package/dist/runtime/api.js

@@ -4,37 +4,55 @@
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
-// css base code, injected by the css-loader
-// eslint-disable-next-line func-names
 module.exports = function (cssWithMappingToString) {
   var list = []; // return the list of modules as css string
 
   list.toString = function toString() {
     return this.map(function (item) {
-      var content = cssWithMappingToString(item);
+      var content = "";
+      var needLayer = typeof item[5] !== "undefined";
+
+      if (item[4]) {
+        content += "@supports (".concat(item[4], ") {");
+      }
+
+      if (item[2]) {
+        content += "@media ".concat(item[2], " {");
+      }
+
+      if (needLayer) {
+        content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
+      }
+
+      content += cssWithMappingToString(item);
+
+      if (needLayer) {
+        content += "}";
+      }
 
       if (item[2]) {
-        return "@media ".concat(item[2], " {").concat(content, "}");
+        content += "}";
+      }
+
+      if (item[4]) {
+        content += "}";
       }
 
       return content;
     }).join("");
   }; // import a list of modules into the list
-  // eslint-disable-next-line func-names
 
 
-  list.i = function (modules, mediaQuery, dedupe) {
+  list.i = function i(modules, media, dedupe, supports, layer) {
     if (typeof modules === "string") {
-      // eslint-disable-next-line no-param-reassign
-      modules = [[null, modules, ""]];
+      modules = [[null, modules, undefined]];
     }
 
     var alreadyImportedModules = {};
 
     if (dedupe) {
-      for (var i = 0; i < this.length; i++) {
-        // eslint-disable-next-line prefer-destructuring
-        var id = this[i][0];
+      for (var _i = 0; _i < this.length; _i++) {
+        var id = this[_i][0];
 
         if (id != null) {
           alreadyImportedModules[id] = true;
@@ -42,19 +60,37 @@ module.exports = function (cssWithMappingToString) {
       }
     }
 
-    for (var _i = 0; _i < modules.length; _i++) {
-      var item = [].concat(modules[_i]);
+    for (var _i2 = 0; _i2 < modules.length; _i2++) {
+      var item = [].concat(modules[_i2]);
 
       if (dedupe && alreadyImportedModules[item[0]]) {
-        // eslint-disable-next-line no-continue
         continue;
       }
 
-      if (mediaQuery) {
+      if (typeof layer !== "undefined") {
+        if (typeof item[5] === "undefined") {
+          item[5] = layer;
+        } else {
+          item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
+          item[5] = layer;
+        }
+      }
+
+      if (media) {
         if (!item[2]) {
-          item[2] = mediaQuery;
+          item[2] = media;
+        } else {
+          item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
+          item[2] = media;
+        }
+      }
+
+      if (supports) {
+        if (!item[4]) {
+          item[4] = "".concat(supports);
         } else {
-          item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
+          item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
+          item[4] = supports;
         }
       }
 

package/dist/runtime/getUrl.js

@@ -2,24 +2,20 @@
 
 module.exports = function (url, options) {
   if (!options) {
-    // eslint-disable-next-line no-param-reassign
     options = {};
   }
 
   if (!url) {
     return url;
-  } // eslint-disable-next-line no-underscore-dangle, no-param-reassign
-
+  }
 
   url = String(url.__esModule ? url.default : url); // If url is already wrapped in quotes, remove them
 
   if (/^['"].*['"]$/.test(url)) {
-    // eslint-disable-next-line no-param-reassign
     url = url.slice(1, -1);
   }
 
   if (options.hash) {
-    // eslint-disable-next-line no-param-reassign
     url += options.hash;
   } // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls

package/dist/runtime/noSourceMaps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = function (i) {
+  return i[1];
+};

package/dist/runtime/sourceMaps.js

@@ -0,0 +1,22 @@
+"use strict";
+
+module.exports = function (item) {
+  var content = item[1];
+  var cssMapping = item[3];
+
+  if (!cssMapping) {
+    return content;
+  }
+
+  if (typeof btoa === "function") {
+    var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping))));
+    var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
+    var sourceMapping = "/*# ".concat(data, " */");
+    var sourceURLs = cssMapping.sources.map(function (source) {
+      return "/*# sourceURL=".concat(cssMapping.sourceRoot || "").concat(source, " */");
+    });
+    return [content].concat(sourceURLs).concat([sourceMapping]).join("\n");
+  }
+
+  return [content].join("\n");
+};

package/dist/utils.js

@@ -313,14 +313,20 @@ function escapeLocalIdent(localident) {
 }
 
 function defaultGetLocalIdent(loaderContext, localIdentName, localName, options) {
-  let relativeMatchResource = ""; // eslint-disable-next-line no-underscore-dangle
+  let relativeMatchResource = "";
+  const {
+    context
+  } = options;
+  const {
+    resourcePath
+  } = loaderContext; // eslint-disable-next-line no-underscore-dangle
 
   if (loaderContext._module && loaderContext._module.matchResource) {
     relativeMatchResource = `${normalizePath( // eslint-disable-next-line no-underscore-dangle
-    _path.default.relative(options.context, loaderContext._module.matchResource))}\x00`;
+    _path.default.relative(context, loaderContext._module.matchResource))}\x00`;
   }
 
-  const relativeResourcePath = normalizePath(_path.default.relative(options.context, loaderContext.resourcePath)); // eslint-disable-next-line no-param-reassign
+  const relativeResourcePath = normalizePath(_path.default.relative(context, resourcePath)); // eslint-disable-next-line no-param-reassign
 
   options.content = `${relativeMatchResource}${relativeResourcePath}\x00${localName}`;
   let {
@@ -328,13 +334,13 @@ function defaultGetLocalIdent(loaderContext, localIdentName, localName, options)
     hashDigest,
     hashDigestLength
   } = options;
-  const mathes = localIdentName.match(/\[(?:([^:\]]+):)?(?:(hash|contenthash|fullhash))(?::([a-z]+\d*))?(?::(\d+))?\]/i);
+  const matches = localIdentName.match(/\[(?:([^:\]]+):)?(?:(hash|contenthash|fullhash))(?::([a-z]+\d*))?(?::(\d+))?\]/i);
 
-  if (mathes) {
-    const hashName = mathes[2] || hashFunction;
-    hashFunction = mathes[1] || hashFunction;
-    hashDigest = mathes[3] || hashDigest;
-    hashDigestLength = mathes[4] || hashDigestLength; // `hash` and `contenthash` are same in `loader-utils` context
+  if (matches) {
+    const hashName = matches[2] || hashFunction;
+    hashFunction = matches[1] || hashFunction;
+    hashDigest = matches[3] || hashDigest;
+    hashDigestLength = matches[4] || hashDigestLength; // `hash` and `contenthash` are same in `loader-utils` context
     // let's keep `hash` for backward compatibility
     // eslint-disable-next-line no-param-reassign
 
@@ -355,13 +361,13 @@ function defaultGetLocalIdent(loaderContext, localIdentName, localName, options)
   hash.update(options.content);
   const localIdentHash = hash.digest(hashDigest).slice(0, hashDigestLength).replace(/[/+]/g, "_").replace(/^\d/g, "_"); // TODO need improve on webpack side, we should allow to pass hash/contentHash without chunk property, also `data` for `getPath` should be looks good without chunk property
 
-  const ext = _path.default.extname(loaderContext.resourcePath);
+  const ext = _path.default.extname(resourcePath);
 
-  const base = _path.default.basename(loaderContext.resourcePath);
+  const base = _path.default.basename(resourcePath);
 
   const name = base.slice(0, base.length - ext.length);
   const data = {
-    filename: _path.default.relative(options.context, loaderContext.resourcePath),
+    filename: _path.default.relative(context, resourcePath),
     contentHash: localIdentHash,
     chunk: {
       name,
@@ -372,8 +378,22 @@ function defaultGetLocalIdent(loaderContext, localIdentName, localName, options)
 
   let result = loaderContext._compilation.getPath(localIdentName, data);
 
+  if (/\[folder\]/gi.test(result)) {
+    const dirname = _path.default.dirname(resourcePath);
+
+    let directory = normalizePath(_path.default.relative(context, `${dirname + _path.default.sep}_`));
+    directory = directory.substr(0, directory.length - 1);
+    let folder = "";
+
+    if (directory.length > 1) {
+      folder = _path.default.basename(directory);
+    }
+
+    result = result.replace(/\[folder\]/gi, () => folder);
+  }
+
   if (options.regExp) {
-    const match = loaderContext.resourcePath.match(options.regExp);
+    const match = resourcePath.match(options.regExp);
 
     if (match) {
       match.forEach((matched, i) => {
@@ -462,22 +482,14 @@ function getFilter(filter, resourcePath) {
 }
 
 function getValidLocalName(localName, exportLocalsConvention) {
-  if (typeof exportLocalsConvention === "function") {
-    const result = exportLocalsConvention(localName);
-    return Array.isArray(result) ? result[0] : result;
-  }
-
-  if (exportLocalsConvention === "dashesOnly") {
-    return dashesCamelCase(localName);
-  }
-
-  return camelCase(localName);
+  const result = exportLocalsConvention(localName);
+  return Array.isArray(result) ? result[0] : result;
 }
 
 const IS_MODULES = /\.module(s)?\.\w+$/i;
 const IS_ICSS = /\.icss\.\w+$/i;
 
-function getModulesOptions(rawOptions, loaderContext) {
+function getModulesOptions(rawOptions, exportType, loaderContext) {
   if (typeof rawOptions.modules === "boolean" && rawOptions.modules === false) {
     return false;
   }
@@ -507,6 +519,7 @@ function getModulesOptions(rawOptions, loaderContext) {
   const {
     outputOptions
   } = loaderContext._compilation;
+  const needNamedExport = exportType === "css-style-sheet" || exportType === "string";
   const modulesOptions = {
     auto,
     mode: "local",
@@ -521,11 +534,44 @@ function getModulesOptions(rawOptions, loaderContext) {
     localIdentRegExp: undefined,
     // eslint-disable-next-line no-undefined
     getLocalIdent: undefined,
-    namedExport: false,
-    exportLocalsConvention: rawModulesOptions.namedExport === true && typeof rawModulesOptions.exportLocalsConvention === "undefined" ? "camelCaseOnly" : "asIs",
+    namedExport: needNamedExport || false,
+    exportLocalsConvention: (rawModulesOptions.namedExport === true || needNamedExport) && typeof rawModulesOptions.exportLocalsConvention === "undefined" ? "camelCaseOnly" : "asIs",
     exportOnlyLocals: false,
     ...rawModulesOptions
   };
+  let exportLocalsConventionType;
+
+  if (typeof modulesOptions.exportLocalsConvention === "string") {
+    exportLocalsConventionType = modulesOptions.exportLocalsConvention;
+
+    modulesOptions.exportLocalsConvention = name => {
+      switch (exportLocalsConventionType) {
+        case "camelCase":
+          {
+            return [name, camelCase(name)];
+          }
+
+        case "camelCaseOnly":
+          {
+            return camelCase(name);
+          }
+
+        case "dashes":
+          {
+            return [name, dashesCamelCase(name)];
+          }
+
+        case "dashesOnly":
+          {
+            return dashesCamelCase(name);
+          }
+
+        case "asIs":
+        default:
+          return name;
+      }
+    };
+  }
 
   if (typeof modulesOptions.auto === "boolean") {
     const isModules = modulesOptions.auto && IS_MODULES.test(resourcePath);
@@ -560,12 +606,22 @@ function getModulesOptions(rawOptions, loaderContext) {
     modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath);
   }
 
+  if (needNamedExport) {
+    if (rawOptions.esModule === false) {
+      throw new Error("The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModules' option to be enabled");
+    }
+
+    if (modulesOptions.namedExport === false) {
+      throw new Error("The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'modules.namedExport' option to be enabled");
+    }
+  }
+
   if (modulesOptions.namedExport === true) {
     if (rawOptions.esModule === false) {
-      throw new Error('The "modules.namedExport" option requires the "esModules" option to be enabled');
+      throw new Error("The 'modules.namedExport' option requires the 'esModules' option to be enabled");
     }
 
-    if (typeof modulesOptions.exportLocalsConvention === "string" && modulesOptions.exportLocalsConvention !== "camelCaseOnly" && modulesOptions.exportLocalsConvention !== "dashesOnly") {
+    if (typeof exportLocalsConventionType === "string" && exportLocalsConventionType !== "camelCaseOnly" && exportLocalsConventionType !== "dashesOnly") {
       throw new Error('The "modules.namedExport" option requires the "modules.exportLocalsConvention" option to be "camelCaseOnly" or "dashesOnly"');
     }
   }
@@ -574,14 +630,16 @@ function getModulesOptions(rawOptions, loaderContext) {
 }
 
 function normalizeOptions(rawOptions, loaderContext) {
-  const modulesOptions = getModulesOptions(rawOptions, loaderContext);
+  const exportType = typeof rawOptions.exportType === "undefined" ? "array" : rawOptions.exportType;
+  const modulesOptions = getModulesOptions(rawOptions, exportType, loaderContext);
   return {
     url: typeof rawOptions.url === "undefined" ? true : rawOptions.url,
     import: typeof rawOptions.import === "undefined" ? true : rawOptions.import,
     modules: modulesOptions,
     sourceMap: typeof rawOptions.sourceMap === "boolean" ? rawOptions.sourceMap : loaderContext.sourceMap,
     importLoaders: typeof rawOptions.importLoaders === "string" ? parseInt(rawOptions.importLoaders, 10) : rawOptions.importLoaders,
-    esModule: typeof rawOptions.esModule === "undefined" ? true : rawOptions.esModule
+    esModule: typeof rawOptions.esModule === "undefined" ? true : rawOptions.esModule,
+    exportType
   };
 }
 
@@ -810,6 +868,34 @@ function normalizeSourceMapForRuntime(map, loaderContext) {
   return JSON.stringify(resultMap);
 }
 
+function printParams(media, dedupe, supports, layer) {
+  let result = "";
+
+  if (typeof layer !== "undefined") {
+    result = `, ${JSON.stringify(layer)}`;
+  }
+
+  if (typeof supports !== "undefined") {
+    result = `, ${JSON.stringify(supports)}${result}`;
+  } else if (result.length > 0) {
+    result = `, undefined${result}`;
+  }
+
+  if (dedupe) {
+    result = `, true${result}`;
+  } else if (result.length > 0) {
+    result = `, false${result}`;
+  }
+
+  if (media) {
+    result = `${JSON.stringify(media)}${result}`;
+  } else if (result.length > 0) {
+    result = `""${result}`;
+  }
+
+  return result;
+}
+
 function getModuleCode(result, api, replacements, options, loaderContext) {
   if (options.modules.exportOnlyLocals === true) {
     return "";
@@ -817,15 +903,25 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
 
   const sourceMapValue = options.sourceMap ? `,${normalizeSourceMapForRuntime(result.map, loaderContext)}` : "";
   let code = JSON.stringify(result.css);
-  let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${options.sourceMap ? "___CSS_LOADER_API_SOURCEMAP_IMPORT___" : "function(i){return i[1]}"});\n`;
+  let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${options.sourceMap ? "___CSS_LOADER_API_SOURCEMAP_IMPORT___" : "___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___"});\n`;
 
   for (const item of api) {
     const {
       url,
+      layer,
+      supports,
       media,
       dedupe
     } = item;
-    beforeCode += url ? `___CSS_LOADER_EXPORT___.push([module.id, ${JSON.stringify(`@import url(${url});`)}${media ? `, ${JSON.stringify(media)}` : ""}]);\n` : `___CSS_LOADER_EXPORT___.i(${item.importName}${media ? `, ${JSON.stringify(media)}` : dedupe ? ', ""' : ""}${dedupe ? ", true" : ""});\n`;
+
+    if (url) {
+      // eslint-disable-next-line no-undefined
+      const printedParam = printParams(media, undefined, supports, layer);
+      beforeCode += `___CSS_LOADER_EXPORT___.push([module.id, ${JSON.stringify(`@import url(${url});`)}${printedParam.length > 0 ? `, ${printedParam}` : ""}]);\n`;
+    } else {
+      const printedParam = printParams(media, dedupe, supports, layer);
+      beforeCode += `___CSS_LOADER_EXPORT___.i(${item.importName}${printedParam.length > 0 ? `, ${printedParam}` : ""});\n`;
+    }
   }
 
   for (const item of replacements) {
@@ -847,7 +943,14 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
       beforeCode += `var ${replacementName} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});\n`;
       code = code.replace(new RegExp(replacementName, "g"), () => `" + ${replacementName} + "`);
     }
-  }
+  } // Indexes description:
+  // 0 - module id
+  // 1 - CSS code
+  // 2 - media
+  // 3 - source map
+  // 4 - supports
+  // 5 - layer
+
 
   return `${beforeCode}// Module\n___CSS_LOADER_EXPORT___.push([module.id, ${code}, ""${sourceMapValue}]);\n`;
 }
@@ -856,107 +959,92 @@ function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
 
-function getExportCode(exports, replacements, needToUseIcssPlugin, options) {
+function getExportCode(exports, replacements, icssPluginUsed, options) {
   let code = "// Exports\n";
 
-  if (!needToUseIcssPlugin) {
-    code += `${options.esModule ? "export default" : "module.exports ="} ___CSS_LOADER_EXPORT___;\n`;
-    return code;
-  }
+  if (icssPluginUsed) {
+    let localsCode = "";
 
-  let localsCode = "";
+    const addExportToLocalsCode = (names, value) => {
+      const normalizedNames = Array.isArray(names) ? new Set(names) : new Set([names]);
 
-  const addExportToLocalsCode = (names, value) => {
-    const normalizedNames = Array.isArray(names) ? new Set(names) : new Set([names]);
+      for (const name of normalizedNames) {
+        if (options.modules.namedExport) {
+          localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
+        } else {
+          if (localsCode) {
+            localsCode += `,\n`;
+          }
 
-    for (const name of normalizedNames) {
-      if (options.modules.namedExport) {
-        localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
-      } else {
-        if (localsCode) {
-          localsCode += `,\n`;
+          localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
         }
-
-        localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
       }
+    };
+
+    for (const {
+      name,
+      value
+    } of exports) {
+      addExportToLocalsCode(options.modules.exportLocalsConvention(name), value);
     }
-  };
 
-  for (const {
-    name,
-    value
-  } of exports) {
-    if (typeof options.modules.exportLocalsConvention === "function") {
-      addExportToLocalsCode(options.modules.exportLocalsConvention(name), value); // eslint-disable-next-line no-continue
+    for (const item of replacements) {
+      const {
+        replacementName,
+        localName
+      } = item;
 
-      continue;
+      if (localName) {
+        const {
+          importName
+        } = item;
+        localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => {
+          if (options.modules.namedExport) {
+            return `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "`;
+          } else if (options.modules.exportOnlyLocals) {
+            return `" + ${importName}[${JSON.stringify(localName)}] + "`;
+          }
+
+          return `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
+        });
+      } else {
+        localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => `" + ${replacementName} + "`);
+      }
     }
 
-    switch (options.modules.exportLocalsConvention) {
-      case "camelCase":
-        {
-          const modifiedName = camelCase(name);
-          addExportToLocalsCode([name, modifiedName], value);
-          break;
-        }
-
-      case "camelCaseOnly":
-        {
-          addExportToLocalsCode(camelCase(name), value);
-          break;
-        }
+    if (options.modules.exportOnlyLocals) {
+      code += options.modules.namedExport ? localsCode : `${options.esModule ? "export default" : "module.exports ="} {\n${localsCode}\n};\n`;
+      return code;
+    }
 
-      case "dashes":
-        {
-          const modifiedName = dashesCamelCase(name);
-          addExportToLocalsCode([name, modifiedName], value);
-          break;
-        }
+    code += options.modules.namedExport ? localsCode : `___CSS_LOADER_EXPORT___.locals = {${localsCode ? `\n${localsCode}\n` : ""}};\n`;
+  }
 
-      case "dashesOnly":
-        {
-          addExportToLocalsCode(dashesCamelCase(name), value);
-          break;
-        }
+  const isCSSStyleSheetExport = options.exportType === "css-style-sheet";
 
-      case "asIs":
-      default:
-        addExportToLocalsCode(name, value);
-        break;
-    }
+  if (isCSSStyleSheetExport) {
+    code += "var ___CSS_LOADER_STYLE_SHEET___ = new CSSStyleSheet();\n";
+    code += "___CSS_LOADER_STYLE_SHEET___.replaceSync(___CSS_LOADER_EXPORT___.toString());\n";
   }
 
-  for (const item of replacements) {
-    const {
-      replacementName,
-      localName
-    } = item;
+  let finalExport;
 
-    if (localName) {
-      const {
-        importName
-      } = item;
-      localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => {
-        if (options.modules.namedExport) {
-          return `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "`;
-        } else if (options.modules.exportOnlyLocals) {
-          return `" + ${importName}[${JSON.stringify(localName)}] + "`;
-        }
+  switch (options.exportType) {
+    case "string":
+      finalExport = "___CSS_LOADER_EXPORT___.toString()";
+      break;
 
-        return `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
-      });
-    } else {
-      localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => `" + ${replacementName} + "`);
-    }
-  }
+    case "css-style-sheet":
+      finalExport = "___CSS_LOADER_STYLE_SHEET___";
+      break;
 
-  if (options.modules.exportOnlyLocals) {
-    code += options.modules.namedExport ? localsCode : `${options.esModule ? "export default" : "module.exports ="} {\n${localsCode}\n};\n`;
-    return code;
+    default:
+    case "array":
+      finalExport = "___CSS_LOADER_EXPORT___";
+      break;
   }
 
-  code += options.modules.namedExport ? localsCode : `___CSS_LOADER_EXPORT___.locals = {${localsCode ? `\n${localsCode}\n` : ""}};\n`;
-  code += `${options.esModule ? "export default" : "module.exports ="} ___CSS_LOADER_EXPORT___;\n`;
+  code += `${options.esModule ? "export default" : "module.exports ="} ${finalExport};\n`;
   return code;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -55,14 +55,14 @@
     "@babel/cli": "^7.14.5",
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.14.7",
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
+    "@commitlint/cli": "^13.1.0",
+    "@commitlint/config-conventional": "^13.1.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^27.0.6",
     "cross-env": "^7.0.3",
     "del": "^6.0.0",
     "del-cli": "^4.0.1",
-    "es-check": "^5.2.4",
+    "es-check": "^6.0.0",
     "eslint": "^7.30.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.4",
@@ -83,7 +83,7 @@
     "standard-version": "^9.3.1",
     "strip-ansi": "^6.0.0",
     "style-loader": "^3.1.0",
-    "stylus": "^0.54.8",
+    "stylus": "^0.55.0",
     "stylus-loader": "^6.1.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.45.1"

package/dist/runtime/cssWithMappingToString.js

@@ -1,36 +0,0 @@
-"use strict";
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-module.exports = function cssWithMappingToString(item) {
-  var _item = _slicedToArray(item, 4),
-      content = _item[1],
-      cssMapping = _item[3];
-
-  if (!cssMapping) {
-    return content;
-  }
-
-  if (typeof btoa === "function") {
-    // eslint-disable-next-line no-undef
-    var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping))));
-    var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
-    var sourceMapping = "/*# ".concat(data, " */");
-    var sourceURLs = cssMapping.sources.map(function (source) {
-      return "/*# sourceURL=".concat(cssMapping.sourceRoot || "").concat(source, " */");
-    });
-    return [content].concat(sourceURLs).concat([sourceMapping]).join("\n");
-  }
-
-  return [content].join("\n");
-};