[change] ネストしたspriteへのパスへのワークアラウンド

Author: kogai

lib/loader.js

@@ -5,15 +5,26 @@
 var path = require("path");
 var loaderUtils = require("loader-utils");
 var camelCase = require("lodash.camelcase");
+var escapeRegexp = require("escape-regexp");
 var processCss = require("./processCss");
 var getImportPrefix = require("./getImportPrefix");
 
+const pathtoSprites = path.resolve('client/images/sprites');
+const nestedImport = escapeRegexp('../../../styles');
 
 module.exports = function(content, map) {
 	// ワークアラウンド
 	// postcss-spritesに各コンポーネント用のsprite.pngを渡す方法がわからない
-	if (content.match(/url\(client\/images\/sprites/)) {
-		content = content.replace(/url\(client\/images\/sprites\//g, 'url(../../images/sprites/');
+	const parsedMap = JSON.parse(map);
+	const hasSprite = content.match(/url\(client\/images\/sprites/) ? true : false;
+	const isNested = parsedMap.sources.filter((source)=> source.match(nestedImport)).length > 0;
+
+	if (hasSprite) {
+		if (isNested) {
+			content = content.replace(/url\(client\/images\/sprites\//g, 'url(../../../images/sprites/');
+		} else {
+			content = content.replace(/url\(client\/images\/sprites\//g, 'url(../../images/sprites/');
+		}
 	}
 
 	if(this.cacheable) this.cacheable();

package.json

@@ -6,9 +6,10 @@
   "dependencies": {
     "css-selector-tokenizer": "^0.5.1",
     "cssnano": ">=2.6.1 <4",
+    "escape-regexp": "0.0.1",
     "loader-utils": "~0.2.2",
-    "object-assign": "^4.0.1",
     "lodash.camelcase": "^3.0.1",
+    "object-assign": "^4.0.1",
     "postcss": "^5.0.6",
     "postcss-modules-extract-imports": "1.0.0-beta2",
     "postcss-modules-local-by-default": "^1.0.0",