css-loader 2.1.0 → 2.1.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.
 
+<a name="2.1.1"></a>
+## [2.1.1](https://github.com/webpack-contrib/css-loader/compare/v2.1.0...v2.1.1) (2019-03-07)
+
+
+### Bug Fixes
+
+* do not break selector with escaping ([#896](https://github.com/webpack-contrib/css-loader/issues/896)) ([0ba8c66](https://github.com/webpack-contrib/css-loader/commit/0ba8c66))
+* source map generation when `sourceRoot` is present ([#901](https://github.com/webpack-contrib/css-loader/issues/901)) ([e9ce745](https://github.com/webpack-contrib/css-loader/commit/e9ce745))
+* sourcemap generating when previous loader pass sourcemap as string ([#905](https://github.com/webpack-contrib/css-loader/issues/905)) ([3797e4d](https://github.com/webpack-contrib/css-loader/commit/3797e4d))
+
+
+
 <a name="2.1.0"></a>
 # [2.1.0](https://github.com/webpack-contrib/css-loader/compare/v2.0.2...v2.1.0) (2018-12-25)
 

package/README.md

@@ -109,23 +109,26 @@ 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}`  |     `false`     | Enable/Disable CSS Modules and setup mode   |
-|   **[`localIdentName`](#localidentname)**   |      `{String}`       | `[hash:base64]` | Configure the generated ident               |
-|        **[`sourceMap`](#sourcemap)**        |      `{Boolean}`      |     `false`     | Enable/Disable Sourcemaps                   |
-|        **[`camelCase`](#camelcase)**        |  `{Boolean\|String}`  |     `false`     | Export Classnames in CamelCase              |
-|    **[`importLoaders`](#importloaders)**    |      `{Number}`       |       `0`       | Number of loaders applied before CSS loader |
-| **[`exportOnlyLocals`](#exportonlylocals)** |      `{Boolean}`      |     `false`     | Export only locals                          |
+|                    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}`  |     `false`     | Enable/Disable CSS Modules and setup mode                                |
+|   **[`localIdentName`](#localidentname)**   |      `{String}`       | `[hash:base64]` | Configure the generated ident                                            |
+|          **[`context`](#context)**          |      `{String}`       |   `undefined`   | Allow to redefine basic loader context for local ident name              |
+|       **[`hashPrefix`](#hashprefix)**       |      `{String}`       |   `undefined`   | Allow to add custom hash to generate more unique classes                 |
+|    **[`getLocalIdent`](#getlocalident)**    |     `{Function}`      |   `undefined`   | Configure the function to generate classname based on a different schema |
+|        **[`sourceMap`](#sourcemap)**        |      `{Boolean}`      |     `false`     | Enable/Disable Sourcemaps                                                |
+|        **[`camelCase`](#camelcase)**        |  `{Boolean\|String}`  |     `false`     | Export Classnames in CamelCase                                           |
+|    **[`importLoaders`](#importloaders)**    |      `{Number}`       |       `0`       | Number of loaders applied before CSS loader                              |
+| **[`exportOnlyLocals`](#exportonlylocals)** |      `{Boolean}`      |     `false`     | Export only locals                                                       |
 
 ### `url`
 
 Type: `Boolean|Function`
 Default: `true`
 
-Control `url()` resolving. Absolute urls are not resolving.
+Control `url()` resolving. Absolute URLs and root-relative URLs are not resolving.
 
 Examples resolutions:
 
@@ -461,7 +464,66 @@ module.exports = {
 };
 ```
 
+### `context`
+
+Type: `String`
+Default: `undefined`
+
+Allow to redefine basic loader context for local ident name.
+By default we use `rootContext` of loader.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        loader: 'css-loader',
+        options: {
+          modules: true,
+          context: path.resolve(__dirname, 'context'),
+        },
+      },
+    ],
+  },
+};
+```
+
+### `hashPrefix`
+
+Type: `String`
+Default: `undefined`
+
+Allow to add custom hash to generate more unique classes.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        loader: 'css-loader',
+        options: {
+          modules: true,
+          hashPrefix: 'hash',
+        },
+      },
+    ],
+  },
+};
+```
+
+### `getLocalIdent`
+
+Type: `Function`
+Default: `undefined`
+
 You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema.
+By default we use built-in function to generate a classname.
 
 **webpack.config.js**
 
@@ -474,9 +536,6 @@ module.exports = {
         loader: 'css-loader',
         options: {
           modules: true,
-          context: path.resolve(__dirname, 'context'), // Allow to redefine basic loader context for `local-ident-name`
-          hashPrefix: 'hash', // Allow to add custom hash to generate more unique classes
-          localIdentName: '[path][name]__[local]--[hash:base64:5]',
           getLocalIdent: (context, localIdentName, localName, options) => {
             return 'whatever_random_class_name';
           },
@@ -490,7 +549,7 @@ module.exports = {
 ### `sourceMap`
 
 Type: `Boolean`
-Default: `true`
+Default: `false`
 
 To include source maps set the `sourceMap` option.
 
@@ -654,7 +713,8 @@ module.exports = {
 ### Extract
 
 For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
-- This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract the CSS when running in production mode. 
+
+- This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract the CSS when running in production mode.
 
 - 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
 
@@ -670,21 +730,15 @@ Please take a moment to read our contributing guidelines if you haven't yet done
 
 [npm]: https://img.shields.io/npm/v/css-loader.svg
 [npm-url]: https://npmjs.com/package/css-loader
-
 [node]: https://img.shields.io/node/v/css-loader.svg
 [node-url]: https://nodejs.org
-
 [deps]: https://david-dm.org/webpack-contrib/css-loader.svg
 [deps-url]: https://david-dm.org/webpack-contrib/css-loader
-
 [tests]: https://img.shields.io/circleci/project/github/webpack-contrib/css-loader.svg
 [tests-url]: https://circleci.com/gh/webpack-contrib/css-loader
-
 [cover]: https://codecov.io/gh/webpack-contrib/css-loader/branch/master/graph/badge.svg
 [cover-url]: https://codecov.io/gh/webpack-contrib/css-loader
-
 [chat]: https://badges.gitter.im/webpack/webpack.svg
 [chat-url]: https://gitter.im/webpack/webpack
-
 [size]: https://packagephobia.now.sh/badge?p=css-loader
 [size-url]: https://packagephobia.now.sh/result?p=css-loader

package/dist/index.js

@@ -21,7 +21,7 @@ var _postcssModulesValues = _interopRequireDefault(require("postcss-modules-valu
 
 var _loaderUtils = require("loader-utils");
 
-var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
+var _normalizePath = _interopRequireDefault(require("normalize-path"));
 
 var _options = _interopRequireDefault(require("./options.json"));
 
@@ -48,13 +48,24 @@ function loader(content, map, meta) {
 
   if (sourceMap) {
     if (map) {
+      // Some loader emit source map as string
+      // Strip any JSON XSSI avoidance prefix from the string (as documented in the source maps specification), and then parse the string as JSON.
       if (typeof map === 'string') {
-        map = JSON.stringify(map);
+        map = JSON.parse(map.replace(/^\)]}'[^\n]*\n/, ''));
+      } // Source maps should use forward slash because it is URLs (https://github.com/mozilla/source-map/issues/91)
+      // We should normalize path because previous loaders like `sass-loader` using backslash when generate source map
+
+
+      if (map.file) {
+        map.file = (0, _normalizePath.default)(map.file);
+      }
+
+      if (map.sourceRoot) {
+        map.sourceRoot = (0, _normalizePath.default)(map.sourceRoot);
       }
 
       if (map.sources) {
-        map.sources = map.sources.map(source => source.replace(/\\/g, '/'));
-        map.sourceRoot = '';
+        map.sources = map.sources.map(source => (0, _normalizePath.default)(source));
       }
     }
   } else {
@@ -110,12 +121,10 @@ function loader(content, map, meta) {
 
   plugins.push((0, _plugins.icssParser)());
   (0, _postcss.default)(plugins).process(content, {
-    // we need a prefix to avoid path rewriting of PostCSS
-    from: `/css-loader!${(0, _loaderUtils.getRemainingRequest)(this).split('!').pop()}`,
+    from: (0, _loaderUtils.getRemainingRequest)(this).split('!').pop(),
     to: (0, _loaderUtils.getCurrentRequest)(this).split('!').pop(),
     map: options.sourceMap ? {
       prev: map,
-      sourcesContent: true,
       inline: false,
       annotation: false
     } : null
@@ -165,7 +174,7 @@ function loader(content, map, meta) {
       switch (options.camelCase) {
         case true:
           addEntry(key);
-          targetKey = (0, _camelCase.default)(key);
+          targetKey = (0, _utils.camelCase)(key);
 
           if (targetKey !== key) {
             addEntry(targetKey);
@@ -184,7 +193,7 @@ function loader(content, map, meta) {
           break;
 
         case 'only':
-          addEntry((0, _camelCase.default)(key));
+          addEntry((0, _utils.camelCase)(key));
           break;
 
         case 'dashesOnly':
@@ -239,24 +248,9 @@ function loader(content, map, meta) {
       imports.push(`var ${placeholder} = urlEscape(require(${(0, _loaderUtils.stringifyRequest)(this, (0, _loaderUtils.urlToRequest)(normalizedUrl))})${hash ? ` + ${hash}` : ''}${needQuotes ? ', true' : ''});`);
       cssAsString = cssAsString.replace(new RegExp(placeholder, 'g'), () => `" + ${placeholder} + "`);
     });
-    let newMap = result.map;
-
-    if (sourceMap && newMap) {
-      // Add a SourceMap
-      newMap = newMap.toJSON();
-
-      if (newMap.sources) {
-        newMap.sources = newMap.sources.map(source => source.split('!').pop().replace(/\\/g, '/'), this);
-        newMap.sourceRoot = '';
-      }
-
-      newMap.file = newMap.file.split('!').pop().replace(/\\/g, '/');
-      newMap = JSON.stringify(newMap);
-    }
-
     const runtimeCode = `exports = module.exports = require(${(0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/api'))})(${!!sourceMap});\n`;
     const importCode = imports.length > 0 ? `// Imports\n${imports.join('\n')}\n\n` : '';
-    const moduleCode = `// Module\nexports.push([module.id, ${cssAsString}, ""${newMap ? `,${newMap}` : ''}]);\n\n`;
+    const moduleCode = `// Module\nexports.push([module.id, ${cssAsString}, ""${result.map ? `,${result.map}` : ''}]);\n\n`;
     const exportsCode = exports.length > 0 ? `// Exports\nexports.locals = {\n${exports.join(',\n')}\n};` : ''; // Embed runtime
 
     return callback(null, runtimeCode + importCode + moduleCode + exportsCode);

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

@@ -9,8 +9,6 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 
-var _lodash = _interopRequireDefault(require("lodash"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pluginName = 'postcss-url-parser';
@@ -96,10 +94,21 @@ function walkDeclsWithUrl(css, result, filter) {
   return items;
 }
 
+function uniqWith(array, comparator) {
+  return array.reduce((acc, d) => !acc.some(item => comparator(d, item)) ? [...acc, d] : acc, []);
+}
+
+function flatten(array) {
+  return array.reduce((a, b) => a.concat(b), []);
+}
+
+function isEqual(value, other) {
+  return value.url === other.url && value.needQuotes === other.needQuotes;
+}
+
 var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
   const traversed = walkDeclsWithUrl(css, result, options.filter);
-
-  const paths = _lodash.default.uniqWith(_lodash.default.flatten(traversed.map(item => item.urls)), _lodash.default.isEqual);
+  const paths = uniqWith(flatten(traversed.map(item => item.urls)), isEqual);
 
   if (paths.length === 0) {
     return;
@@ -128,12 +137,7 @@ var _default = _postcss.default.plugin(pluginName, (options = {}) => function pr
   });
   traversed.forEach(item => {
     walkUrls(item.parsed, (node, url, needQuotes) => {
-      const value = _lodash.default.find(placeholders, {
-        path: {
-          url,
-          needQuotes
-        }
-      });
+      const value = placeholders.find(placeholder => placeholder.path.url === url && placeholder.path.needQuotes === needQuotes);
 
       if (!value) {
         return;

package/dist/utils.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getImportPrefix = getImportPrefix;
 exports.getLocalIdent = getLocalIdent;
+exports.camelCase = camelCase;
 exports.dashesCamelCase = dashesCamelCase;
 exports.getFilter = getFilter;
 exports.placholderRegExps = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
+var _camelcase = _interopRequireDefault(require("camelcase"));
+
 var _loaderUtils = _interopRequireDefault(require("loader-utils"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,6 +22,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
+
+/* eslint-disable line-comment-position */
 const placholderRegExps = {
   importItemG: /___CSS_LOADER_IMPORT___([0-9]+)___/g,
   importItem: /___CSS_LOADER_IMPORT___([0-9]+)___/
@@ -35,10 +40,30 @@ function getImportPrefix(loaderContext, importLoaders) {
   return `-!${loadersRequest}!`;
 }
 
+function camelCase(str) {
+  return (0, _camelcase.default)(str);
+}
+
 function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
 
+const whitespace = '[\\x20\\t\\r\\n\\f]';
+const unescapeRegExp = new RegExp(`\\\\([\\da-f]{1,6}${whitespace}?|(${whitespace})|.)`, 'ig');
+
+function unescape(str) {
+  return str.replace(unescapeRegExp, (_, escaped, escapedWhitespace) => {
+    const high = `0x${escaped}` - 0x10000; // NaN means non-codepoint
+    // Workaround erroneous numeric interpretation of +"0x"
+    // eslint-disable-next-line no-self-compare
+
+    return high !== high || escapedWhitespace ? escaped : high < 0 ? // BMP codepoint
+    String.fromCharCode(high + 0x10000) : // Supplemental Plane codepoint (surrogate pair)
+    // eslint-disable-next-line no-bitwise
+    String.fromCharCode(high >> 10 | 0xd800, high & 0x3ff | 0xdc00);
+  });
+}
+
 function getLocalIdent(loaderContext, localIdentName, localName, options) {
   if (!options.context) {
     // eslint-disable-next-line no-param-reassign
@@ -48,7 +73,7 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
   const request = _path.default.relative(options.context, loaderContext.resourcePath).replace(/\\/g, '/'); // eslint-disable-next-line no-param-reassign
 
 
-  options.content = `${options.hashPrefix + request}+${localName}`; // eslint-disable-next-line no-param-reassign
+  options.content = `${options.hashPrefix + request}+${unescape(localName)}`; // eslint-disable-next-line no-param-reassign
 
   localIdentName = localIdentName.replace(/\[local\]/gi, localName);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -13,20 +13,22 @@
   },
   "scripts": {
     "start": "npm run build -- -w",
+    "prebuild": "npm run clean",
     "build": "cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files",
     "clean": "del-cli dist",
     "commitlint": "commitlint",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "lint": "eslint --cache src test",
-    "prebuild": "npm run clean",
     "prepublish": "npm run build",
     "release": "standard-version",
     "security": "npm audit",
-    "test": "jest",
+    "test:only": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --collectCoverageFrom='src/**/*.js' --coverage",
+    "pretest": "npm run lint",
+    "test": "npm run test:only",
     "ci:lint": "npm run lint && npm run security",
-    "ci:test": "npm run test -- --runInBand",
+    "ci:test": "npm run test:only -- --runInBand",
     "ci:coverage": "npm run test:coverage -- --runInBand",
     "ci:lint:commits": "commitlint --from=origin/master --to=${CIRCLE_SHA1}",
     "defaults": "webpack-defaults"
@@ -40,13 +42,14 @@
     "webpack": "^4.0.0"
   },
   "dependencies": {
-    "icss-utils": "^4.0.0",
-    "loader-utils": "^1.2.1",
-    "lodash": "^4.17.11",
-    "postcss": "^7.0.6",
+    "icss-utils": "^4.1.0",
+    "loader-utils": "^1.2.3",
+    "camelcase": "^5.2.0",
+    "normalize-path": "^3.0.0",
+    "postcss": "^7.0.14",
     "postcss-modules-extract-imports": "^2.0.0",
-    "postcss-modules-local-by-default": "^2.0.3",
-    "postcss-modules-scope": "^2.0.0",
+    "postcss-modules-local-by-default": "^2.0.6",
+    "postcss-modules-scope": "^2.1.0",
     "postcss-modules-values": "^2.0.0",
     "postcss-value-parser": "^3.3.0",
     "schema-utils": "^1.0.0"
@@ -60,17 +63,16 @@
     "@commitlint/config-conventional": "^7.1.2",
     "@webpack-contrib/defaults": "^3.0.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.1.0",
     "cross-env": "^5.2.0",
-    "del": "^3.0.0",
+    "del": "^4.0.0",
     "del-cli": "^1.1.0",
     "eslint": "^5.9.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-prettier": "^3.0.0",
     "file-loader": "^3.0.1",
     "husky": "^1.2.0",
-    "jest": "^23.6.0",
+    "jest": "^24.1.0",
     "lint-staged": "^8.1.0",
     "memory-fs": "^0.4.1",
     "postcss-loader": "^3.0.0",
@@ -78,7 +80,7 @@
     "prettier": "^1.15.2",
     "sass": "^1.15.1",
     "sass-loader": "^7.1.0",
-    "standard-version": "^4.0.0",
+    "standard-version": "^5.0.0",
     "strip-ansi": "^5.0.0",
     "webpack": "^4.26.1"
   },
@@ -117,5 +119,10 @@
     "extends": [
       "@commitlint/config-conventional"
     ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "arrowParens": "always"
   }
 }