mini-css-extract-plugin - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/cjs.js

 "use strict";
 
-module.exports = require('./index').default;
+module.exports = require("./index").default;

dist/hmr/hotModuleReplacement.js

@@ -10,6 +10,6 @@ "use strict";
 */
-var normalizeUrl = require('./normalize-url');
+var normalizeUrl = require("./normalize-url");
 
 var srcByModuleId = Object.create(null);
-var noDocument = typeof document === 'undefined';
+var noDocument = typeof document === "undefined";
 var forEach = Array.prototype.forEach;
@@ -42,3 +42,3 @@
     } else {
-      var scripts = document.getElementsByTagName('script');
+      var scripts = document.getElementsByTagName("script");
       var lastScriptTag = scripts[scripts.length - 1];
@@ -63,11 +63,11 @@
     if (!filename) {
-      return [src.replace('.js', '.css')];
+      return [src.replace(".js", ".css")];
     }
 
     if (!fileMap) {
-      return [src.replace('.js', '.css')];
+      return [src.replace(".js", ".css")];
     }
 
-    return fileMap.split(',').map(function (mapRule) {
-      var reg = new RegExp("".concat(filename, "\\.js$"), 'g');
+    return fileMap.split(",").map(function (mapRule) {
+      var reg = new RegExp("".concat(filename, "\\.js$"), "g");
       return normalizeUrl(src.replace(reg, "".concat(mapRule.replace(/{fileName}/g, filename), ".css")));
@@ -85,3 +85,3 @@ });
 
-    url = el.href.split('?')[0];
+    url = el.href.split("?")[0];
   }
@@ -99,3 +99,3 @@
 
-  if (!url || !(url.indexOf('.css') > -1)) {
+  if (!url || !(url.indexOf(".css") > -1)) {
     return;
@@ -108,3 +108,3 @@ } // eslint-disable-next-line no-param-reassign
   newEl.isLoaded = false;
-  newEl.addEventListener('load', function () {
+  newEl.addEventListener("load", function () {
     if (newEl.isLoaded) {
@@ -117,3 +117,3 @@ return;
   });
-  newEl.addEventListener('error', function () {
+  newEl.addEventListener("error", function () {
     if (newEl.isLoaded) {
@@ -155,3 +155,3 @@ return;
 
-  var elements = document.querySelectorAll('link');
+  var elements = document.querySelectorAll("link");
   var loaded = false;
@@ -182,3 +182,3 @@ forEach.call(elements, function (el) {
 function reloadAll() {
-  var elements = document.querySelectorAll('link');
+  var elements = document.querySelectorAll("link");
   forEach.call(elements, function (el) {
@@ -205,3 +205,3 @@ if (el.visited === true) {
   if (noDocument) {
-    console.log('no window.document found, will not HMR CSS');
+    console.log("no window.document found, will not HMR CSS");
     return noop;
@@ -217,3 +217,3 @@ }
     if (options.locals) {
-      console.log('[HMR] Detected local css modules. Reload all css');
+      console.log("[HMR] Detected local css modules. Reload all css");
       reloadAll();
@@ -224,5 +224,5 @@ return;
     if (reloaded) {
-      console.log('[HMR] css reload %s', src.join(' '));
+      console.log("[HMR] css reload %s", src.join(" "));
     } else {
-      console.log('[HMR] Reload all css');
+      console.log("[HMR] Reload all css");
       reloadAll();
@@ -229,0 +229,0 @@ }

dist/hmr/normalize-url.js

@@ -7,7 +7,7 @@ "use strict";
     switch (item) {
-      case '..':
+      case "..":
         accumulator.pop();
         break;
 
-      case '.':
+      case ".":
         break;
@@ -20,3 +20,3 @@
     return accumulator;
-  }, []).join('/');
+  }, []).join("/");
 }
@@ -31,8 +31,8 @@
 
-  var protocol = urlString.indexOf('//') !== -1 ? urlString.split('//')[0] + '//' : '';
-  var components = urlString.replace(new RegExp(protocol, 'i'), '').split('/');
-  var host = components[0].toLowerCase().replace(/\.$/, '');
-  components[0] = '';
+  var protocol = urlString.indexOf("//") !== -1 ? urlString.split("//")[0] + "//" : "";
+  var components = urlString.replace(new RegExp(protocol, "i"), "").split("/");
+  var host = components[0].toLowerCase().replace(/\.$/, "");
+  components[0] = "";
   var path = normalizeUrl(components);
   return protocol + host + path;
 };

dist/index.js

@@ -19,7 +19,7 @@ "use strict";
 /* eslint-disable class-methods-use-this */
-const pluginName = 'mini-css-extract-plugin';
+const pluginName = "mini-css-extract-plugin";
 exports.pluginName = pluginName;
 const pluginSymbol = Symbol(pluginName);
 exports.pluginSymbol = pluginSymbol;
-const DEFAULT_FILENAME = '[name].css';
+const DEFAULT_FILENAME = "[name].css";
 const TYPES = new Set([_utils.MODULE_TYPE]);
@@ -63,3 +63,3 @@ const CODE_GENERATION_RESULT = {
         super(_utils.MODULE_TYPE, context);
-        this.id = '';
+        this.id = "";
         this._context = context;
@@ -86,3 +86,3 @@ this._identifier = identifier;
       readableIdentifier(requestShortener) {
-        return `css ${requestShortener.shorten(this._identifier)}${this._identifierIndex ? ` (${this._identifierIndex})` : ''}`;
+        return `css ${requestShortener.shorten(this._identifier)}${this._identifierIndex ? ` (${this._identifierIndex})` : ""}`;
       } // eslint-disable-next-line class-methods-use-this
@@ -101,5 +101,5 @@
       nameForCondition() {
-        const resource = this._identifier.split('!').pop();
+        const resource = this._identifier.split("!").pop();
 
-        const idx = resource.indexOf('?');
+        const idx = resource.indexOf("?");
 
@@ -149,5 +149,5 @@ if (idx >= 0) {
         hash.update(this.content);
-        hash.update(this.media || '');
-        hash.update(this.sourceMap || '');
-        return hash.digest('hex');
+        hash.update(this.media || "");
+        hash.update(this.sourceMap || "");
+        return hash.digest("hex");
       }
@@ -184,3 +184,3 @@
     cssModuleCache.set(webpack, CssModule);
-    webpack.util.serialization.register(CssModule, 'mini-css-extract-plugin/dist/CssModule', null, {
+    webpack.util.serialization.register(CssModule, "mini-css-extract-plugin/dist/CssModule", null, {
       serialize(instance, context) {
@@ -280,3 +280,3 @@ instance.serialize(context);
     cssDependencyCache.set(webpack, CssDependency);
-    webpack.util.serialization.register(CssDependency, 'mini-css-extract-plugin/dist/CssDependency', null, {
+    webpack.util.serialization.register(CssDependency, "mini-css-extract-plugin/dist/CssDependency", null, {
       serialize(instance, context) {
@@ -310,3 +310,3 @@ instance.serialize(context);
     (0, _schemaUtils.validate)(_pluginOptions.default, options, {
-      baseDataPath: 'options'
+      baseDataPath: "options"
     });
@@ -322,3 +322,3 @@ this._sortedModulesCache = new WeakMap();
       linkType: // Todo in next major release set default to "false"
-      options.linkType === true || typeof options.linkType === 'undefined' ? 'text/css' : options.linkType,
+      options.linkType === true || typeof options.linkType === "undefined" ? "text/css" : options.linkType,
       attributes: options.attributes
@@ -332,7 +332,7 @@ };
 
-      if (typeof filename !== 'function') {
-        const hasName = filename.includes('[name]');
-        const hasId = filename.includes('[id]');
-        const hasChunkHash = filename.includes('[chunkhash]');
-        const hasContentHash = filename.includes('[contenthash]'); // Anything changing depending on chunk is fine
+      if (typeof filename !== "function") {
+        const hasName = filename.includes("[name]");
+        const hasId = filename.includes("[id]");
+        const hasChunkHash = filename.includes("[chunkhash]");
+        const hasContentHash = filename.includes("[contenthash]"); // Anything changing depending on chunk is fine
 
@@ -343,6 +343,6 @@ if (hasChunkHash || hasContentHash || hasName || hasId) {
           // Otherwise prefix "[id]." in front of the basename to make it changing
-          this.options.chunkFilename = filename.replace(/(^|\/)([^/]*(?:\?|$))/, '$1[id].$2');
+          this.options.chunkFilename = filename.replace(/(^|\/)([^/]*(?:\?|$))/, "$1[id].$2");
         }
       } else {
-        this.options.chunkFilename = '[id].css';
+        this.options.chunkFilename = "[id].css";
       }
@@ -361,6 +361,6 @@ }
       if (!compiler.options.experiments) {
-        throw new Error('experimentalUseImportModule is only support for webpack >= 5.33.2');
+        throw new Error("experimentalUseImportModule is only support for webpack >= 5.33.2");
       }
 
-      if (typeof compiler.options.experiments.executeModule === 'undefined') {
+      if (typeof compiler.options.experiments.executeModule === "undefined") {
         // eslint-disable-next-line no-param-reassign
@@ -383,3 +383,3 @@ compiler.options.experiments.executeModule = true;
     if (splitChunks) {
-      if (splitChunks.defaultSizeTypes.includes('...')) {
+      if (splitChunks.defaultSizeTypes.includes("...")) {
         splitChunks.defaultSizeTypes.push(_utils.MODULE_TYPE);
@@ -519,3 +519,3 @@ }
         constructor(runtimeRequirements, runtimeOptions) {
-          super('css loading', 10);
+          super("css loading", 10);
           this.runtimeRequirements = runtimeRequirements;
@@ -544,6 +544,6 @@ this.runtimeOptions = runtimeOptions;
 
-          return Template.asString([`var createStylesheet = ${runtimeTemplate.basicFunction('chunkId, fullhref, resolve, reject', ['var linkTag = document.createElement("link");', this.runtimeOptions.attributes ? Template.asString(Object.entries(this.runtimeOptions.attributes).map(entry => {
+          return Template.asString([`var createStylesheet = ${runtimeTemplate.basicFunction("chunkId, fullhref, resolve, reject", ['var linkTag = document.createElement("link");', this.runtimeOptions.attributes ? Template.asString(Object.entries(this.runtimeOptions.attributes).map(entry => {
             const [key, value] = entry;
             return `linkTag.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(value)});`;
-          })) : '', 'linkTag.rel = "stylesheet";', this.runtimeOptions.linkType ? `linkTag.type = ${JSON.stringify(this.runtimeOptions.linkType)};` : '', `var onLinkComplete = ${runtimeTemplate.basicFunction('event', ['// avoid mem leaks.', 'linkTag.onerror = linkTag.onload = null;', "if (event.type === 'load') {", Template.indent(['resolve();']), '} else {', Template.indent(["var errorType = event && (event.type === 'load' ? 'missing' : event.type);", 'var realHref = event && event.target && event.target.href || fullhref;', 'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + realHref + ")");', 'err.code = "CSS_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realHref;', 'linkTag.parentNode.removeChild(linkTag)', 'reject(err);']), '}'])}`, 'linkTag.onerror = linkTag.onload = onLinkComplete;', 'linkTag.href = fullhref;', crossOriginLoading ? Template.asString([`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`, Template.indent(`linkTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', typeof this.runtimeOptions.insert !== 'undefined' ? typeof this.runtimeOptions.insert === 'function' ? `(${this.runtimeOptions.insert.toString()})(linkTag)` : Template.asString([`var target = document.querySelector("${this.runtimeOptions.insert}");`, `target.parentNode.insertBefore(linkTag, target.nextSibling);`]) : Template.asString(['document.head.appendChild(linkTag);']), 'return linkTag;'])};`, `var findStylesheet = ${runtimeTemplate.basicFunction('href, fullhref', ['var existingLinkTags = document.getElementsByTagName("link");', 'for(var i = 0; i < existingLinkTags.length; i++) {', Template.indent(['var tag = existingLinkTags[i];', 'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");', 'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', Template.indent(['var tag = existingStyleTags[i];', 'var dataHref = tag.getAttribute("data-href");', 'if(dataHref === href || dataHref === fullhref) return tag;']), '}'])};`, `var loadStylesheet = ${runtimeTemplate.basicFunction('chunkId', `return new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`, `var fullhref = ${RuntimeGlobals.publicPath} + href;`, 'if(findStylesheet(href, fullhref)) return resolve();', 'createStylesheet(chunkId, fullhref, resolve, reject);'])});`)}`, withLoading ? Template.asString(['// object to store loaded CSS chunks', 'var installedCssChunks = {', Template.indent(chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};', '', `${RuntimeGlobals.ensureChunkHandlers}.miniCss = ${runtimeTemplate.basicFunction('chunkId, promises', [`var cssChunks = ${JSON.stringify(chunkMap)};`, 'if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);', 'else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {', Template.indent([`promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(${runtimeTemplate.basicFunction('', 'installedCssChunks[chunkId] = 0;')}, ${runtimeTemplate.basicFunction('e', ['delete installedCssChunks[chunkId];', 'throw e;'])}));`]), '}'])};`]) : '// no chunk loading', '', withHmr ? Template.asString(['var oldTags = [];', 'var newTags = [];', `var applyHandler = ${runtimeTemplate.basicFunction('options', [`return { dispose: ${runtimeTemplate.basicFunction('', ['for(var i = 0; i < oldTags.length; i++) {', Template.indent(['var oldTag = oldTags[i];', 'if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);']), '}', 'oldTags.length = 0;'])}, apply: ${runtimeTemplate.basicFunction('', ['for(var i = 0; i < newTags.length; i++) newTags[i].rel = "stylesheet";', 'newTags.length = 0;'])} };`])}`, `${RuntimeGlobals.hmrDownloadUpdateHandlers}.miniCss = ${runtimeTemplate.basicFunction('chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList', ['applyHandlers.push(applyHandler);', `chunkIds.forEach(${runtimeTemplate.basicFunction('chunkId', [`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`, `var fullhref = ${RuntimeGlobals.publicPath} + href;`, 'var oldTag = findStylesheet(href, fullhref);', 'if(!oldTag) return;', `promises.push(new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction('', ['tag.as = "style";', 'tag.rel = "preload";', 'resolve();'])}, reject);`, 'oldTags.push(oldTag);', 'newTags.push(tag);'])}));`])});`])}`]) : '// no hmr']);
+          })) : "", 'linkTag.rel = "stylesheet";', this.runtimeOptions.linkType ? `linkTag.type = ${JSON.stringify(this.runtimeOptions.linkType)};` : "", `var onLinkComplete = ${runtimeTemplate.basicFunction("event", ["// avoid mem leaks.", "linkTag.onerror = linkTag.onload = null;", "if (event.type === 'load') {", Template.indent(["resolve();"]), "} else {", Template.indent(["var errorType = event && (event.type === 'load' ? 'missing' : event.type);", "var realHref = event && event.target && event.target.href || fullhref;", 'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + realHref + ")");', 'err.code = "CSS_CHUNK_LOAD_FAILED";', "err.type = errorType;", "err.request = realHref;", "linkTag.parentNode.removeChild(linkTag)", "reject(err);"]), "}"])}`, "linkTag.onerror = linkTag.onload = onLinkComplete;", "linkTag.href = fullhref;", crossOriginLoading ? Template.asString([`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`, Template.indent(`linkTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), "}"]) : "", typeof this.runtimeOptions.insert !== "undefined" ? typeof this.runtimeOptions.insert === "function" ? `(${this.runtimeOptions.insert.toString()})(linkTag)` : Template.asString([`var target = document.querySelector("${this.runtimeOptions.insert}");`, `target.parentNode.insertBefore(linkTag, target.nextSibling);`]) : Template.asString(["document.head.appendChild(linkTag);"]), "return linkTag;"])};`, `var findStylesheet = ${runtimeTemplate.basicFunction("href, fullhref", ['var existingLinkTags = document.getElementsByTagName("link");', "for(var i = 0; i < existingLinkTags.length; i++) {", Template.indent(["var tag = existingLinkTags[i];", 'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");', 'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;']), "}", 'var existingStyleTags = document.getElementsByTagName("style");', "for(var i = 0; i < existingStyleTags.length; i++) {", Template.indent(["var tag = existingStyleTags[i];", 'var dataHref = tag.getAttribute("data-href");', "if(dataHref === href || dataHref === fullhref) return tag;"]), "}"])};`, `var loadStylesheet = ${runtimeTemplate.basicFunction("chunkId", `return new Promise(${runtimeTemplate.basicFunction("resolve, reject", [`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`, `var fullhref = ${RuntimeGlobals.publicPath} + href;`, "if(findStylesheet(href, fullhref)) return resolve();", "createStylesheet(chunkId, fullhref, resolve, reject);"])});`)}`, withLoading ? Template.asString(["// object to store loaded CSS chunks", "var installedCssChunks = {", Template.indent(chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(",\n")), "};", "", `${RuntimeGlobals.ensureChunkHandlers}.miniCss = ${runtimeTemplate.basicFunction("chunkId, promises", [`var cssChunks = ${JSON.stringify(chunkMap)};`, "if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);", "else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {", Template.indent([`promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(${runtimeTemplate.basicFunction("", "installedCssChunks[chunkId] = 0;")}, ${runtimeTemplate.basicFunction("e", ["delete installedCssChunks[chunkId];", "throw e;"])}));`]), "}"])};`]) : "// no chunk loading", "", withHmr ? Template.asString(["var oldTags = [];", "var newTags = [];", `var applyHandler = ${runtimeTemplate.basicFunction("options", [`return { dispose: ${runtimeTemplate.basicFunction("", ["for(var i = 0; i < oldTags.length; i++) {", Template.indent(["var oldTag = oldTags[i];", "if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);"]), "}", "oldTags.length = 0;"])}, apply: ${runtimeTemplate.basicFunction("", ['for(var i = 0; i < newTags.length; i++) newTags[i].rel = "stylesheet";', "newTags.length = 0;"])} };`])}`, `${RuntimeGlobals.hmrDownloadUpdateHandlers}.miniCss = ${runtimeTemplate.basicFunction("chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList", ["applyHandlers.push(applyHandler);", `chunkIds.forEach(${runtimeTemplate.basicFunction("chunkId", [`var href = ${RuntimeGlobals.require}.miniCssF(chunkId);`, `var fullhref = ${RuntimeGlobals.publicPath} + href;`, "var oldTag = findStylesheet(href, fullhref);", "if(!oldTag) return;", `promises.push(new Promise(${runtimeTemplate.basicFunction("resolve, reject", [`var tag = createStylesheet(chunkId, fullhref, ${runtimeTemplate.basicFunction("", ['tag.as = "style";', 'tag.rel = "preload";', "resolve();"])}, reject);`, "oldTags.push(oldTag);", "newTags.push(tag);"])}));`])});`])}`]) : "// no hmr"]);
         }
@@ -562,3 +562,3 @@
 
-        if (typeof this.options.chunkFilename === 'string' && /\[(full)?hash(:\d+)?\]/.test(this.options.chunkFilename)) {
+        if (typeof this.options.chunkFilename === "string" && /\[(full)?hash(:\d+)?\]/.test(this.options.chunkFilename)) {
           set.add(RuntimeGlobals.getFullHash);
@@ -568,3 +568,3 @@ }
         set.add(RuntimeGlobals.publicPath);
-        compilation.addRuntimeModule(chunk, new runtime.GetChunkFilenameRuntimeModule(_utils.MODULE_TYPE, 'mini-css', `${RuntimeGlobals.require}.miniCssF`, referencedChunk => {
+        compilation.addRuntimeModule(chunk, new runtime.GetChunkFilenameRuntimeModule(_utils.MODULE_TYPE, "mini-css", `${RuntimeGlobals.require}.miniCssF`, referencedChunk => {
           if (!referencedChunk.contentHash[_utils.MODULE_TYPE]) {
@@ -585,3 +585,3 @@ return false;
   getChunkModules(chunk, chunkGraph) {
-    return typeof chunkGraph !== 'undefined' ? chunkGraph.getOrderedChunkModulesIterable(chunk, _utils.compareModulesByIdentifier) : chunk.modulesIterable;
+    return typeof chunkGraph !== "undefined" ? chunkGraph.getOrderedChunkModulesIterable(chunk, _utils.compareModulesByIdentifier) : chunk.modulesIterable;
   }
@@ -672,9 +672,9 @@
           const reasons = moduleDependenciesReasons.get(fallbackModule);
-          compilation.warnings.push(new Error([`chunk ${chunk.name || chunk.id} [${pluginName}]`, 'Conflicting order. Following module has been added:', ` * ${fallbackModule.readableIdentifier(requestShortener)}`, 'despite it was not able to fulfill desired ordering with these modules:', ...bestMatchDeps.map(m => {
+          compilation.warnings.push(new Error([`chunk ${chunk.name || chunk.id} [${pluginName}]`, "Conflicting order. Following module has been added:", ` * ${fallbackModule.readableIdentifier(requestShortener)}`, "despite it was not able to fulfill desired ordering with these modules:", ...bestMatchDeps.map(m => {
             const goodReasonsMap = moduleDependenciesReasons.get(m);
             const goodReasons = goodReasonsMap && goodReasonsMap.get(fallbackModule);
-            const failedChunkGroups = Array.from(reasons.get(m), cg => cg.name).join(', ');
-            const goodChunkGroups = goodReasons && Array.from(goodReasons, cg => cg.name).join(', ');
-            return [` * ${m.readableIdentifier(requestShortener)}`, `   - couldn't fulfill desired order of chunk group(s) ${failedChunkGroups}`, goodChunkGroups && `   - while fulfilling desired order of chunk group(s) ${goodChunkGroups}`].filter(Boolean).join('\n');
-          })].join('\n')));
+            const failedChunkGroups = Array.from(reasons.get(m), cg => cg.name).join(", ");
+            const goodChunkGroups = goodReasons && Array.from(goodReasons, cg => cg.name).join(", ");
+            return [` * ${m.readableIdentifier(requestShortener)}`, `   - couldn't fulfill desired order of chunk group(s) ${failedChunkGroups}`, goodChunkGroups && `   - while fulfilling desired order of chunk group(s) ${goodChunkGroups}`].filter(Boolean).join("\n");
+          })].join("\n")));
         }
@@ -701,20 +701,29 @@
 
-    for (const m of usedModules) {
-      let content = m.content.toString();
+    for (const module of usedModules) {
+      let content = module.content.toString();
+      const readableIdentifier = module.readableIdentifier(requestShortener);
 
+      if (compilation.outputOptions.pathinfo) {
+        // From https://github.com/webpack/webpack/blob/29eff8a74ecc2f87517b627dee451c2af9ed3f3f/lib/ModuleInfoHeaderPlugin.js#L191-L194
+        const reqStr = readableIdentifier.replace(/\*\//g, "*_/");
+        const reqStrStar = "*".repeat(reqStr.length);
+        const headerStr = `/*!****${reqStrStar}****!*\\\n  !*** ${reqStr} ***!\n  \\****${reqStrStar}****/\n`;
+        content = headerStr + content;
+      }
+
       if (/^@import url/.test(content)) {
         // HACK for IE
         // http://stackoverflow.com/a/14676665/1458162
-        if (m.media) {
+        if (module.media) {
           // insert media into the @import
           // this is rar
           // TODO improve this and parse the CSS to support multiple medias
-          content = content.replace(/;|\s*$/, m.media);
+          content = content.replace(/;|\s*$/, module.media);
         }
 
         externalsSource.add(content);
-        externalsSource.add('\n');
+        externalsSource.add("\n");
       } else {
-        if (m.media) {
-          source.add(`@media ${m.media} {\n`);
+        if (module.media) {
+          source.add(`@media ${module.media} {\n`);
         }
@@ -726,14 +735,14 @@
         const undoPath = (0, _identifier.getUndoPath)(filename, compiler.outputPath, false);
-        content = content.replace(new RegExp(_utils.AUTO_PUBLIC_PATH, 'g'), undoPath);
+        content = content.replace(new RegExp(_utils.AUTO_PUBLIC_PATH, "g"), undoPath);
 
-        if (m.sourceMap) {
-          source.add(new SourceMapSource(content, m.readableIdentifier(requestShortener), m.sourceMap.toString()));
+        if (module.sourceMap) {
+          source.add(new SourceMapSource(content, readableIdentifier, module.sourceMap.toString()));
         } else {
-          source.add(new RawSource(content, m.readableIdentifier(requestShortener)));
+          source.add(new RawSource(content, readableIdentifier));
         }
 
-        source.add('\n');
+        source.add("\n");
 
-        if (m.media) {
-          source.add('}\n');
+        if (module.media) {
+          source.add("}\n");
         }
@@ -748,4 +757,4 @@ }
 
-MiniCssExtractPlugin.loader = require.resolve('./loader');
+MiniCssExtractPlugin.loader = require.resolve("./loader");
 var _default = MiniCssExtractPlugin;
 exports.default = _default;

dist/loader.js

@@ -24,7 +24,7 @@ "use strict";
 function hotLoader(content, context) {
-  const accept = context.locals ? '' : 'module.hot.accept(undefined, cssReload);';
+  const accept = context.locals ? "" : "module.hot.accept(undefined, cssReload);";
   return `${content}
     if(module.hot) {
       // ${Date.now()}
-      var cssReload = require(${(0, _utils.stringifyRequest)(context.context, _path.default.join(__dirname, 'hmr/hotModuleReplacement.js'))})(module.id, ${JSON.stringify({ ...context.options,
+      var cssReload = require(${(0, _utils.stringifyRequest)(context.context, _path.default.join(__dirname, "hmr/hotModuleReplacement.js"))})(module.id, ${JSON.stringify({ ...context.options,
     locals: !!context.locals
@@ -55,3 +55,3 @@ })});
     let namedExport;
-    const esModule = typeof options.esModule !== 'undefined' ? options.esModule : true;
+    const esModule = typeof options.esModule !== "undefined" ? options.esModule : true;
 
@@ -64,3 +64,3 @@ const addDependencies = dependencies => {
       const identifierCountMap = new Map();
-      const emit = typeof options.emit !== 'undefined' ? options.emit : true;
+      const emit = typeof options.emit !== "undefined" ? options.emit : true;
       let lastDep;
@@ -93,7 +93,7 @@
       namedExport = // eslint-disable-next-line no-underscore-dangle
-      originalExports.__esModule && !('locals' in originalExports.default);
+      originalExports.__esModule && !("locals" in originalExports.default);
 
       if (namedExport) {
         Object.keys(originalExports).forEach(key => {
-          if (key !== 'default') {
+          if (key !== "default") {
             if (!locals) {
@@ -146,3 +146,3 @@ locals = {};
 
-    const result = locals ? namedExport ? Object.keys(locals).map(key => `\nexport var ${key} = ${JSON.stringify(locals[key])};`).join('') : `\n${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(locals)};` : esModule ? `\nexport {};` : '';
+    const result = locals ? namedExport ? Object.keys(locals).map(key => `\nexport var ${key} = ${JSON.stringify(locals[key])};`).join("") : `\n${esModule ? "export default" : "module.exports ="} ${JSON.stringify(locals)};` : esModule ? `\nexport {};` : "";
     let resultSource = `// extracted by ${_index.pluginName}`;
@@ -161,10 +161,10 @@ resultSource += this.hot ? hotLoader(result, {
 
-  if (typeof options.publicPath === 'string') {
+  if (typeof options.publicPath === "string") {
     // eslint-disable-next-line prefer-destructuring
     publicPath = options.publicPath;
-  } else if (typeof options.publicPath === 'function') {
+  } else if (typeof options.publicPath === "function") {
     publicPath = options.publicPath(this.resourcePath, this.rootContext);
   }
 
-  if (publicPath === 'auto') {
+  if (publicPath === "auto") {
     publicPath = _utils.AUTO_PUBLIC_PATH;
@@ -195,3 +195,3 @@ }
   this.addDependency(this.resourcePath);
-  const childFilename = '*';
+  const childFilename = "*";
   const outputOptions = {
@@ -212,3 +212,3 @@ filename: childFilename,
   childCompiler.options.module.parser.javascript = { ...childCompiler.options.module.parser.javascript,
-    url: 'relative'
+    url: "relative"
   };
@@ -231,7 +231,7 @@ const {
   } = webpack;
-  new EnableLibraryPlugin('commonjs2').apply(childCompiler);
+  new EnableLibraryPlugin("commonjs2").apply(childCompiler);
   EntryOptionPlugin.applyEntryOption(childCompiler, this.context, {
     child: {
       library: {
-        type: 'commonjs2'
+        type: "commonjs2"
       },
@@ -238,0 +238,0 @@ import: [`!!${request}`]

dist/utils.js

@@ -30,3 +30,3 @@ "use strict";
   for (const module of modules) {
-    const moduleId = typeof chunkGraph !== 'undefined' ? chunkGraph.getModuleId(module) : module.id;
+    const moduleId = typeof chunkGraph !== "undefined" ? chunkGraph.getModuleId(module) : module.id;
 
@@ -73,5 +73,5 @@ if (moduleId === id) {
 
-const MODULE_TYPE = 'css/mini-extract';
+const MODULE_TYPE = "css/mini-extract";
 exports.MODULE_TYPE = MODULE_TYPE;
-const AUTO_PUBLIC_PATH = '__MINI_CSS_EXTRACT_PLUGIN_PUBLIC_PATH__';
+const AUTO_PUBLIC_PATH = "__MINI_CSS_EXTRACT_PLUGIN_PUBLIC_PATH__";
 exports.AUTO_PUBLIC_PATH = AUTO_PUBLIC_PATH;
@@ -90,3 +90,3 @@
 function stringifyRequest(loaderContext, request) {
-  const splitted = request.split('!');
+  const splitted = request.split("!");
   const {
@@ -98,3 +98,3 @@ context
     const splittedPart = part.match(/^(.*?)(\?.*)/);
-    const query = splittedPart ? splittedPart[2] : '';
+    const query = splittedPart ? splittedPart[2] : "";
     let singlePath = splittedPart ? splittedPart[1] : part;
@@ -118,4 +118,4 @@
 
-    return singlePath.replace(/\\/g, '/') + query;
-  }).join('!'));
+    return singlePath.replace(/\\/g, "/") + query;
+  }).join("!"));
 }

package.json

 {
   "name": "mini-css-extract-plugin",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "extracts CSS into separate files",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -53,3 +53,3 @@ <div align="center">
 ```js
-import './style.css';
+import "./style.css";
 ```
@@ -60,3 +60,3 @@
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -69,3 +69,3 @@ module.exports = {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -141,3 +141,3 @@ ],
 new MiniCssExtractPlugin({
-  insert: '#some-element',
+  insert: "#some-element",
 });
@@ -161,3 +161,3 @@ ```
   insert: function (linkTag) {
-    var reference = document.querySelector('#some-element');
+    var reference = document.querySelector("#some-element");
     if (reference) {
@@ -182,3 +182,3 @@ reference.parentNode.insertBefore(linkTag, reference);
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -189,4 +189,4 @@ module.exports = {
       attributes: {
-        id: 'target',
-        'data-target': 'example',
+        id: "target",
+        "data-target": "example",
       },
@@ -199,3 +199,3 @@ }),
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -223,3 +223,3 @@ ],
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -229,3 +229,3 @@ module.exports = {
     new MiniCssExtractPlugin({
-      linkType: 'text/css',
+      linkType: "text/css",
     }),
@@ -237,3 +237,3 @@ ],
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -252,3 +252,3 @@ ],
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -265,3 +265,3 @@ module.exports = {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -286,3 +286,3 @@ ],
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -299,3 +299,3 @@ module.exports = {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -328,3 +328,3 @@ ],
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -336,4 +336,4 @@ module.exports = {
       // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: "[name].css",
+      chunkFilename: "[id].css",
     }),
@@ -349,6 +349,6 @@ ],
             options: {
-              publicPath: '/public/path/to/',
+              publicPath: "/public/path/to/",
             },
           },
-          'css-loader',
+          "css-loader",
         ],
@@ -366,3 +366,3 @@ },
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -374,4 +374,4 @@ module.exports = {
       // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: "[name].css",
+      chunkFilename: "[id].css",
     }),
@@ -388,7 +388,7 @@ ],
               publicPath: (resourcePath, context) => {
-                return path.relative(path.dirname(resourcePath), context) + '/';
+                return path.relative(path.dirname(resourcePath), context) + "/";
               },
             },
           },
-          'css-loader',
+          "css-loader",
         ],
@@ -422,3 +422,3 @@ },
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -438,3 +438,3 @@ module.exports = {
           },
-          'css-loader',
+          "css-loader",
         ],
@@ -460,4 +460,4 @@ },
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const devMode = process.env.NODE_ENV !== 'production';
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const devMode = process.env.NODE_ENV !== "production";
 
@@ -470,6 +470,6 @@ module.exports = {
         use: [
-          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
+          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader",
+          "sass-loader",
         ],
@@ -488,3 +488,3 @@ },
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -496,4 +496,4 @@ module.exports = {
       // all options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: "[name].css",
+      chunkFilename: "[id].css",
       ignoreOrder: false, // Enable to remove warnings about conflicting order
@@ -512,6 +512,6 @@ }),
               // by default it uses publicPath in webpackOptions.output
-              publicPath: '../',
+              publicPath: "../",
             },
           },
-          'css-loader',
+          "css-loader",
         ],
@@ -546,3 +546,3 @@ },
 ```js
-import { fooBaz, bar } from './styles.css';
+import { fooBaz, bar } from "./styles.css";
 
@@ -557,3 +557,3 @@ console.log(fooBaz, bar);
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -571,3 +571,3 @@ module.exports = {
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
@@ -577,3 +577,3 @@ esModule: true,
                 namedExport: true,
-                localIdentName: 'foo__[name]__[local]',
+                localIdentName: "foo__[name]__[local]",
               },
@@ -594,3 +594,3 @@ },
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -602,4 +602,4 @@ module.exports = {
       // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: "[name].css",
+      chunkFilename: "[id].css",
     }),
@@ -619,7 +619,7 @@ ],
                 // while for ./css/main.css the publicPath will be ../
-                return path.relative(path.dirname(resourcePath), context) + '/';
+                return path.relative(path.dirname(resourcePath), context) + "/";
               },
             },
           },
-          'css-loader',
+          "css-loader",
         ],
@@ -646,5 +646,5 @@ },
 ```js
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const devMode = process.env.NODE_ENV !== 'production';
+const webpack = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const devMode = process.env.NODE_ENV !== "production";
 
@@ -655,4 +655,4 @@ const plugins = [
     // both options are optional
-    filename: devMode ? '[name].css' : '[name].[contenthash].css',
-    chunkFilename: devMode ? '[id].css' : '[id].[contenthash].css',
+    filename: devMode ? "[name].css" : "[name].[contenthash].css",
+    chunkFilename: devMode ? "[id].css" : "[id].[contenthash].css",
   }),
@@ -673,5 +673,5 @@ ];
           MiniCssExtractPlugin.loader,
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
+          "css-loader",
+          "postcss-loader",
+          "sass-loader",
         ],
@@ -698,4 +698,4 @@ },
 ```js
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -706,4 +706,4 @@ const plugins = [
     // both options are optional
-    filename: devMode ? '[name].css' : '[name].[contenthash].css',
-    chunkFilename: devMode ? '[id].css' : '[id].[contenthash].css',
+    filename: devMode ? "[name].css" : "[name].[contenthash].css",
+    chunkFilename: devMode ? "[id].css" : "[id].[contenthash].css",
   }),
@@ -727,3 +727,3 @@ ];
           },
-          'css-loader',
+          "css-loader",
         ],
@@ -743,4 +743,4 @@ },
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
@@ -750,4 +750,4 @@ module.exports = {
     new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: "[name].css",
+      chunkFilename: "[id].css",
     }),
@@ -759,3 +759,3 @@ ],
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -791,3 +791,3 @@ ],
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -799,7 +799,7 @@ module.exports = {
         styles: {
-          name: 'styles',
-          type: 'css/mini-extract',
+          name: "styles",
+          type: "css/mini-extract",
           // For webpack@4
           // test: /\.css$/,
-          chunks: 'all',
+          chunks: "all",
           enforce: true,
@@ -812,3 +812,3 @@ },
     new MiniCssExtractPlugin({
-      filename: '[name].css',
+      filename: "[name].css",
     }),
@@ -820,3 +820,3 @@ ],
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -837,4 +837,4 @@ ],
 ```js
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -861,4 +861,4 @@ function recursiveIssuer(m, c) {
   entry: {
-    foo: path.resolve(__dirname, 'src/foo'),
-    bar: path.resolve(__dirname, 'src/bar'),
+    foo: path.resolve(__dirname, "src/foo"),
+    bar: path.resolve(__dirname, "src/bar"),
   },
@@ -869,15 +869,15 @@ optimization: {
         fooStyles: {
-          name: 'styles_foo',
-          test: (m, c, entry = 'foo') =>
-            m.constructor.name === 'CssModule' &&
+          name: "styles_foo",
+          test: (m, c, entry = "foo") =>
+            m.constructor.name === "CssModule" &&
             recursiveIssuer(m, c) === entry,
-          chunks: 'all',
+          chunks: "all",
           enforce: true,
         },
         barStyles: {
-          name: 'styles_bar',
-          test: (m, c, entry = 'bar') =>
-            m.constructor.name === 'CssModule' &&
+          name: "styles_bar",
+          test: (m, c, entry = "bar") =>
+            m.constructor.name === "CssModule" &&
             recursiveIssuer(m, c) === entry,
-          chunks: 'all',
+          chunks: "all",
           enforce: true,
@@ -890,3 +890,3 @@ },
     new MiniCssExtractPlugin({
-      filename: '[name].css',
+      filename: "[name].css",
     }),
@@ -898,3 +898,3 @@ ],
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -915,3 +915,3 @@ ],
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -921,3 +921,3 @@ module.exports = {
     new MiniCssExtractPlugin({
-      filename: ({ chunk }) => `${chunk.name.replace('/js/', '/css/')}.css`,
+      filename: ({ chunk }) => `${chunk.name.replace("/js/", "/css/")}.css`,
     }),
@@ -929,3 +929,3 @@ ],
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -944,3 +944,3 @@ ],
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -950,4 +950,4 @@ module.exports = {
     new MiniCssExtractPlugin({
-      filename: '[name].[contenthash].css',
-      chunkFilename: '[id].[contenthash].css',
+      filename: "[name].[contenthash].css",
+      chunkFilename: "[id].[contenthash].css",
     }),
@@ -959,3 +959,3 @@ ],
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -974,3 +974,3 @@ ],
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -987,3 +987,3 @@ module.exports = {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
@@ -990,0 +990,0 @@ ],

No alert changes

Improved metrics

Total package byte prevSize

79807

increased by0.69%

Lines of code

1260

increased by0.64%

No dependency changes