css-loader 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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.0"></a>
+# [2.1.0](https://github.com/webpack-contrib/css-loader/compare/v2.0.2...v2.1.0) (2018-12-25)
+
+
+### Features
+
+* support `image-set` without `url` ([#879](https://github.com/webpack-contrib/css-loader/issues/879)) ([21884e2](https://github.com/webpack-contrib/css-loader/commit/21884e2))
+
+
+
 <a name="2.0.2"></a>
 ## [2.0.2](https://github.com/webpack-contrib/css-loader/compare/v2.0.1...v2.0.2) (2018-12-21)
 

package/dist/index.js

@@ -230,12 +230,13 @@ function loader(content, map, meta) {
       } = message;
       const {
         url,
-        placeholder
+        placeholder,
+        needQuotes
       } = item; // Remove `#hash` and `?#hash` from `require`
 
       const [normalizedUrl, singleQuery, hashValue] = url.split(/(\?)?#/);
       const hash = singleQuery || hashValue ? `"${singleQuery ? '?' : ''}${hashValue ? `#${hashValue}` : ''}"` : '';
-      imports.push(`var ${placeholder} = urlEscape(require(${(0, _loaderUtils.stringifyRequest)(this, (0, _loaderUtils.urlToRequest)(normalizedUrl))})${hash ? ` + ${hash}` : ''});`);
+      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;

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

@@ -9,43 +9,63 @@ 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';
+const isUrlFunc = /url/i;
+const isImageSetFunc = /^(?:-webkit-)?image-set$/i;
+const needParseDecl = /(?:url|(?:-webkit-)?image-set)\(/i;
+
+function getNodeFromUrlFunc(node) {
+  return node.nodes && node.nodes[0];
+}
 
-function getArg(nodes) {
-  return nodes.length !== 0 && nodes[0].type === 'string' ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
+function getUrlFromUrlFunc(node) {
+  return node.nodes.length !== 0 && node.nodes[0].type === 'string' ? node.nodes[0].value : _postcssValueParser.default.stringify(node.nodes);
 }
 
 function walkUrls(parsed, callback) {
   parsed.walk(node => {
-    if (node.type !== 'function' || node.value.toLowerCase() !== 'url') {
+    if (node.type !== 'function') {
       return;
     }
-    /* eslint-disable */
 
+    if (isUrlFunc.test(node.value)) {
+      callback(getNodeFromUrlFunc(node), getUrlFromUrlFunc(node), false); // Do not traverse inside `url`
+      // eslint-disable-next-line consistent-return
+
+      return false;
+    }
 
-    node.before = '';
-    node.after = '';
-    /* eslint-enable */
+    if (isImageSetFunc.test(node.value)) {
+      node.nodes.forEach(nNode => {
+        if (nNode.type === 'function' && isUrlFunc.test(nNode.value)) {
+          callback(getNodeFromUrlFunc(nNode), getUrlFromUrlFunc(nNode), false);
+        }
 
-    callback(node, getArg(node.nodes)); // Do not traverse inside url
-    // eslint-disable-next-line consistent-return
+        if (nNode.type === 'string') {
+          callback(nNode, nNode.value, true);
+        }
+      }); // Do not traverse inside `image-set`
+      // eslint-disable-next-line consistent-return
 
-    return false;
+      return false;
+    }
   });
 }
 
 function walkDeclsWithUrl(css, result, filter) {
   const items = [];
   css.walkDecls(decl => {
-    if (!/url\(/i.test(decl.value)) {
+    if (!needParseDecl.test(decl.value)) {
       return;
     }
 
     const parsed = (0, _postcssValueParser.default)(decl.value);
     const urls = [];
-    walkUrls(parsed, (node, url) => {
+    walkUrls(parsed, (node, url, needQuotes) => {
       if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {
         result.warn(`Unable to find uri in '${decl.toString()}'`, {
           node: decl
@@ -57,7 +77,10 @@ function walkDeclsWithUrl(css, result, filter) {
         return;
       }
 
-      urls.push(url);
+      urls.push({
+        url,
+        needQuotes
+      });
     });
 
     if (urls.length === 0) {
@@ -73,48 +96,56 @@ function walkDeclsWithUrl(css, result, filter) {
   return items;
 }
 
-function flatten(array) {
-  return array.reduce((acc, d) => [...acc, ...d], []);
-}
-
-function uniq(array) {
-  return array.reduce((acc, d) => acc.indexOf(d) === -1 ? [...acc, d] : acc, []);
-}
-
 var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
   const traversed = walkDeclsWithUrl(css, result, options.filter);
-  const paths = uniq(flatten(traversed.map(item => item.urls)));
+
+  const paths = _lodash.default.uniqWith(_lodash.default.flatten(traversed.map(item => item.urls)), _lodash.default.isEqual);
 
   if (paths.length === 0) {
     return;
   }
 
-  const urls = {};
+  const placeholders = [];
   paths.forEach((path, index) => {
     const placeholder = `___CSS_LOADER_URL___${index}___`;
-    urls[path] = placeholder;
+    const {
+      url,
+      needQuotes
+    } = path;
+    placeholders.push({
+      placeholder,
+      path
+    });
     result.messages.push({
       pluginName,
       type: 'url',
       item: {
-        url: path,
-        placeholder
+        url,
+        placeholder,
+        needQuotes
       }
     });
   });
   traversed.forEach(item => {
-    walkUrls(item.parsed, (node, url) => {
-      const value = urls[url];
+    walkUrls(item.parsed, (node, url, needQuotes) => {
+      const value = _lodash.default.find(placeholders, {
+        path: {
+          url,
+          needQuotes
+        }
+      });
 
       if (!value) {
         return;
-      } // eslint-disable-next-line no-param-reassign
+      }
+
+      const {
+        placeholder
+      } = value; // eslint-disable-next-line no-param-reassign
 
+      node.type = 'word'; // eslint-disable-next-line no-param-reassign
 
-      node.nodes = [{
-        type: 'word',
-        value
-      }];
+      node.value = placeholder;
     }); // eslint-disable-next-line no-param-reassign
 
     item.decl.value = item.parsed.toString();

package/dist/runtime/url-escape.js

@@ -1,6 +1,6 @@
 "use strict";
 
-module.exports = function escape(url) {
+module.exports = function escape(url, needQuotes) {
   if (typeof url !== 'string') {
     return url;
   } // If url is already wrapped in quotes, remove them
@@ -12,7 +12,7 @@ module.exports = function escape(url) {
   // See https://drafts.csswg.org/css-values-3/#urls
 
 
-  if (/["'() \t\n]/.test(url)) {
+  if (/["'() \t\n]/.test(url) || needQuotes) {
     return '"' + url.replace(/"/g, '\\"').replace(/\n/g, '\\n') + '"';
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "icss-utils": "^4.0.0",
-    "loader-utils": "^1.0.2",
+    "loader-utils": "^1.2.1",
     "lodash": "^4.17.11",
     "postcss": "^7.0.6",
     "postcss-modules-extract-imports": "^2.0.0",