export placeholder

Author: sokra

README.md

@@ -37,6 +37,38 @@ module.exports = {
 };
 ```
 
+### Placeholders
+
+(experimental)
+
+Special selectors are automatically replaced with random identifiers, which are exported:
+
+``` css
+.[className] { background: red; }
+#[someId] { background: green; }
+.[className] .[subClass] { color: green; }
+#[someId] .[subClass] { color: blue; }
+```
+
+is transformed to
+
+``` css
+.ze24205081ae540afa51bd4cce768e8b7 { background: red; }
+#zdf12049771f7fc796a63a3945da3a66d { background: green; }
+.ze24205081ae540afa51bd4cce768e8b7 .z9f634213cd27594c1a13d18554d47a8c { color: green; }
+#zdf12049771f7fc796a63a3945da3a66d .z9f634213cd27594c1a13d18554d47a8c { color: blue; }
+```
+
+and the identifiers are exported:
+
+``` js
+exports.placeholders = {
+  className: "ze24205081ae540afa51bd4cce768e8b7",
+  someId: "zdf12049771f7fc796a63a3945da3a66d",
+  subClass: "z9f634213cd27594c1a13d18554d47a8c"
+}
+```
+
 ### 'Root-relative' urls
 
 For urls that start with a `/`, the default behavior is to not translate them:

lib/loader.js

@@ -49,12 +49,18 @@ module.exports = function(content, map) {
 	});
 	var placeholders = {};
 	stuff.placeholders.forEach(function(placeholder) {
-		var hash = require("crypto").createHash("md5");
-		hash.update(this.request);
-		hash.update(placeholder.name);
-		var ident = "z" + hash.digest("hex");
-		placeholders[placeholder.name] = ident;
-		replacer.replace(placeholder.start, placeholder.length, ident);
+		if(!placeholders[placeholder.name]) {
+			var hash = require("crypto").createHash("md5");
+			hash.update(this.options && typeof this.options.context === "string" ?
+				loaderUtils.stringifyRequest({ context: this.options.context }, this.request) :
+				this.request);
+			hash.update(placeholder.name);
+			var ident = "z" + hash.digest("hex");
+			placeholders[placeholder.name] = ident;
+		} else {
+			var ident = placeholders[placeholder.name];
+		}
+		replacer.replace(placeholder.start, placeholder.length, placeholder.prefix + ident);
 	}, this);
 
 	var cssContent = replacer.run(content);
@@ -125,6 +131,10 @@ module.exports = function(content, map) {
 		result.push("exports.push([module.id, " + css + ", \"\"]);");
 	}
 
+	if(Object.keys(placeholders).length > 0) {
+		result.push("exports.placeholders = " + JSON.stringify(placeholders) + ";");
+	}
+
 	return "exports = module.exports = require(" + loaderUtils.stringifyRequest(this, require.resolve("./css-base.js")) + ")();\n" +
 		result.join("\n");
 }

lib/parseSource.js

@@ -13,9 +13,10 @@ function urlMatch(match, textBeforeUrl, replacedText, url, index) {
 	});
 }
 
-function placeholderMatch(match, name, index) {
+function placeholderMatch(match, prefix, name, index) {
 	this.placeholders.push({
 		name: name,
+		prefix: prefix,
 		start: index,
 		length: match.length
 	});
@@ -47,7 +48,9 @@ var parser = new Parser({
 		"(url\\s*\\()(\\s*([^)]*)\\s*)\\)": urlMatch,
 
 		// placeholder
-		"{{([A-Za-z_0-9]+)}}": placeholderMatch
+		"()\\{\\{([A-Za-z_0-9]+)\\}\\}": placeholderMatch,
+		"(\\.)\\[([A-Za-z_0-9]+)\\]": placeholderMatch,
+		"(#)\\[([A-Za-z_0-9]+)\\]": placeholderMatch,
 	},
 	comment: {
 		"\\*/": "source"

lib/parser.js

@@ -6,10 +6,14 @@ var vm = require("vm");
 function test(name, input, result, query, modules) {
 	it(name, function() {
 		var output = cssLoader.call({
+			options: {
+				context: ""
+			},
 			loaders: [{request: "loader"}],
 			loaderIndex: 0,
 			context: "",
 			resource: "test.css",
+			request: "css-loader!test.css",
 			query: query
 		}, input);
 		assetEvaluated(output, result, modules);
@@ -19,10 +23,14 @@ function test(name, input, result, query, modules) {
 function testMinimize(name, input, result, query, modules) {
 	it(name, function() {
 		var output = cssLoader.call({
+			options: {
+				context: ""
+			},
 			loaders: [{request: "loader"}],
 			loaderIndex: 0,
 			context: "",
 			resource: "test.css",
+			request: "css-loader!test.css",
 			minimize: true,
 			query: query
 		}, input);
@@ -134,6 +142,18 @@ describe("url", function() {
 	test("media query", "@media (min-width: 500px) { body { background: url(image.png); } }", [
 		[1, "@media (min-width: 500px) { body { background: url({./image.png}); } }", ""]
 	]);
+	test("placeholder", ".[className] { background: red; }\n#[someId] { background: green; }\n" +
+		".[className] .[subClass] { color: green; }\n#[someId] .[subClass] { color: blue; }", function() { var r = [
+			[1, ".ze24205081ae540afa51bd4cce768e8b7 { background: red; }\n#zdf12049771f7fc796a63a3945da3a66d { background: green; }\n" +
+				".ze24205081ae540afa51bd4cce768e8b7 .z9f634213cd27594c1a13d18554d47a8c { color: green; }\n#zdf12049771f7fc796a63a3945da3a66d .z9f634213cd27594c1a13d18554d47a8c { color: blue; }", ""]
+		];
+		r.placeholders = {
+			className: "ze24205081ae540afa51bd4cce768e8b7",
+			someId: "zdf12049771f7fc796a63a3945da3a66d",
+			subClass: "z9f634213cd27594c1a13d18554d47a8c"
+		};
+		return r;
+	}());
 	testMinimize("minimized simple", ".class { a: b c d; }", [
 		[1, ".class{a:b c d}", ""]
 	]);