css-loader 3.4.0 → 3.5.1

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 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.5.1](https://github.com/webpack-contrib/css-loader/compare/v3.5.0...v3.5.1) (2020-04-07)
+
+
+### Bug Fixes
+
+* don't generate an invalid code for `locals` ([#1072](https://github.com/webpack-contrib/css-loader/issues/1072)) ([866b84a](https://github.com/webpack-contrib/css-loader/commit/866b84acd7fd47651f741ca1e6cf7081c2bbe357))
+
+## [3.5.0](https://github.com/webpack-contrib/css-loader/compare/v3.4.2...v3.5.0) (2020-04-06)
+
+
+### Features
+
+* accept semver compatible postcss AST ([#1049](https://github.com/webpack-contrib/css-loader/issues/1049)) ([14c4faa](https://github.com/webpack-contrib/css-loader/commit/14c4faae87305c9b965de4f468bb1e118f6b84cc))
+* allow to determinate css modules using the `modules.auto` option, please look at an [example](https://github.com/webpack-contrib/css-loader#pure-css-css-modules-and-postcss) of how you can simplify the configuration. ([#1067](https://github.com/webpack-contrib/css-loader/issues/1067)) ([c673cf4](https://github.com/webpack-contrib/css-loader/commit/c673cf418e901c5050bc697eb45401dc9a42c477))
+* the `modules.exportGlobals` option for export global classes and ids ([#1069](https://github.com/webpack-contrib/css-loader/issues/1069)) ([519e5f4](https://github.com/webpack-contrib/css-loader/commit/519e5f41539f4c87ec96db0a908aaadecc284a6c))
+* the `modules.mode` option may be a function ([#1065](https://github.com/webpack-contrib/css-loader/issues/1065)) ([0d8ac3b](https://github.com/webpack-contrib/css-loader/commit/0d8ac3bcb831bc747657c914aba106b93840737e))
+
+### [3.4.2](https://github.com/webpack-contrib/css-loader/compare/v3.4.1...v3.4.2) (2020-01-10)
+
+
+### Bug Fixes
+
+* do not duplicate css on `composes` ([#1040](https://github.com/webpack-contrib/css-loader/issues/1040)) ([df79602](https://github.com/webpack-contrib/css-loader/commit/df7960277be20ec80e9be1a41ac53baf69847fa0))
+
+### [3.4.1](https://github.com/webpack-contrib/css-loader/compare/v3.4.0...v3.4.1) (2020-01-03)
+
+
+### Bug Fixes
+
+* do not output `undefined` when sourceRoot is unavailable ([#1036](https://github.com/webpack-contrib/css-loader/issues/1036)) ([ded2a79](https://github.com/webpack-contrib/css-loader/commit/ded2a797271f2adf864bf92300621c024974bc79))
+* don't output invalid es5 code when locals do not exists ([#1035](https://github.com/webpack-contrib/css-loader/issues/1035)) ([b60e62a](https://github.com/webpack-contrib/css-loader/commit/b60e62a655719cc1779fae7d577af6ad6cf42135))
+
 ## [3.4.0](https://github.com/webpack-contrib/css-loader/compare/v3.3.1...v3.4.0) (2019-12-17)
 
 

package/README.md

@@ -528,6 +528,7 @@ module.exports = {
         options: {
           modules: {
             mode: 'local',
+            exportGlobals: true,
             localIdentName: '[path][name]__[local]--[hash:base64:5]',
             context: path.resolve(__dirname, 'src'),
             hashPrefix: 'my-custom-hash',
@@ -539,13 +540,75 @@ module.exports = {
 };
 ```
 
+##### `auto`
+
+Type: `Boolean|RegExp`
+Default: `'undefined'`
+
+Allows auto enable css modules based on filename.
+
+###### `Boolean`
+
+Possible values:
+
+- `true` - enable css modules for all files for which `/\.module\.\w+$/i.test(filename)` return true
+- `false` - disable css modules
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          modules: {
+            auto: true,
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+###### `RegExp`
+
+Enable css modules for files based on a filename and satisfying your regex.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          modules: {
+            auto: /\.custom-module\.\w+$/i,
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ##### `mode`
 
-Type: `String`
+Type: `String|Function`
 Default: `'local'`
 
 Setup `mode` option. You can omit the value when you want `local` mode.
 
+###### `String`
+
+Possible values - `local`, `global`, and `pure`.
+
 **webpack.config.js**
 
 ```js
@@ -566,6 +629,70 @@ module.exports = {
 };
 ```
 
+###### `Function`
+
+Allows set different values for the `mode` option based on a filename
+
+Possible return values - `local`, `global`, and `pure`.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          modules: {
+            // Callback must return "local", "global", or "pure" values
+            mode: (resourcePath) => {
+              if (/pure.css$/i.test(resourcePath)) {
+                return 'pure';
+              }
+
+              if (/global.css$/i.test(resourcePath)) {
+                return 'global';
+              }
+
+              return 'local';
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+##### `exportGlobals`
+
+Type: `Boolean`
+Default: `false`
+
+Allow `css-loader` to export names from global class or id, so you can use that as local name.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          modules: {
+            exportGlobals: true,
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ##### `localIdentName`
 
 Type: `String`
@@ -922,9 +1049,9 @@ 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
+### Pure CSS, CSS modules and PostCSS
 
-When you have pure CSS (without CSS modules) and CSS modules in project you can use this setup:
+When you have pure CSS (without CSS modules), CSS modules and PostCSS in your project you can use this setup:
 
 **webpack.config.js**
 
@@ -932,23 +1059,34 @@ When you have pure CSS (without CSS modules) and CSS modules in project you can
 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,
+        // For pure CSS - /\.css$/i,
+        // For Sass/SCSS - /\.((c|sa|sc)ss)$/i,
+        // For Less - /\.((c|le)ss)$/i,
+        test: /\.((c|sa|sc)ss)$/i,
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
-              modules: true,
+              // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
+              // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
+              importLoaders: 1,
+              // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
+              modules: { auto: true },
             },
           },
+          {
+            loader: 'postcss-loader',
+            options: { plugins: () => [postcssPresetEnv({ stage: 0 })] },
+          },
+          // Can be `less-loader`
+          // The `test` property should be `\.less/i`
+          {
+            test: /\.s[ac]ss$/i,
+            loader: 'sass-loader',
+          },
         ],
       },
       {

package/dist/index.js

@@ -5,13 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = loader;
 
-var _schemaUtils = _interopRequireDefault(require("schema-utils"));
+var _loaderUtils = require("loader-utils");
 
 var _postcss = _interopRequireDefault(require("postcss"));
 
 var _package = _interopRequireDefault(require("postcss/package.json"));
 
-var _loaderUtils = require("loader-utils");
+var _schemaUtils = _interopRequireDefault(require("schema-utils"));
+
+var _semver = require("semver");
+
+var _CssSyntaxError = _interopRequireDefault(require("./CssSyntaxError"));
+
+var _Warning = _interopRequireDefault(require("./Warning"));
 
 var _options = _interopRequireDefault(require("./options.json"));
 
@@ -19,10 +25,6 @@ var _plugins = require("./plugins");
 
 var _utils = require("./utils");
 
-var _Warning = _interopRequireDefault(require("./Warning"));
-
-var _CssSyntaxError = _interopRequireDefault(require("./CssSyntaxError"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /*
@@ -39,22 +41,30 @@ function loader(content, map, meta) {
   const sourceMap = options.sourceMap || false;
   const plugins = [];
 
-  if (options.modules) {
+  if ((0, _utils.shouldUseModulesPlugins)(options.modules, this.resourcePath)) {
     plugins.push(...(0, _utils.getModulesPlugins)(options, this));
   }
 
   const exportType = options.onlyLocals ? 'locals' : 'full';
-  plugins.push((0, _plugins.icssParser)());
+  const preRequester = (0, _utils.getPreRequester)(this);
+
+  const urlHandler = url => (0, _loaderUtils.stringifyRequest)(this, preRequester(options.importLoaders) + url);
+
+  plugins.push((0, _plugins.icssParser)({
+    urlHandler
+  }));
 
   if (options.import !== false && exportType === 'full') {
     plugins.push((0, _plugins.importParser)({
-      filter: (0, _utils.getFilter)(options.import, this.resourcePath)
+      filter: (0, _utils.getFilter)(options.import, this.resourcePath),
+      urlHandler
     }));
   }
 
   if (options.url !== false && exportType === 'full') {
     plugins.push((0, _plugins.urlParser)({
-      filter: (0, _utils.getFilter)(options.url, this.resourcePath, value => (0, _loaderUtils.isUrlRequest)(value))
+      filter: (0, _utils.getFilter)(options.url, this.resourcePath, value => (0, _loaderUtils.isUrlRequest)(value)),
+      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, url)
     }));
   } // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
 
@@ -64,7 +74,7 @@ function loader(content, map, meta) {
       ast
     } = meta;
 
-    if (ast && ast.type === 'postcss' && ast.version === _package.default.version) {
+    if (ast && ast.type === 'postcss' && (0, _semver.satisfies)(ast.version, `^${_package.default.version}`)) {
       // eslint-disable-next-line no-param-reassign
       content = ast.root;
     }
@@ -80,10 +90,15 @@ function loader(content, map, meta) {
       annotation: false
     } : false
   }).then(result => {
-    result.warnings().forEach(warning => this.emitWarning(new _Warning.default(warning)));
+    for (const warning of result.warnings()) {
+      this.emitWarning(new _Warning.default(warning));
+    }
+
     const imports = [];
+    const apiImports = [];
+    const urlReplacements = [];
+    const icssReplacements = [];
     const exports = [];
-    const replacers = [];
 
     for (const message of result.messages) {
       // eslint-disable-next-line default-case
@@ -92,25 +107,32 @@ function loader(content, map, meta) {
           imports.push(message.value);
           break;
 
-        case 'export':
-          exports.push(message.value);
+        case 'api-import':
+          apiImports.push(message.value);
           break;
 
-        case 'replacer':
-          replacers.push(message.value);
+        case 'url-replacement':
+          urlReplacements.push(message.value);
+          break;
+
+        case 'icss-replacement':
+          icssReplacements.push(message.value);
+          break;
+
+        case 'export':
+          exports.push(message.value);
           break;
       }
     }
 
     const {
-      importLoaders,
       localsConvention
     } = options;
     const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
-    const importCode = (0, _utils.getImportCode)(this, imports, exportType, sourceMap, importLoaders, esModule);
-    const moduleCode = (0, _utils.getModuleCode)(this, result, exportType, sourceMap, replacers);
-    const exportCode = (0, _utils.getExportCode)(this, exports, exportType, replacers, localsConvention, esModule);
-    return callback(null, [importCode, moduleCode, exportCode].join(''));
+    const importCode = (0, _utils.getImportCode)(this, exportType, imports, esModule);
+    const moduleCode = (0, _utils.getModuleCode)(result, exportType, sourceMap, apiImports, urlReplacements, icssReplacements, esModule);
+    const exportCode = (0, _utils.getExportCode)(exports, exportType, localsConvention, icssReplacements, esModule);
+    return callback(null, `${importCode}${moduleCode}${exportCode}`);
   }).catch(error => {
     callback(error.name === 'CssSyntaxError' ? new _CssSyntaxError.default(error) : error);
   });

package/dist/options.json

@@ -36,8 +36,28 @@
           "type": "object",
           "additionalProperties": false,
           "properties": {
+            "auto": {
+              "anyOf": [
+                {
+                  "type": "object"
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
+            },
             "mode": {
-              "enum": ["local", "global", "pure"]
+              "anyOf": [
+                {
+                  "enum": ["local", "global", "pure"]
+                },
+                {
+                  "instanceof": "Function"
+                }
+              ]
+            },
+            "exportGlobals": {
+              "type": "boolean"
             },
             "localIdentName": {
               "type": "string"
@@ -83,7 +103,7 @@
           "type": "boolean"
         },
         {
-          "type": "number"
+          "type": "integer"
         }
       ]
     },

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

@@ -13,9 +13,7 @@ var _loaderUtils = require("loader-utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const pluginName = 'postcss-icss-parser';
-
-function normalizeIcssImports(icssImports) {
+function makeRequestableIcssImports(icssImports) {
   return Object.keys(icssImports).reduce((accumulator, url) => {
     const tokensMap = icssImports[url];
     const tokens = Object.keys(tokensMap);
@@ -40,58 +38,63 @@ function normalizeIcssImports(icssImports) {
   }, {});
 }
 
-var _default = _postcss.default.plugin(pluginName, () => function process(css, result) {
+var _default = _postcss.default.plugin('postcss-icss-parser', options => (css, result) => {
   const importReplacements = Object.create(null);
-  const {
-    icssImports,
-    icssExports
-  } = (0, _icssUtils.extractICSS)(css);
-  const normalizedIcssImports = normalizeIcssImports(icssImports);
-  Object.keys(normalizedIcssImports).forEach((url, importIndex) => {
+  const extractedICSS = (0, _icssUtils.extractICSS)(css);
+  const icssImports = makeRequestableIcssImports(extractedICSS.icssImports);
+
+  for (const [importIndex, url] of Object.keys(icssImports).entries()) {
     const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;
     result.messages.push({
-      pluginName,
       type: 'import',
       value: {
-        type: 'icss-import',
         importName,
-        url
+        url: options.urlHandler ? options.urlHandler(url) : url
+      }
+    }, {
+      type: 'api-import',
+      value: {
+        type: 'internal',
+        importName,
+        dedupe: true
       }
     });
-    const tokenMap = normalizedIcssImports[url];
+    const tokenMap = icssImports[url];
     const tokens = Object.keys(tokenMap);
-    tokens.forEach((token, replacementIndex) => {
+
+    for (const [replacementIndex, token] of tokens.entries()) {
       const replacementName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
       const localName = tokenMap[token];
       importReplacements[token] = replacementName;
       result.messages.push({
-        pluginName,
-        type: 'replacer',
+        type: 'icss-replacement',
         value: {
-          type: 'icss-import',
-          importName,
           replacementName,
+          importName,
           localName
         }
       });
-    });
-  });
+    }
+  }
 
   if (Object.keys(importReplacements).length > 0) {
     (0, _icssUtils.replaceSymbols)(css, importReplacements);
   }
 
-  Object.keys(icssExports).forEach(name => {
+  const {
+    icssExports
+  } = extractedICSS;
+
+  for (const name of Object.keys(icssExports)) {
     const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
     result.messages.push({
-      pluginName,
       type: 'export',
       value: {
         name,
         value
       }
     });
-  });
+  }
 });
 
 exports.default = _default;