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

Comparing version 0.10.0 to 0.10.1

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+### [0.11.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.10.0...v0.11.0) (2020-08-27)
+
+
+### Features
+
+* named export ([1ea4b7f](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/1ea4b7fe8305fcca7915d5c1dccd6041bab2c053))
+
+
+### Bug Fixes
+
+* compatibility with webpack@5
+
 ### [0.10.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.9.0...v0.10.0) (2020-08-10)
@@ -7,0 +19,0 @@

dist/index.js

@@ -8,6 +8,4 @@ "use strict";
 
-var _webpack = _interopRequireDefault(require("webpack"));
+var _webpack = _interopRequireWildcard(require("webpack"));
 
-var _webpackSources = _interopRequireDefault(require("webpack-sources"));
-
 var _schemaUtils = _interopRequireDefault(require("schema-utils"));
@@ -21,3 +19,8 @@
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /* eslint-disable class-methods-use-this */
+// webpack 5 exposes the sources property to ensure the right version of webpack-sources is used
 const {
@@ -27,3 +30,5 @@ ConcatSource,
   OriginalSource
-} = _webpackSources.default;
+} = // eslint-disable-next-line global-require
+_webpack.default.sources || require('webpack-sources');
+
 const {
@@ -35,2 +40,3 @@ Template,
 } = _webpack.default;
+const isWebpack4 = _webpack.version[0] === '4';
 const MODULE_TYPE = 'css/mini-extract';
@@ -44,2 +50,16 @@ const pluginName = 'mini-css-extract-plugin';
 
+const compareIds = (a, b) => {
+  if (typeof a !== typeof b) {
+    return typeof a < typeof b ? -1 : 1;
+  }
+
+  if (a < b) return -1;
+  if (a > b) return 1;
+  return 0;
+};
+
+const compareModulesByIdentifier = (a, b) => {
+  return compareIds(a.identifier(), b.identifier());
+};
+
 class CssDependencyTemplate {
@@ -102,4 +122,4 @@ apply() {}
 
-  updateHash(hash) {
-    super.updateHash(hash);
+  updateHash(hash, context) {
+    super.updateHash(hash, context);
     hash.update(this.content);
@@ -148,60 +168,107 @@ hash.update(this.media || '');
       compilation.dependencyTemplates.set(_CssDependency.default, new CssDependencyTemplate());
-      compilation.mainTemplate.hooks.renderManifest.tap(pluginName, (result, {
-        chunk
-      }) => {
-        const renderedModules = Array.from(chunk.modulesIterable).filter(module => module.type === MODULE_TYPE);
 
-        if (renderedModules.length > 0) {
-          result.push({
-            render: () => this.renderContentAsset(compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
-            filenameTemplate: ({
-              chunk: chunkData
-            }) => this.options.moduleFilename(chunkData),
-            pathOptions: {
-              chunk,
-              contentHashType: MODULE_TYPE
-            },
-            identifier: `${pluginName}.${chunk.id}`,
-            hash: chunk.contentHash[MODULE_TYPE]
-          });
-        }
-      });
-      compilation.chunkTemplate.hooks.renderManifest.tap(pluginName, (result, {
-        chunk
-      }) => {
-        const renderedModules = Array.from(chunk.modulesIterable).filter(module => module.type === MODULE_TYPE);
+      if (isWebpack4) {
+        compilation.mainTemplate.hooks.renderManifest.tap(pluginName, (result, {
+          chunk
+        }) => {
+          const {
+            chunkGraph
+          } = compilation;
+          const renderedModules = Array.from(this.getChunkModules(chunk, chunkGraph)).filter(module => module.type === MODULE_TYPE);
 
-        if (renderedModules.length > 0) {
-          result.push({
-            render: () => this.renderContentAsset(compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
-            filenameTemplate: this.options.chunkFilename,
-            pathOptions: {
-              chunk,
-              contentHashType: MODULE_TYPE
-            },
-            identifier: `${pluginName}.${chunk.id}`,
-            hash: chunk.contentHash[MODULE_TYPE]
-          });
-        }
-      });
-      compilation.mainTemplate.hooks.hashForChunk.tap(pluginName, (hash, chunk) => {
-        const {
-          chunkFilename
-        } = this.options;
+          const filenameTemplate = chunk.filenameTemplate || (({
+            chunk: chunkData
+          }) => this.options.moduleFilename(chunkData));
 
-        if (REGEXP_CHUNKHASH.test(chunkFilename)) {
-          hash.update(JSON.stringify(chunk.getChunkMaps(true).hash));
-        }
+          if (renderedModules.length > 0) {
+            result.push({
+              render: () => this.renderContentAsset(compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
+              filenameTemplate,
+              pathOptions: {
+                chunk,
+                contentHashType: MODULE_TYPE
+              },
+              identifier: `${pluginName}.${chunk.id}`,
+              hash: chunk.contentHash[MODULE_TYPE]
+            });
+          }
+        });
+        compilation.chunkTemplate.hooks.renderManifest.tap(pluginName, (result, {
+          chunk
+        }) => {
+          const {
+            chunkGraph
+          } = compilation;
+          const renderedModules = Array.from(this.getChunkModules(chunk, chunkGraph)).filter(module => module.type === MODULE_TYPE);
+          const filenameTemplate = chunk.filenameTemplate || this.options.chunkFilename;
 
-        if (REGEXP_CONTENTHASH.test(chunkFilename)) {
-          hash.update(JSON.stringify(chunk.getChunkMaps(true).contentHash[MODULE_TYPE] || {}));
-        }
+          if (renderedModules.length > 0) {
+            result.push({
+              render: () => this.renderContentAsset(compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
+              filenameTemplate,
+              pathOptions: {
+                chunk,
+                contentHashType: MODULE_TYPE
+              },
+              identifier: `${pluginName}.${chunk.id}`,
+              hash: chunk.contentHash[MODULE_TYPE]
+            });
+          }
+        });
+      } else {
+        compilation.hooks.renderManifest.tap(pluginName, (result, {
+          chunk
+        }) => {
+          const {
+            chunkGraph
+          } = compilation;
+          const renderedModules = Array.from(this.getChunkModules(chunk, chunkGraph)).filter(module => module.type === MODULE_TYPE);
+          const filenameTemplate = chunk.filenameTemplate || chunk.hasRuntime() || chunk.isOnlyInitial() ? ({
+            chunk: chunkData
+          }) => this.options.moduleFilename(chunkData) : this.options.chunkFilename;
 
-        if (REGEXP_NAME.test(chunkFilename)) {
-          hash.update(JSON.stringify(chunk.getChunkMaps(true).name));
-        }
-      });
+          if (renderedModules.length > 0) {
+            result.push({
+              render: () => this.renderContentAsset(compilation, chunk, renderedModules, compilation.runtimeTemplate.requestShortener),
+              filenameTemplate,
+              pathOptions: {
+                chunk,
+                contentHashType: MODULE_TYPE
+              },
+              identifier: `${pluginName}.${chunk.id}`,
+              hash: chunk.contentHash[MODULE_TYPE]
+            });
+          }
+        });
+      }
+      /*
+       * For webpack 5 this will be unneeded once the logic uses a RuntimeModule
+       * as the content of runtime modules is hashed and added to the chunk hash automatically
+       * */
+
+
+      if (isWebpack4) {
+        compilation.mainTemplate.hooks.hashForChunk.tap(pluginName, (hash, chunk) => {
+          const {
+            chunkFilename
+          } = this.options;
+
+          if (REGEXP_CHUNKHASH.test(chunkFilename)) {
+            hash.update(JSON.stringify(chunk.getChunkMaps(true).hash));
+          }
+
+          if (REGEXP_CONTENTHASH.test(chunkFilename)) {
+            hash.update(JSON.stringify(chunk.getChunkMaps(true).contentHash[MODULE_TYPE] || {}));
+          }
+
+          if (REGEXP_NAME.test(chunkFilename)) {
+            hash.update(JSON.stringify(chunk.getChunkMaps(true).name));
+          }
+        });
+      }
+
       compilation.hooks.contentHash.tap(pluginName, chunk => {
         const {
-          outputOptions
+          outputOptions,
+          chunkGraph
         } = compilation;
@@ -215,5 +282,7 @@ const {
 
-        for (const m of chunk.modulesIterable) {
+        for (const m of this.getChunkModules(chunk, chunkGraph)) {
           if (m.type === MODULE_TYPE) {
-            m.updateHash(hash);
+            m.updateHash(hash, {
+              chunkGraph
+            });
           }
@@ -231,3 +300,3 @@ }
       mainTemplate.hooks.localVars.tap(pluginName, (source, chunk) => {
-        const chunkMap = this.getCssChunkObject(chunk);
+        const chunkMap = this.getCssChunkObject(chunk, compilation);
 
@@ -241,12 +310,13 @@ if (Object.keys(chunkMap).length > 0) {
       mainTemplate.hooks.requireEnsure.tap(pluginName, (source, chunk, hash) => {
-        const chunkMap = this.getCssChunkObject(chunk);
+        const chunkMap = this.getCssChunkObject(chunk, compilation);
 
         if (Object.keys(chunkMap).length > 0) {
+          const maintemplateObject = isWebpack4 ? mainTemplate : compilation;
           const chunkMaps = chunk.getChunkMaps();
           const {
             crossOriginLoading
-          } = mainTemplate.outputOptions;
-          const linkHrefPath = mainTemplate.getAssetPath(JSON.stringify(this.options.chunkFilename), {
-            hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
-            hashWithLength: length => `" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
+          } = maintemplateObject.outputOptions;
+          const linkHrefPath = maintemplateObject.getAssetPath(JSON.stringify(this.options.chunkFilename), {
+            hash: isWebpack4 ? `" + ${mainTemplate.renderCurrentHashCode(hash)} + "` : `" + ${_webpack.default.RuntimeGlobals.getFullHash} + "`,
+            hashWithLength: length => isWebpack4 ? `" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "` : `" + ${_webpack.default.RuntimeGlobals.getFullHash} + "`,
             chunk: {
@@ -289,3 +359,3 @@ id: '" + chunkId + "',
           });
-          return Template.asString([source, '', `// ${pluginName} CSS loading`, `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] = new Promise(function(resolve, reject) {', Template.indent([`var href = ${linkHrefPath};`, `var fullhref = ${mainTemplate.requireFn}.p + href;`, '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 resolve();']), '}', '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 resolve();']), '}', 'var linkTag = document.createElement("link");', 'linkTag.rel = "stylesheet";', 'linkTag.type = "text/css";', 'linkTag.onload = resolve;', 'linkTag.onerror = function(event) {', Template.indent(['var request = event && event.target && event.target.src || fullhref;', 'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + request + ")");', 'err.code = "CSS_CHUNK_LOAD_FAILED";', 'err.request = request;', 'delete installedCssChunks[chunkId]', 'linkTag.parentNode.removeChild(linkTag)', 'reject(err);']), '};', 'linkTag.href = fullhref;', crossOriginLoading ? Template.asString([`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`, Template.indent(`linkTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', 'var head = document.getElementsByTagName("head")[0];', 'head.appendChild(linkTag);']), '}).then(function() {', Template.indent(['installedCssChunks[chunkId] = 0;']), '}));']), '}']);
+          return Template.asString([source, '', `// ${pluginName} CSS loading`, `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] = new Promise(function(resolve, reject) {', Template.indent([`var href = ${linkHrefPath};`, `var fullhref = ${isWebpack4 ? mainTemplate.requireFn : _webpack.default.RuntimeGlobals.require}.p + href;`, '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 resolve();']), '}', '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 resolve();']), '}', 'var linkTag = document.createElement("link");', 'linkTag.rel = "stylesheet";', 'linkTag.type = "text/css";', 'linkTag.onload = resolve;', 'linkTag.onerror = function(event) {', Template.indent(['var request = event && event.target && event.target.src || fullhref;', 'var err = new Error("Loading CSS chunk " + chunkId + " failed.\\n(" + request + ")");', 'err.code = "CSS_CHUNK_LOAD_FAILED";', 'err.request = request;', 'delete installedCssChunks[chunkId]', 'linkTag.parentNode.removeChild(linkTag)', 'reject(err);']), '};', 'linkTag.href = fullhref;', crossOriginLoading ? Template.asString([`if (linkTag.href.indexOf(window.location.origin + '/') !== 0) {`, Template.indent(`linkTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', 'var head = document.getElementsByTagName("head")[0];', 'head.appendChild(linkTag);']), '}).then(function() {', Template.indent(['installedCssChunks[chunkId] = 0;']), '}));']), '}']);
         }
@@ -298,7 +368,14 @@
 
-  getCssChunkObject(mainChunk) {
+  getChunkModules(chunk, chunkGraph) {
+    return typeof chunkGraph !== 'undefined' ? chunkGraph.getOrderedChunkModulesIterable(chunk, compareModulesByIdentifier) : chunk.modulesIterable;
+  }
+
+  getCssChunkObject(mainChunk, compilation) {
     const obj = {};
+    const {
+      chunkGraph
+    } = compilation;
 
     for (const chunk of mainChunk.getAllAsyncChunks()) {
-      for (const module of chunk.modulesIterable) {
+      for (const module of this.getChunkModules(chunk, chunkGraph)) {
         if (module.type === MODULE_TYPE) {
@@ -317,4 +394,5 @@ obj[chunk.id] = 1;
     const [chunkGroup] = chunk.groupsIterable;
+    const moduleIndexFunctionName = typeof compilation.chunkGraph !== 'undefined' ? 'getModulePostOrderIndex' : 'getModuleIndex2';
 
-    if (typeof chunkGroup.getModuleIndex2 === 'function') {
+    if (typeof chunkGroup[moduleIndexFunctionName] === 'function') {
       // Store dependencies for modules
@@ -330,3 +408,3 @@ const moduleDependencies = new Map(modules.map(m => [m, new Set()]));
             module: m,
-            index: cg.getModuleIndex2(m)
+            index: cg[moduleIndexFunctionName](m)
           };
@@ -333,0 +411,0 @@ }) // eslint-disable-next-line no-undefined

dist/loader-options.json

@@ -23,4 +23,14 @@ {
       "type": "boolean"
+    },
+    "modules": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "namedExport": {
+          "description": "Enables/disables ES modules named export for locals (https://webpack.js.org/plugins/mini-css-extract-plugin/#namedexport).",
+          "type": "boolean"
+        }
+      }
     }
   }
 }

dist/loader.js

@@ -15,2 +15,4 @@ "use strict";
 
+var _webpack = require("webpack");
+
 var _NodeTemplatePlugin = _interopRequireDefault(require("webpack/lib/node/NodeTemplatePlugin"));
@@ -26,2 +28,4 @@
 
+var _NormalModule = _interopRequireDefault(require("webpack/lib/NormalModule"));
+
 var _schemaUtils = _interopRequireDefault(require("schema-utils"));
@@ -42,2 +46,3 @@
 const pluginName = 'mini-css-extract-plugin';
+const isWebpack4 = _webpack.version[0] === '4';
 
@@ -70,5 +75,12 @@ function hotLoader(content, context) {
 
-function findModuleById(modules, id) {
+function findModuleById(compilation, id) {
+  const {
+    modules,
+    chunkGraph
+  } = compilation;
+
   for (const module of modules) {
-    if (module.id === id) {
+    const moduleId = typeof chunkGraph !== 'undefined' ? chunkGraph.getModuleId(module) : module.id;
+
+    if (moduleId === id) {
       return module;
@@ -103,3 +115,4 @@ }
   childCompiler.hooks.thisCompilation.tap(`${pluginName} loader`, compilation => {
-    compilation.hooks.normalModuleLoader.tap(`${pluginName} loader`, (loaderContext, module) => {
+    const normalModuleHook = typeof _NormalModule.default.getCompilationHooks !== 'undefined' ? _NormalModule.default.getCompilationHooks(compilation).loader : compilation.hooks.normalModuleLoader;
+    normalModuleHook.tap(`${pluginName} loader`, (loaderContext, module) => {
       // eslint-disable-next-line no-param-reassign
@@ -121,11 +134,27 @@ loaderContext.emitFile = this.emitFile;
   let source;
-  childCompiler.hooks.afterCompile.tap(pluginName, compilation => {
-    source = compilation.assets[childFilename] && compilation.assets[childFilename].source(); // Remove all chunk assets
 
-    compilation.chunks.forEach(chunk => {
-      chunk.files.forEach(file => {
-        delete compilation.assets[file]; // eslint-disable-line no-param-reassign
+  if (isWebpack4) {
+    childCompiler.hooks.afterCompile.tap(pluginName, compilation => {
+      source = compilation.assets[childFilename] && compilation.assets[childFilename].source(); // Remove all chunk assets
+
+      compilation.chunks.forEach(chunk => {
+        chunk.files.forEach(file => {
+          delete compilation.assets[file]; // eslint-disable-line no-param-reassign
+        });
       });
     });
-  });
+  } else {
+    childCompiler.hooks.compilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap(pluginName, () => {
+        source = compilation.assets[childFilename] && compilation.assets[childFilename].source(); // Remove all chunk assets
+
+        compilation.chunks.forEach(chunk => {
+          chunk.files.forEach(file => {
+            delete compilation.assets[file]; // eslint-disable-line no-param-reassign
+          });
+        });
+      });
+    });
+  }
+
   const callback = this.async();
@@ -169,10 +198,23 @@ childCompiler.runAsChild((err, entries, compilation) => {
     let locals;
+    const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
+    const namedExport = esModule && options.modules && options.modules.namedExport;
 
     try {
+      const originalExports = evalModuleCode(this, source, request); // eslint-disable-next-line no-underscore-dangle
+
+      exports = originalExports.__esModule ? originalExports.default : originalExports;
+
+      if (namedExport) {
+        locals = '';
+        Object.keys(originalExports).forEach(key => {
+          if (key !== 'default') {
+            locals += `\nexport const ${key} = "${originalExports[key]}";`;
+          }
+        });
+      } else {
+        locals = exports && exports.locals;
+      }
+
       let dependencies;
-      let exports = evalModuleCode(this, source, request); // eslint-disable-next-line no-underscore-dangle
 
-      exports = exports.__esModule ? exports.default : exports;
-      locals = exports && exports.locals;
-
       if (!Array.isArray(exports)) {
@@ -182,3 +224,3 @@ dependencies = [[null, exports]];
         dependencies = exports.map(([id, content, media, sourceMap]) => {
-          const module = findModuleById(compilation.modules, id);
+          const module = findModuleById(compilation, id);
           return {
@@ -199,4 +241,3 @@ identifier: module.identifier(),
 
-    const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
-    const result = locals ? `\n${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(locals)};` : esModule ? `\nexport {};` : '';
+    const result = locals ? namedExport ? locals : `\n${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(locals)};` : esModule ? `\nexport {};` : '';
     let resultSource = `// extracted by ${pluginName}`;
@@ -210,4 +251,5 @@ resultSource += options.hmr ? hotLoader(result, {
   });
-}
+} // eslint-disable-next-line func-names
 
+
 function _default() {}

package.json

 {
   "name": "mini-css-extract-plugin",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "extracts CSS into separate files",
@@ -25,4 +25,4 @@ "license": "MIT",
     "commitlint": "commitlint --from=master",
-    "lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different",
-    "lint:js": "eslint --cache src test",
+    "lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
+    "lint:js": "eslint --cache .",
     "lint": "npm-run-all -l -p \"lint:**\"",
@@ -33,4 +33,4 @@ "prepare": "npm run build",
     "test:only": "cross-env NODE_ENV=test jest",
-    "test:watch": "cross-env NODE_ENV=test jest --watch",
-    "test:coverage": "cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage",
+    "test:watch": "npm run test:only -- --watch",
+    "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
@@ -54,27 +54,27 @@ "pretest": "npm run lint",
   "devDependencies": {
-    "@babel/cli": "^7.7.5",
-    "@babel/core": "^7.7.5",
-    "@babel/preset-env": "^7.7.6",
-    "@commitlint/cli": "^8.1.0",
-    "@commitlint/config-conventional": "^8.1.0",
-    "@webpack-contrib/defaults": "^5.0.2",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.11.4",
+    "@babel/preset-env": "^7.11.0",
+    "@commitlint/cli": "^9.1.2",
+    "@commitlint/config-conventional": "^9.1.2",
+    "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-eslint": "^10.0.2",
-    "babel-jest": "^24.8.0",
-    "cross-env": "^5.2.0",
-    "css-loader": "^3.3.2",
-    "del": "^4.1.1",
-    "del-cli": "^1.1.0",
+    "babel-jest": "^26.3.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "^4.2.2",
+    "del": "^5.1.0",
+    "del-cli": "^3.0.1",
     "es-check": "^5.0.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.7.0",
     "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-import": "^2.19.1",
-    "file-loader": "^4.0.0",
-    "husky": "^3.0.0",
-    "jest": "^24.8.0",
-    "lint-staged": "^9.5.0",
+    "eslint-plugin-import": "^2.22.0",
+    "file-loader": "^6.0.0",
+    "husky": "^4.2.5",
+    "jest": "^24.9.0",
+    "lint-staged": "^10.2.13",
     "memfs": "^3.0.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.19.1",
-    "standard-version": "^7.0.1",
+    "prettier": "^2.1.1",
+    "standard-version": "^9.0.0",
     "webpack": "^4.44.1",
@@ -81,0 +81,0 @@ "webpack-cli": "^3.3.6",

README.md

@@ -191,2 +191,81 @@ <div align="center">
 
+### `modules`
+
+Type: `Object`
+Default: `undefined`
+
+Configuration CSS Modules.
+
+#### `namedExport`
+
+Type: `Boolean`
+Default: `false`
+
+Enables/disables ES modules named export for locals.
+
+> ⚠ Names of locals are converted to `camelCase`.
+
+> ⚠ It is not allowed to use JavaScript reserved words in css class names.
+
+> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` and `MiniCssExtractPlugin.loader` should be enabled.
+
+**styles.css**
+
+```css
+.foo-baz {
+  color: red;
+}
+.bar {
+  color: blue;
+}
+```
+
+**index.js**
+
+```js
+import { fooBaz, bar } from './styles.css';
+
+console.log(fooBaz, bar);
+```
+
+You can enable a ES module named export using:
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  plugins: [new MiniCssExtractPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              esModule: true,
+              modules: {
+                namedExport: true,
+              },
+            },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: true,
+              modules: {
+                namedExport: true,
+                localIdentName: 'foo__[name]__[local]',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Examples
@@ -193,0 +272,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65690

increased by12.67%

Lines of code

884

increased by14.21%

Number of lines in readme file

691

increased by12.91%

No dependency changes