css-loader 3.0.0 → 3.3.0

package/CHANGELOG.md

@@ -2,6 +2,55 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.3.0](https://github.com/webpack-contrib/css-loader/compare/v3.2.1...v3.3.0) (2019-12-09)
+
+
+### Features
+
+* support `pure` css modules ([#1008](https://github.com/webpack-contrib/css-loader/issues/1008)) ([6177af5](https://github.com/webpack-contrib/css-loader/commit/6177af5596566fead13a8f66d5abcb4dc2b744db))
+
+
+### Bug Fixes
+
+* do not crash when an assert return `null` or `undefined` ([#1006](https://github.com/webpack-contrib/css-loader/issues/1006)) ([6769783](https://github.com/webpack-contrib/css-loader/commit/67697833725e1cff12a14663390bbe4c65ea36d2))
+* reduce count of `require` ([#1004](https://github.com/webpack-contrib/css-loader/issues/1004)) ([80e9662](https://github.com/webpack-contrib/css-loader/commit/80e966280f2477c5c0e4553d3be3a04511fea381))
+
+### [3.2.1](https://github.com/webpack-contrib/css-loader/compare/v3.2.0...v3.2.1) (2019-12-02)
+
+
+### Bug Fixes
+
+* add an additional space after the escape sequence ([#998](https://github.com/webpack-contrib/css-loader/issues/998)) ([0961304](https://github.com/webpack-contrib/css-loader/commit/0961304020832fc9ca70cc708f4366e1f868e765))
+* compatibility with ES modules syntax and hash in `url` function ([#1001](https://github.com/webpack-contrib/css-loader/issues/1001)) ([8f4d6f5](https://github.com/webpack-contrib/css-loader/commit/8f4d6f508187513347106a436eda993f874065f1))
+
+## [3.2.0](https://github.com/webpack-contrib/css-loader/compare/v3.1.0...v3.2.0) (2019-08-06)
+
+
+### Bug Fixes
+
+* replace `.` characters in localIndent to `-` character (regression) ([#982](https://github.com/webpack-contrib/css-loader/issues/982)) ([967fb66](https://github.com/webpack-contrib/css-loader/commit/967fb66))
+
+
+### Features
+
+* support es modules for assets loader ([#984](https://github.com/webpack-contrib/css-loader/issues/984)) ([9c5126c](https://github.com/webpack-contrib/css-loader/commit/9c5126c))
+
+## [3.1.0](https://github.com/webpack-contrib/css-loader/compare/v3.0.0...v3.1.0) (2019-07-18)
+
+
+### Bug Fixes
+
+* converting all (including reserved and control) filesystem characters to `-` (it was regression in `3.0.0` version) ([#972](https://github.com/webpack-contrib/css-loader/issues/972)) ([f51859b](https://github.com/webpack-contrib/css-loader/commit/f51859b))
+* default context should be undefined instead of null ([#965](https://github.com/webpack-contrib/css-loader/issues/965)) ([9c32885](https://github.com/webpack-contrib/css-loader/commit/9c32885))
+
+
+### Features
+
+* allow `modules.getLocalIdent` to return a falsy value ([#963](https://github.com/webpack-contrib/css-loader/issues/963)) ([9c3571c](https://github.com/webpack-contrib/css-loader/commit/9c3571c))
+* improved validation error messages ([65e4fc0](https://github.com/webpack-contrib/css-loader/commit/65e4fc0))
+
+
+
 ## [3.0.0](https://github.com/webpack-contrib/css-loader/compare/v2.1.1...v3.0.0) (2019-06-11)
 
 
@@ -24,7 +73,7 @@ All notable changes to this project will be documented in this file. See [standa
 * minimum required nodejs version is 8.9.0
 * `@value` at rules now support in `selector`, recommends checking all `@values` at-rule usage (hint: you can add prefix to all `@value` at-rules, for example `@value v-foo: black;` or `@value m-foo: screen and (max-width: 12450px)`, and then do upgrade)
 * invert `{Function}` behavior for `url` and `import` options  (need return `true` when you want handle `url`/`@import` and return `false` if not)
-* `exportLocalsStyle` option was remove in favor `localsConvention` option, also it is accept only `{String}` value (use `camelCase` value if you previously value was `true` and `asIs` if you previously value was `false`) 
+* `camelCase` option was remove in favor `localsConvention` option, also it is accept only `{String}` value (use `camelCase` value if you previously value was `true` and `asIs` if you previously value was `false`)
 * `exportOnlyLocals` option was remove in favor `onlyLocals` option
 * `modules` option now can be `{Object}` and allow to setup `CSS Modules` options:
   * `localIdentName` option was removed in favor `modules.localIdentName` option

package/README.md

@@ -109,21 +109,22 @@ module.exports = {
 
 ## Options
 
-|                    Name                     |            Type             | Default | Description                                        |
-| :-----------------------------------------: | :-------------------------: | :-----: | :------------------------------------------------- |
-|              **[`url`](#url)**              |    `{Boolean\|Function}`    | `true`  | Enable/Disable `url()` handling                    |
-|           **[`import`](#import)**           |    `{Boolean\|Function}`    | `true`  | Enable/Disable @import handling                    |
-|          **[`modules`](#modules)**          | `{Boolean\|String\|Object}` | `false` | Enable/Disable CSS Modules and setup their options |
-|        **[`sourceMap`](#sourcemap)**        |         `{Boolean}`         | `false` | Enable/Disable Sourcemaps                          |
-|    **[`importLoaders`](#importloaders)**    |         `{Number}`          |   `0`   | Number of loaders applied before CSS loader        |
-| **[`localsConvention`](#localsconvention)** |         `{String}`          | `asIs`  | Setup style of exported classnames                 |
-|       **[`onlyLocals`](#onlylocals)**       |         `{Boolean}`         | `false` | Export only locals                                 |
+|                    Name                     |            Type             | Default  | Description                                                            |
+| :-----------------------------------------: | :-------------------------: | :------: | :--------------------------------------------------------------------- |
+|              **[`url`](#url)**              |    `{Boolean\|Function}`    |  `true`  | Enables/Disables `url`/`image-set` functions handling                  |
+|           **[`import`](#import)**           |    `{Boolean\|Function}`    |  `true`  | Enables/Disables `@import` at-rules handling                           |
+|          **[`modules`](#modules)**          | `{Boolean\|String\|Object}` | `false`  | Enables/Disables CSS Modules and their configuration                   |
+|        **[`sourceMap`](#sourcemap)**        |         `{Boolean}`         | `false`  | Enables/Disables generation of source maps                             |
+|    **[`importLoaders`](#importloaders)**    |         `{Number}`          |   `0`    | Enables/Disables or setups number of loaders applied before CSS loader |
+| **[`localsConvention`](#localsconvention)** |         `{String}`          | `'asIs'` | Style of exported classnames                                           |
+|       **[`onlyLocals`](#onlylocals)**       |         `{Boolean}`         | `false`  | Export only locals                                                     |
 
 ### `url`
 
 Type: `Boolean|Function`
 Default: `true`
 
+Enables/Disables `url`/`image-set` functions handling.
 Control `url()` resolving. Absolute URLs and root-relative URLs are not resolving.
 
 Examples resolutions:
@@ -200,9 +201,10 @@ module.exports = {
 
 ### `import`
 
-Type: `Boolean`
+Type: `Boolean|Function`
 Default: `true`
 
+Enables/Disables `@import` at-rules handling.
 Control `@import` resolving. Absolute urls in `@import` will be moved in runtime code.
 
 Examples resolutions:
@@ -285,6 +287,8 @@ module.exports = {
 Type: `Boolean|String|Object`
 Default: `false`
 
+Enables/Disables CSS Modules and their configuration.
+
 The `modules` option enables/disables the **[CSS Modules](https://github.com/css-modules/css-modules)** specification and setup basic behaviour.
 
 Using `false` value increase performance because we avoid parsing **CSS Modules** features, it will be useful for developers who use vanilla css or use other technologies.
@@ -313,6 +317,7 @@ module.exports = {
 
 Using `local` value requires you to specify `:global` classes.
 Using `global` value requires you to specify `:local` classes.
+Using `pure` value requires selectors must contain at least one local class or id.
 
 You can find more information [here](https://github.com/css-modules/css-modules).
 
@@ -536,7 +541,7 @@ module.exports = {
 ##### `mode`
 
 Type: `String`
-Default: `local`
+Default: `'local'`
 
 Setup `mode` option. You can omit the value when you want `local` mode.
 
@@ -563,11 +568,20 @@ module.exports = {
 ##### `localIdentName`
 
 Type: `String`
-Default: `[hash:base64]`
+Default: `'[hash:base64]'`
 
 You can configure the generated ident with the `localIdentName` query parameter.
 See [loader-utils's documentation](https://github.com/webpack/loader-utils#interpolatename) for more information on options.
 
+Recommendations:
+
+- use `'[path][name]__[local]'` for development
+- use `'[hash:base64]'` for production
+
+The `[local]` placeholder contains original class.
+
+**Note:** all reserved (`<>:"/\|?*`) and control filesystem characters (excluding characters in the `[local]` placeholder) will be converted to `-`.
+
 **webpack.config.js**
 
 ```js
@@ -703,14 +717,12 @@ module.exports = {
 Type: `Boolean`
 Default: `false`
 
-To include source maps set the `sourceMap` option.
+Enables/Disables generation of source maps.
 
-I.e. the `mini-css-extract-plugin` can handle them.
+To include source maps set the `sourceMap` option.
 
 They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not).
 
-In addition to that relative paths are buggy and you need to use an absolute public path which includes the server URL.
-
 **webpack.config.js**
 
 ```js
@@ -734,6 +746,8 @@ module.exports = {
 Type: `Number`
 Default: `0`
 
+Enables/Disables or setups number of loaders applied before CSS loader.
+
 The option `importLoaders` allows you to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
 
 **webpack.config.js**
@@ -749,7 +763,10 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
-              importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
+              importLoaders: 2,
+              // 0 => no loaders (default);
+              // 1 => postcss-loader;
+              // 2 => postcss-loader, sass-loader
             },
           },
           'postcss-loader',
@@ -766,7 +783,9 @@ This may change in the future when the module system (i. e. webpack) supports lo
 ### `localsConvention`
 
 Type: `String`
-Default: `undefined`
+Default: `'asIs'`
+
+Style of exported classnames.
 
 By default, the exported JSON keys mirror the class names (i.e `asIs` value).
 
@@ -814,7 +833,9 @@ module.exports = {
 Type: `Boolean`
 Default: `false`
 
-Export only locals (**useful** when you use **css modules**).
+Export only locals.
+
+**Useful** when you use **css modules** for pre-rendering (for example SSR).
 For pre-rendering with `mini-css-extract-plugin` you should use this option instead of `style-loader!css-loader` **in the pre-rendering bundle**.
 It doesn't embed CSS but only exports the identifier mappings.
 
@@ -853,7 +874,7 @@ module.exports = {
         use: ['style-loader', 'css-loader'],
       },
       {
-        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
         loader: 'url-loader',
         options: {
           limit: 8192,
@@ -872,6 +893,47 @@ For production builds it's recommended to extract the CSS from your bundle being
 
 - As an alternative, if seeking better development performance and css outputs that mimic production. [extract-css-chunks-webpack-plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin) offers a hot module reload friendly, extended version of mini-css-extract-plugin. HMR real CSS files in dev, works like mini-css in non-dev
 
+### CSS modules and pure CSS
+
+When you have pure CSS (without CSS modules) and CSS modules in project you can use this setup:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        // For pure CSS (without CSS modules)
+        test: /\.css$/i,
+        exclude: /\.module\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        // For CSS modules
+        test: /\.module\.css$/i,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
+        loader: 'url-loader',
+        options: {
+          limit: 8192,
+        },
+      },
+    ],
+  },
+};
+```
+
 ## Contributing
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.

package/dist/index.js

@@ -31,7 +31,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 */
 function loader(content, map, meta) {
   const options = (0, _loaderUtils.getOptions)(this) || {};
-  (0, _schemaUtils.default)(_options.default, options, 'CSS Loader');
+  (0, _schemaUtils.default)(_options.default, options, {
+    name: 'CSS Loader',
+    baseDataPath: 'options'
+  });
   const callback = this.async();
   const sourceMap = options.sourceMap || false; // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
   // eslint-disable-next-line no-param-reassign
@@ -53,68 +56,66 @@ function loader(content, map, meta) {
 
   if (options.modules) {
     plugins.push(...(0, _utils.getModulesPlugins)(options, this));
-  } // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
-
+  }
 
-  const importPrefix = (0, _utils.getImportPrefix)(this, options.importLoaders);
-  plugins.push((0, _plugins.icssParser)({
-    loaderContext: this,
-    importPrefix,
-    localsConvention: options.localsConvention
-  }));
+  const exportType = options.onlyLocals ? 'locals' : 'full';
+  plugins.push((0, _plugins.icssParser)());
 
-  if (options.import !== false) {
+  if (options.import !== false && exportType === 'full') {
     plugins.push((0, _plugins.importParser)({
-      loaderContext: this,
-      importPrefix,
       filter: (0, _utils.getFilter)(options.import, this.resourcePath)
     }));
   }
 
-  if (options.url !== false) {
+  if (options.url !== false && exportType === 'full') {
     plugins.push((0, _plugins.urlParser)({
-      loaderContext: this,
       filter: (0, _utils.getFilter)(options.url, this.resourcePath, value => (0, _loaderUtils.isUrlRequest)(value))
     }));
   }
 
   (0, _postcss.default)(plugins).process(content, {
-    from: (0, _loaderUtils.getRemainingRequest)(this).split('!').pop(),
-    to: (0, _loaderUtils.getCurrentRequest)(this).split('!').pop(),
+    from: this.remainingRequest.split('!').pop(),
+    to: this.currentRequest.split('!').pop(),
     map: options.sourceMap ? {
       prev: map,
       inline: false,
       annotation: false
-    } : null
+    } : false
   }).then(result => {
     result.warnings().forEach(warning => this.emitWarning(new _Warning.default(warning)));
-
-    if (!result.messages) {
-      // eslint-disable-next-line no-param-reassign
-      result.messages = [];
-    }
-
-    const {
-      onlyLocals
-    } = options;
-    const importItems = result.messages.filter(message => message.type === 'import' ? message : false).reduce((accumulator, currentValue) => {
-      accumulator.push(currentValue.import);
-      return accumulator;
-    }, []);
-    const exportItems = result.messages.filter(message => message.type === 'export' ? message : false).reduce((accumulator, currentValue) => {
-      accumulator.push(currentValue.export);
-      return accumulator;
-    }, []);
-    const importCode = (0, _utils.getImportCode)(importItems, onlyLocals);
-    const moduleCode = (0, _utils.getModuleCode)(result, sourceMap, onlyLocals);
-    const exportCode = (0, _utils.getExportCode)(exportItems, onlyLocals);
-    const apiCode = (0, _utils.getApiCode)(this, sourceMap, onlyLocals);
-    return callback(null, (0, _utils.prepareCode)({
-      apiCode,
-      importCode,
-      moduleCode,
-      exportCode
-    }, result.messages, this, importPrefix, onlyLocals));
+    const imports = [];
+    const exports = [];
+    const replacers = [];
+
+    for (const message of result.messages) {
+      // eslint-disable-next-line default-case
+      switch (message.type) {
+        case 'import':
+          imports.push(message.value);
+          break;
+
+        case 'export':
+          exports.push(message.value);
+          break;
+
+        case 'replacer':
+          replacers.push(message.value);
+          break;
+      }
+    } // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
+
+
+    const apiCode = exportType === 'full' ? (0, _utils.getApiCode)(this, sourceMap) : '';
+    const importCode = imports.length > 0 ? (0, _utils.getImportCode)(this, imports, {
+      importLoaders: options.importLoaders,
+      exportType
+    }) : '';
+    const moduleCode = exportType === 'full' ? (0, _utils.getModuleCode)(this, result, replacers, sourceMap) : '';
+    const exportCode = exports.length > 0 ? (0, _utils.getExportCode)(this, exports, replacers, {
+      localsConvention: options.localsConvention,
+      exportType
+    }) : '';
+    return callback(null, [apiCode, importCode, moduleCode, exportCode].join(''));
   }).catch(error => {
     callback(error.name === 'CssSyntaxError' ? new _CssSyntaxError.default(error) : error);
   });

package/dist/options.json

@@ -2,6 +2,7 @@
   "additionalProperties": false,
   "properties": {
     "url": {
+      "description": "Enables/Disables 'url'/'image-set' functions handling (https://github.com/webpack-contrib/css-loader#url).",
       "anyOf": [
         {
           "type": "boolean"
@@ -12,6 +13,7 @@
       ]
     },
     "import": {
+      "description": "Enables/Disables '@import' at-rules handling (https://github.com/webpack-contrib/css-loader#import).",
       "anyOf": [
         {
           "type": "boolean"
@@ -22,21 +24,20 @@
       ]
     },
     "modules": {
+      "description": "Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).",
       "anyOf": [
         {
           "type": "boolean"
         },
         {
-          "type": "string",
-          "enum": ["local", "global"]
+          "enum": ["local", "global", "pure"]
         },
         {
           "type": "object",
           "additionalProperties": false,
           "properties": {
             "mode": {
-              "type": "string",
-              "enum": ["local", "global"]
+              "enum": ["local", "global", "pure"]
             },
             "localIdentName": {
               "type": "string"
@@ -72,9 +73,11 @@
       ]
     },
     "sourceMap": {
+      "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
       "type": "boolean"
     },
     "importLoaders": {
+      "description": "Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).",
       "anyOf": [
         {
           "type": "boolean"
@@ -85,14 +88,11 @@
       ]
     },
     "localsConvention": {
-      "anyOf": [
-        {
-          "type": "string",
-          "enum": ["asIs", "camelCase", "camelCaseOnly", "dashes", "dashesOnly"]
-        }
-      ]
+      "description": "Style of exported classnames (https://github.com/webpack-contrib/css-loader#localsconvention).",
+      "enum": ["asIs", "camelCase", "camelCaseOnly", "dashes", "dashesOnly"]
     },
     "onlyLocals": {
+      "description": "Export only locals (https://github.com/webpack-contrib/css-loader#onlylocals).",
       "type": "boolean"
     }
   },

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

@@ -9,79 +9,65 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _icssUtils = require("icss-utils");
 
-var _loaderUtils = _interopRequireDefault(require("loader-utils"));
-
-var _utils = require("../utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pluginName = 'postcss-icss-parser';
 
-function hasImportMessage(messages, url) {
-  return messages.find(message => message.pluginName === pluginName && message.type === 'import' && message.item.url === url && message.item.media === '');
-}
-
-var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
+var _default = _postcss.default.plugin(pluginName, () => function process(css, result) {
   const importReplacements = Object.create(null);
   const {
     icssImports,
     icssExports
   } = (0, _icssUtils.extractICSS)(css);
-  let index = 0;
+  Object.keys(icssImports).forEach((url, importIndex) => {
+    const tokens = Object.keys(icssImports[url]);
 
-  for (const importUrl of Object.keys(icssImports)) {
-    const url = _loaderUtils.default.parseString(importUrl);
+    if (tokens.length === 0) {
+      return;
+    }
 
-    for (const token of Object.keys(icssImports[importUrl])) {
-      index += 1;
-      importReplacements[token] = `___CSS_LOADER_IMPORT___${index}___`;
+    const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;
+    result.messages.push({
+      pluginName,
+      type: 'import',
+      value: {
+        type: 'icss-import',
+        name: importName,
+        url
+      }
+    });
+    tokens.forEach((token, replacementIndex) => {
+      const name = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
+      const localName = icssImports[url][token];
+      importReplacements[token] = name;
       result.messages.push({
         pluginName,
-        type: 'icss-import',
-        item: {
-          url,
-          export: icssImports[importUrl][token],
-          index
+        type: 'replacer',
+        value: {
+          type: 'icss-import',
+          name,
+          importName,
+          localName
         }
       });
+    });
+  });
 
-      if (!hasImportMessage(result.messages, url)) {
-        const media = '';
-        const {
-          loaderContext,
-          importPrefix
-        } = options;
-        result.messages.push({
-          pluginName,
-          type: 'import',
-          import: (0, _utils.getImportItemCode)({
-            url,
-            media
-          }, loaderContext, importPrefix),
-          item: {
-            url,
-            media
-          }
-        });
-      }
-    }
+  if (Object.keys(importReplacements).length > 0) {
+    (0, _icssUtils.replaceSymbols)(css, importReplacements);
   }
 
-  (0, _icssUtils.replaceSymbols)(css, importReplacements);
-
-  for (const exportName of Object.keys(icssExports)) {
-    const name = exportName;
+  Object.keys(icssExports).forEach(name => {
     const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
     result.messages.push({
       pluginName,
-      export: (0, _utils.getExportItemCode)(name, value, options.localsConvention),
       type: 'export',
-      item: {
+      value: {
         name,
         value
       }
     });
-  }
+  });
 });
 
 exports.default = _default;

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

@@ -9,8 +9,6 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 
-var _utils = require("../utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pluginName = 'postcss-import-parser';
@@ -53,7 +51,7 @@ function parseImport(params) {
 }
 
 function walkAtRules(css, result, filter) {
-  const items = [];
+  const items = new Map();
   css.walkAtRules(/^import$/i, atRule => {
     // Convert only top-level @import
     if (atRule.parent.type !== 'root') {
@@ -85,22 +83,43 @@ function walkAtRules(css, result, filter) {
       url,
       media
     } = parsed;
-    items.push({
-      url,
-      media
-    });
+    const value = items.get(url);
+
+    if (!value) {
+      items.set(url, new Set([media]));
+    } else {
+      value.add(media);
+    }
   });
   return items;
 }
 
-var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
-  const traversed = walkAtRules(css, result, options.filter);
-  const paths = (0, _utils.uniqWith)(traversed, (value, other) => value.url === other.url && value.media === other.media);
-  paths.forEach(item => {
+var _default = _postcss.default.plugin(pluginName, options => function process(css, result) {
+  const items = walkAtRules(css, result, options.filter);
+  [...items].reduce((accumulator, currentValue) => {
+    const [url, medias] = currentValue;
+    medias.forEach(media => {
+      accumulator.push({
+        url,
+        media
+      });
+    });
+    return accumulator;
+  }, []).forEach((item, index) => {
+    const {
+      url,
+      media
+    } = item;
+    const name = `___CSS_LOADER_AT_RULE_IMPORT_${index}___`;
     result.messages.push({
       pluginName,
       type: 'import',
-      import: (0, _utils.getImportItemCode)(item, options.loaderContext, options.importPrefix)
+      value: {
+        type: '@import',
+        name,
+        url,
+        media
+      }
     });
   });
 });