feat(index): add cssOutputPath option (option.cssOutputPath)

.gitignore

@@ -5,6 +5,8 @@
 
 # dotfiles
 .*
+!.editorconfig
 !.gitignore
+!.travis.yml
 *~
 *#*

README.md

@@ -61,6 +61,8 @@ use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images
 }
 ```
 
+`textOutputPath` also should be used (together with `useRelativePath` property) to define the output path from extracted file (i.e. css files) if you use them.
+
 #### Filename template placeholders
 
 * `[ext]` the extension of the resource
@@ -152,4 +154,4 @@ MIT
 [cover-url]: https://coveralls.io/github/webpack-contrib/file-loader
 
 [chat]: https://badges.gitter.im/webpack/webpack.svg
-[chat-url]: https://gitter.im/webpack/webpack
+[chat-url]: https://gitter.im/webpack/webpack

index.js

@@ -36,25 +36,49 @@ module.exports = function(content) {
 	});
 
 	var outputPath = "";
-
-	var filePath = this.resourcePath;
-	if (config.useRelativePath) {
-		var issuerContext = this._module && this._module.issuer && this._module.issuer.context || context;
-		var relativeUrl = issuerContext && path.relative(issuerContext, filePath).split(path.sep).join("/");
-		var relativePath = relativeUrl && path.dirname(relativeUrl) + "/";
-		if (~relativePath.indexOf("../")) {
-			outputPath = path.posix.join(outputPath, relativePath, url);
-		} else {
-			outputPath = relativePath + url;
-		}
-		url = relativePath + url;
-	} else if (config.outputPath) {
+	if (config.outputPath) {
 		// support functions as outputPath to generate them dynamically
 		outputPath = (
 			typeof config.outputPath === "function"
 			? config.outputPath(url)
 			: config.outputPath + url
 		);
+	}
+
+	if (config.useRelativePath) {
+		// Only the dirname is needed in this case.
+		outputPath = outputPath.replace(url, "");
+
+		// We have access only to entry point relationships. So we work with this relations.
+		var issuerContext = (this._module && this._module.issuer && this._module.issuer.context) || context;
+		var relativeUrl = issuerContext && path.relative(issuerContext, this.resourcePath);
+		var relativePath = relativeUrl && path.dirname(relativeUrl);
+		var outputDirname = relativePath.replace(/\.\.(\/|\\)/g, "").split(path.sep).join("/");
+
+		// Output path
+		// If the `outputDirname` is pointing to up in relation to the `outputPath`.
+		// We forced him to the webpack output path config. Even though it is empty.
+		if (outputDirname.indexOf(outputPath) !== 0) {
+			outputDirname = outputPath;
+		}
+		outputPath = path.join(outputDirname, url).split(path.sep).join("/");
+
+		// Public path
+		// Entry files doesn't pass through the `file-loader`.
+		// So we don't have access to the files context to compare with your assets context
+		// then we need to create and the same way force the `relativePath` to bundled files
+		// on the webpack output path config folder and manually the same with CSS file.
+		var output = this.options.output || {};
+		if (output.filename && path.extname(output.filename) === ".js") {
+			relativePath = outputDirname;
+		} else if (toString.call(config.textOutputPath) === "[object String]") {
+			var outputPackageDirname = output.path.replace(this.options.context + path.sep, "");
+			var issuerOutput = path.join(context, outputPackageDirname, config.textOutputPath);
+			var assetOutput = path.join(context, outputPackageDirname, outputDirname);
+			relativePath = path.relative(issuerOutput, assetOutput);
+		}
+		url = path.join(relativePath, url).split(path.sep).join("/");
+	} else if (config.outputPath) {
 		url = outputPath;
 	} else {
 		outputPath = url;

test/correct-filename.test.js

@@ -3,137 +3,134 @@ var path = require("path");
 var fileLoader = require("../");
 
 function run(resourcePath, query, content) {
-	content = content || new Buffer("1234");
-	var file = null;
-	var context = {
-		resourcePath: resourcePath,
-		query: "?" + query,
-		options: {
-			context: "/this/is/the/context"
-		},
-		emitFile: function(url, content2) {
-			content2.should.be.eql(content);
-			file = url;
-		}
-	};
+  content = content || new Buffer("1234");
+  var file = null;
+  var context = {
+    resourcePath: resourcePath,
+    query: "?" + query,
+    options: {
+      context: "/this/is/the/context"
+    },
+    emitFile: function(url, content2) {
+      content2.should.be.eql(content);
+      file = url;
+    }
+  };
 
-	var result = fileLoader.call(context, content)
+  var result = fileLoader.call(context, content)
 
-	return {
-		file: file,
-		result: result
-	}
+  return {
+    file: file,
+    result: result
+  }
 }
 function run_with_options(resourcePath,options, content) {
-	content = content || new Buffer("1234");
-	var file = null;
+  content = content || new Buffer("1234");
+  var file = null;
 
-	var context = {
-		resourcePath: resourcePath,
-		options: {
-			"fileLoader": options,
-			context: "/this/is/the/context"
-		},
-    	emitFile: function(url, content2) {
-			content2.should.be.eql(content);
-			file = url;
-		}
-	};
+  var context = {
+    resourcePath: resourcePath,
+    options: {
+      "fileLoader": options,
+      context: "/this/is/the/context"
+    },
+      emitFile: function(url, content2) {
+      content2.should.be.eql(content);
+      file = url;
+    }
+  };
 
-	var result = fileLoader.call(context, content)
+  var result = fileLoader.call(context, content)
 
-	return {
-		file: file,
-		result: result
-	}
+  return {
+    file: file,
+    result: result
+  }
 }
 
 function test(excepted, resourcePath, query, content) {
-	run(resourcePath, query, content).file.should.be.eql(excepted);
+  run(resourcePath, query, content).file.should.be.eql(excepted);
 }
 
 describe("correct-filename", function() {
-	it("should process defaults correctly", function() {
-		test("81dc9bdb52d04dc20036dbd8313ed055.txt", "/file.txt", "");
-		test("81dc9bdb52d04dc20036dbd8313ed055.png", "/file.png", "");
-		test("81dc9bdb52d04dc20036dbd8313ed055.txt", "file.txt", "");
-		test("81dc9bdb52d04dc20036dbd8313ed055.bin", "", "");
-	});
-	it("should process name correctly", function() {
-		test("file.txt", "/file.txt", "name=[name].[ext]");
-		test("file.png", "/file.png", "name=[name].[ext]");
-		test("file.txt", "file.txt", "name=[name].[ext]");
-		test("file.bin", "", "name=[name].[ext]");
-		test("file", "/file.txt", "name=[name]");
-		test("81dc9bdb52d04dc20036dbd8313ed055", "/file.txt", "name=[hash]");
-		test("81dc9bdb52d04dc20036dbd8313ed055/file.txt", "/file.txt", "name=[hash]/[name].[ext]");
-		test("file.txt", "/this/is/the/context/file.txt", "name=[path][name].[ext]");
-		test("dir/file.txt", "/this/is/the/context/dir/file.txt", "name=[path][name].[ext]");
-		test("dir/sub/file.txt", "/this/is/the/context/dir/sub/file.txt", "name=[path][name].[ext]");
-		test("_/_/dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]");
-		test("dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]&context=/this/is");
-	});
-	it("should process hash correctly", function() {
-		test("d93591bdf7860e1e4ee2fca799911215.txt", "/file.txt", "", new Buffer("4321"));
-	});
-	it("should process hash options correctly", function() {
-		test("81dc9.txt", "/file.txt", "name=[hash:5].[ext]");
-		test("d4045.txt", "/file.txt", "name=[sha512:hash:5].[ext]");
-		test("1lQ3UNSdIS0c9dQ5brCZO1.txt", "/file.txt", "name=[hash:base64].[ext]");
-		test("caYJDUvUOiGAdDsiHKffIEj.txt", "/file.txt", "name=[hash:base52].[ext]");
-		test("sntmopgidsdqrofkjywoyldtiij.txt", "/file.txt", "name=[hash:base26].[ext]");
-		test("sntmopgids.txt", "/file.txt", "name=[hash:base26:10].[ext]");
-	});
+  it("should process defaults correctly", function() {
+    test("81dc9bdb52d04dc20036dbd8313ed055.txt", "/file.txt", "");
+    test("81dc9bdb52d04dc20036dbd8313ed055.png", "/file.png", "");
+    test("81dc9bdb52d04dc20036dbd8313ed055.txt", "file.txt", "");
+    test("81dc9bdb52d04dc20036dbd8313ed055.bin", "", "");
+  });
+  it("should process name correctly", function() {
+    test("file.txt", "/file.txt", "name=[name].[ext]");
+    test("file.png", "/file.png", "name=[name].[ext]");
+    test("file.txt", "file.txt", "name=[name].[ext]");
+    test("file.bin", "", "name=[name].[ext]");
+    test("file", "/file.txt", "name=[name]");
+    test("81dc9bdb52d04dc20036dbd8313ed055", "/file.txt", "name=[hash]");
+    test("81dc9bdb52d04dc20036dbd8313ed055/file.txt", "/file.txt", "name=[hash]/[name].[ext]");
+    test("file.txt", "/this/is/the/context/file.txt", "name=[path][name].[ext]");
+    test("dir/file.txt", "/this/is/the/context/dir/file.txt", "name=[path][name].[ext]");
+    test("dir/sub/file.txt", "/this/is/the/context/dir/sub/file.txt", "name=[path][name].[ext]");
+    test("_/_/dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]");
+    test("dir/sub/file.txt", "/this/is/dir/sub/file.txt", "name=[path][name].[ext]&context=/this/is");
+  });
+  it("should process hash correctly", function() {
+    test("d93591bdf7860e1e4ee2fca799911215.txt", "/file.txt", "", new Buffer("4321"));
+  });
+  it("should process hash options correctly", function() {
+    test("81dc9.txt", "/file.txt", "name=[hash:5].[ext]");
+    test("d4045.txt", "/file.txt", "name=[sha512:hash:5].[ext]");
+    test("1lQ3UNSdIS0c9dQ5brCZO1.txt", "/file.txt", "name=[hash:base64].[ext]");
+    test("caYJDUvUOiGAdDsiHKffIEj.txt", "/file.txt", "name=[hash:base52].[ext]");
+    test("sntmopgidsdqrofkjywoyldtiij.txt", "/file.txt", "name=[hash:base26].[ext]");
+    test("sntmopgids.txt", "/file.txt", "name=[hash:base26:10].[ext]");
+  });
 });
 
 describe("publicPath option", function() {
-	it("should be supported", function() {
-		run("/file.txt", "publicPath=http://cdn/").result.should.be.eql(
-			'module.exports = "http://cdn/81dc9bdb52d04dc20036dbd8313ed055.txt";'
-		);
-	});
+  it("should be supported", function() {
+    run("/file.txt", "publicPath=http://cdn/").result.should.be.eql(
+      'module.exports = "http://cdn/81dc9bdb52d04dc20036dbd8313ed055.txt";'
+    );
+  });
 });
 
 describe("useRelativePath option", function() {
-	it("should be supported", function() {
-		run("/this/is/the/context/file.txt", "useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"./81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-		);
-		run("/this/is/file.txt", "useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-		);
-		run("/this/file.txt", "context=/this/is/the/&useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-		);
-		run("/this/file.txt", "context=/&useRelativePath=true").result.should.be.eql(
-			'module.exports = __webpack_public_path__ + \"this/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-		);
-	});
+  it("should be supported", function() {
+    run("/this/is/the/context/file.txt", "useRelativePath=true").result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+    run("/this/is/file.txt", "useRelativePath=true").result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+    run("/this/file.txt", "context=/this/is/the/&useRelativePath=true").result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"../../81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+    run("/this/file.txt", "context=/&useRelativePath=true").result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"this/81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+  });
 });
-describe("outputPath function", function() {
-	it("should be supported", function() {
-      outputFunc = function(value) {
-        return("/path/set/by/func");
-
-      };
-      var options = {};
-      options.outputPath = outputFunc;
-      run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
-        'module.exports = __webpack_public_path__ + \"/path/set/by/func\";'
-      );
-
-	});
-	it("should be ignored if you set useRelativePath", function() {
-	      outputFunc = function(value) {
-	        return("/path/set/by/func");
 
-	      };
-	      var options = {};
-	      options.outputPath = outputFunc;
-	      options.useRelativePath = true;
-	      run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
-	        'module.exports = __webpack_public_path__ + \"./81dc9bdb52d04dc20036dbd8313ed055.txt\";'
-	      );
-
-		});
+describe("outputPath function", function() {
+  it("should be supported", function() {
+    outputFunc = function(value) {
+      return("/path/set/by/func");
+    };
+    var options = {};
+    options.outputPath = outputFunc;
+    run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"/path/set/by/func\";'
+    );
+  });
+  it("should be ignored if you set useRelativePath", function() {
+    outputFunc = function(value) {
+      return("/path/set/by/func");
+    };
+    var options = {};
+    options.outputPath = outputFunc;
+    options.useRelativePath = true;
+    run_with_options("/this/is/the/context/file.txt", options).result.should.be.eql(
+      'module.exports = __webpack_public_path__ + \"81dc9bdb52d04dc20036dbd8313ed055.txt\";'
+    );
+  });
 });