Merge pull request #2 from css-modules/escaped-chars-in-classes

Escaped characters should be treated as valid

Author: sokra

lib/parse.js

@@ -2,6 +2,10 @@
 
 var Parser = require("fastparse");
 
+function unescape(str) {
+	return str.replace(/\\(.)/g, "$1");
+}
+
 function commentMatch(match, content) {
 	this.selector.nodes.push({
 		type: "comment",
@@ -13,15 +17,15 @@ function typeMatch(type) {
 	return function(match, name) {
 		this.selector.nodes.push({
 			type: type,
-			name: name
+			name: unescape(name)
 		});
 	};
 }
 
 function pseudoClassStartMatch(match, name) {
 	var newToken = {
 		type: "pseudo-class",
-		name: name,
+		name: unescape(name),
 		content: ""
 	};
 	this.selector.nodes.push(newToken);
@@ -37,7 +41,7 @@ function nestedPseudoClassStartMatch(match, name, after) {
 	};
 	var newToken = {
 		type: "nested-pseudo-class",
-		name: name,
+		name: unescape(name),
 		nodes: [newSelector]
 	};
 	if(after) {
@@ -88,10 +92,10 @@ function spacingMatch(match) {
 function elementMatch(match, namespace, name) {
 	var newToken = {
 		type: "element",
-		name: name
+		name: unescape(name)
 	};
 	if(namespace) {
-		newToken.namespace = namespace.substr(0, namespace.length - 1);
+		newToken.namespace = unescape(namespace.substr(0, namespace.length - 1));
 	}
 	this.selector.nodes.push(newToken);
 }
@@ -101,7 +105,7 @@ function universalMatch(match, namespace) {
 		type: "universal"
 	};
 	if(namespace) {
-		newToken.namespace = namespace.substr(0, namespace.length - 1);
+		newToken.namespace = unescape(namespace.substr(0, namespace.length - 1));
 	}
 	this.selector.nodes.push(newToken);
 }
@@ -162,16 +166,16 @@ function bracketEnd(match) {
 var parser = new Parser({
 	selector: {
 		"/\\*([\\s\\S]*?)\\*/": commentMatch,
-		"\\.([A-Za-z_\\-0-9]+)": typeMatch("class"),
-		"#([A-Za-z_\\-0-9]+)": typeMatch("id"),
+		"\\.((?:\\\\.|[A-Za-z_\\-])(?:\\\\.|[A-Za-z_\\-0-9])*)": typeMatch("class"),
+		"#((?:\\\\.|[A-Za-z_\\-])(?:\\\\.|[A-Za-z_\\-0-9])*)": typeMatch("id"),
 		":(not|has|local|global)\\((\\s*)": nestedPseudoClassStartMatch,
-		":([A-Za-z_\\-0-9]+)\\(": pseudoClassStartMatch,
-		":([A-Za-z_\\-0-9]+)": typeMatch("pseudo-class"),
-		"::([A-Za-z_\\-0-9]+)": typeMatch("pseudo-element"),
-		"(\\*\\|)([A-Za-z_\\-0-9]+)": elementMatch,
+		":((?:\\\\.|[A-Za-z_\\-0-9])+)\\(": pseudoClassStartMatch,
+		":((?:\\\\.|[A-Za-z_\\-0-9])+)": typeMatch("pseudo-class"),
+		"::((?:\\\\.|[A-Za-z_\\-0-9])+)": typeMatch("pseudo-element"),
+		"(\\*\\|)((?:\\\\.|[A-Za-z_\\-0-9])+)": elementMatch,
 		"(\\*\\|)\\*": universalMatch,
-		"([A-Za-z_\\-0-9]*\\|)?\\*": universalMatch,
-		"([A-Za-z_\\-0-9]*\\|)?([A-Za-z_\\-0-9]+)": elementMatch,
+		"((?:\\\\.|[A-Za-z_\\-0-9])*\\|)?\\*": universalMatch,
+		"((?:\\\\.|[A-Za-z_\\-0-9])*\\|)?((?:\\\\.|[A-Za-z_\\-0-9])+)": elementMatch,
 		"\\[([^\\]]+)\\]": attributeMatch,
 		"(\\s*)\\)": nestedEnd,
 		"(\\s*)([>+~])(\\s*)": operatorMatch,

lib/stringify.js

@@ -2,30 +2,37 @@
 
 var stringify;
 
+function escape(str) {
+	if(str === "*") {
+		return "*";
+	}
+	return str.replace(/(^[^A-Za-z_\\-]|[^A-Za-z_0-9\\-])/g, "\\$1");
+}
+
 function stringifyWithoutBeforeAfter(tree) {
 	switch(tree.type) {
 	case "selectors":
 		return tree.nodes.map(stringify).join(",");
 	case "selector":
 		return tree.nodes.map(stringify).join("");
 	case "element":
-		return (typeof tree.namespace === "string" ? tree.namespace + "|" : "") + tree.name;
+		return (typeof tree.namespace === "string" ? escape(tree.namespace) + "|" : "") + escape(tree.name);
 	case "class":
-		return "." + tree.name;
+		return "." + escape(tree.name);
 	case "id":
-		return "#" + tree.name;
+		return "#" + escape(tree.name);
 	case "attribute":
 		return "[" + tree.content + "]";
 	case "spacing":
 		return tree.value;
 	case "pseudo-class":
-		return ":" + tree.name + (typeof tree.content === "string" ? "(" + tree.content + ")" : "");
+		return ":" + escape(tree.name) + (typeof tree.content === "string" ? "(" + tree.content + ")" : "");
 	case "nested-pseudo-class":
-		return ":" + tree.name + "(" + tree.nodes.map(stringify).join(",") + ")";
+		return ":" + escape(tree.name) + "(" + tree.nodes.map(stringify).join(",") + ")";
 	case "pseudo-element":
-		return "::" + tree.name;
+		return "::" + escape(tree.name);
 	case "universal":
-		return (typeof tree.namespace === "string" ? tree.namespace + "|" : "") + "*";
+		return (typeof tree.namespace === "string" ? escape(tree.namespace) + "|" : "") + "*";
 	case "operator":
 		return tree.operator;
 	case "comment":

test/test-cases.js

@@ -48,27 +48,62 @@ module.exports = {
 		])
 	],
 
+	"complex class name": [
+		".class\\.Name",
+		singleSelector([
+			{ type: "class", name: "class.Name" }
+		])
+	],
+
+	"class name starting with number": [
+		".\\5\\#-\\.5",
+		singleSelector([
+			{ type: "class", name: "5#-.5" }
+		])
+	],
+
 	"id name": [
 		"#idName",
 		singleSelector([
 			{ type: "id", name: "idName" }
 		])
 	],
 
+	"id name starting with number": [
+		"#\\5\\#-\\.5",
+		singleSelector([
+			{ type: "id", name: "5#-.5" }
+		])
+	],
+
 	"pseudo class": [
 		":before",
 		singleSelector([
 			{ type: "pseudo-class", name: "before" }
 		])
 	],
 
+	"pseudo class with escaping": [
+		":be\\:fo\\#r\\.e",
+		singleSelector([
+			{ type: "pseudo-class", name: "be:fo#r.e" }
+		])
+	],
+
 	"pseudo class with content": [
 		":abc(.className)",
 		singleSelector([
 			{ type: "pseudo-class", name: "abc", content: ".className" }
 		])
 	],
 
+	"pseudo class with content and escaping": [
+		":a\\:b\\.c(.className)",
+		singleSelector([
+			{ type: "pseudo-class", name: "a:b.c", content: ".className" }
+		])
+	],
+
 	"nested pseudo class with content": [
 		":not(.className)",
 		singleSelector([
@@ -90,6 +125,13 @@ module.exports = {
 		])
 	],
 
+	"pseudo element with escaping": [
+		"::fir\\:\\:st\\.li\\#ne",
+		singleSelector([
+			{ type: "pseudo-element", name: "fir::st.li#ne" }
+		])
+	],
+
 	"universal": [
 		"*",
 		singleSelector([
@@ -104,6 +146,13 @@ module.exports = {
 		])
 	],
 
+	"universal with namespace and escaping": [
+		"f\\|o\\.o|*",
+		singleSelector([
+			{ type: "universal", namespace: "f|o.o" }
+		])
+	],
+
 	"universal with any namespace": [
 		"*|*",
 		singleSelector([