normalizing CSS selectors (consolidating/inserting whitespace, removing comments, etc)

normalize.js

function normalizeSelector(sel) {

	// save unmatched text, if any
	function saveUnmatched() {
		if (unmatched) {
			// whitespace needed after combinator?
			if (tokens.length > 0 &&
				/^[~+>]$/.test(tokens[tokens.length-1])
			) {
				tokens.push(" ");
			}

			// save unmatched text
			tokens.push(unmatched);
		}
	}

	var tokens = [], match, unmatched, regex, state = [0],
		next_match_idx = 0, prev_match_idx,
		not_escaped_pattern = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/,
		whitespace_pattern = /^\s+$/,
		state_patterns = [
			/\s+|\/\*|["'>~+\[\(]/g, // general
			/\s+|\/\*|["'\[\]\(\)]/g, // [..] set
			/\s+|\/\*|["'\[\]\(\)]/g, // (..) set
			null, // string literal (placeholder)
			/\*\//g // comment
		]
	;

	sel = sel.trim();

	while (true) {
		unmatched = "";

		regex = state_patterns[state[state.length-1]];

		regex.lastIndex = next_match_idx;
		match = regex.exec(sel);

		// matched text to process?
		if (match) {
			prev_match_idx = next_match_idx;
			next_match_idx = regex.lastIndex;

			// collect the previous string chunk not matched before this token
			if (prev_match_idx < next_match_idx - match[0].length) {
				unmatched = sel.substring(prev_match_idx,next_match_idx - match[0].length);
			}

			// general, [ ] pair, ( ) pair?
			if (state[state.length-1] < 3) {
				saveUnmatched();

				// starting a [ ] pair?
				if (match[0] === "[") {
					state.push(1);
				}
				// starting a ( ) pair?
				else if (match[0] === "(") {
					state.push(2);
				}
				// starting a string literal?
				else if (/^["']$/.test(match[0])) {
					state.push(3);
					state_patterns[3] = new RegExp(match[0],"g");
				}
				// starting a comment?
				else if (match[0] === "/*") {
					state.push(4);
				}
				// ending a [ ] or ( ) pair?
				else if (/^[\]\)]$/.test(match[0]) && state.length > 0) {
					state.pop();
				}
				// handling whitespace or a combinator?
				else if (/^(?:\s+|[~+>])$/.test(match[0])) {
					// need to insert whitespace before?
					if (tokens.length > 0 &&
						!whitespace_pattern.test(tokens[tokens.length-1]) &&
						state[state.length-1] === 0
					) {
						// add normalized whitespace
						tokens.push(" ");
					}

					// whitespace token we can skip?
					if (whitespace_pattern.test(match[0])) {
						continue;
					}
				}

				// save matched text
				tokens.push(match[0]);
			}
			// otherwise, string literal or comment
			else {
				// save unmatched text
				tokens[tokens.length-1] += unmatched;

				// unescaped terminator to string literal or comment?
				if (not_escaped_pattern.test(tokens[tokens.length-1])) {
					// comment terminator?
					if (state[state.length-1] === 4) {
						// ok to drop comment?
						if (tokens.length < 2 ||
							whitespace_pattern.test(tokens[tokens.length-2])
						) {
							tokens.pop();
						}
						// otherwise, turn comment into whitespace
						else {
							tokens[tokens.length-1] = " ";
						}

						// handled already
						match[0] = "";
					}

					state.pop();
				}

				// append matched text to existing token
				tokens[tokens.length-1] += match[0];
			}
		}
		// otherwise, end of processing (no more matches)
		else {
			unmatched = sel.substr(next_match_idx);
			saveUnmatched();

			break;
		}
	}

	return tokens.join("").trim();
}

test.js

var tests = {
	/*test*/"#foo .bar":
	   /*expected*/"#foo .bar",
	/*test*/" #foo   .bar ":
	   /*expected*/"#foo .bar",
	/*test*/"#foo>.bar":
	   /*expected*/"#foo > .bar",
	/*test*/" unit[ sh | quantity = \"200\" ] ":
	   /*expected*/"unit[sh|quantity=\"200\"]",
	/*test*/"*~*>*.foo[ href *= \"/\" ]:hover>*[ data-foo = \"bar\" ]:focus+*.baz::after":
	   /*expected*/"* ~ * > *.foo[href*=\"/\"]:hover > *[data-foo=\"bar\"]:focus + *.baz::after",
	/*test*/"@media  screen  and  ( color ),  projection  and  ( color )":
	   /*expected*/"@media screen and (color), projection and (color)",
	/*test*/"@media  handheld  and  ( min-width : 20em ),   screen  and  ( min-width: 20em )":
	   /*expected*/"@media handheld and (min-width:20em), screen and (min-width:20em)",
	/*test*/"@media  screen  and  ( device-aspect-ratio : 2560 / 1440 )":
	   /*expected*/"@media screen and (device-aspect-ratio:2560/1440)",
	/*test*/"((a ) (b(c ) ) d )>*[ data-foo = \"bar\" ]":
	   /*expected*/"((a)(b(c))d) > *[data-foo=\"bar\"]",
	/*test*/"#foo[ a = \" b \\\" c\\\\\" ]":
	   /*expected*/"#foo[a=\" b \\\" c\\\\\"]",
	/*test*/" /*c1*/ .e1/*c2*/.e2 /*c3*/ .e3 /*c4*/ ":
	   /*expected*/".e1 .e2 .e3",
	/*test*/" /*c1*/ .e1/*c2*/.e2 /*c3*/ .e3 ":
	   /*expected*/".e1 .e2 .e3",
	/*test*/" /*c1*/ .e1/*c2*/.e2 /*c3*/ .e3":
	   /*expected*/".e1 .e2 .e3",
	/*test*/"/*c1*/.e1/*c2*/.e2 /*c3*/ .e3":
	   /*expected*/".e1 .e2 .e3",
	/*test*/".e1/*c2*/.e2 /*c3*/ .e3":
	   /*expected*/".e1 .e2 .e3"
};

var test, tmp;
for (test in tests) {
	if ((tmp = normalizeSelector(test)) && tmp === tests[test]) {
		console.log("PASSED: " + test + " (" + tmp + ")");
	}
	else {
		console.log("FAILED.\n   Expected: " + tests[test] + "\n   Received: " + tmp);
		break;
	}
}

console.log("Tests done.");

// PASSED: #foo .bar (#foo .bar)
// PASSED:  #foo   .bar  (#foo .bar)
// PASSED: #foo>.bar (#foo > .bar)
// PASSED:  unit[ sh | quantity = \"200\" ]  (unit[sh|quantity="200"])
// PASSED: *~*>*.foo[ href *= "/" ]:hover>*[ data-foo = "bar" ]:focus+*.baz::after (* ~ * > *.foo[href*="/"]:hover > *[data-foo="bar"]:focus + *.baz::after)
// PASSED: @media  screen  and  ( color ),  projection  and  ( color ) (@media screen and (color), projection and (color))
// PASSED: @media  handheld  and  ( min-width : 20em ),   screen  and  ( min-width: 20em ) (@media handheld and (min-width:20em), screen and (min-width:20em))
// PASSED: @media  screen  and  ( device-aspect-ratio : 2560 / 1440 ) (@media screen and (device-aspect-ratio:2560/1440))
// PASSED: ((a ) (b(c ) ) d )>*[ data-foo = "bar" ] (((a)(b(c))d) > *[data-foo="bar"])
// PASSED: #foo[ a = " b \" c\\" ] (#foo[a=" b \" c\\"])
// PASSED:  /*c1*/ .e1/*c2*/.e2 /*c3*/ .e3 /*c4*/  (.e1 .e2 .e3)
// PASSED:  /*c1*/ .e1/*c2*/.e2 /*c3*/ .e3  (.e1 .e2 .e3)
// PASSED:  /*c1*/ .e1/*c2*/.e2 /*c3*/ .e3 (.e1 .e2 .e3)
// PASSED: /*c1*/.e1/*c2*/.e2 /*c3*/ .e3 (.e1 .e2 .e3)
// PASSED: .e1/*c2*/.e2 /*c3*/ .e3 (.e1 .e2 .e3)
// Tests done.

+.class[data *='data']
-.class[data*='data']

If I'm interpreting your comment correctly, I think the newer code is correct. We wouldn't want the space there, would we? Or am I missing some nuance? I never put spaces in my attribute selectors. Always seems to work fine.

[att=val i]

What form of syntax is this? Never seen spaces allowed in an attribute value match. I was under the impression you had to delimit with ' or " to get that. What am I missing?

Agreed ~ [data*='data'] should be correct.

[att=val i] means case-insensitive in CSS L4 ~ http://dev.w3.org/csswg/selectors4/#attribute-case (see 6.3)

[att=val i] means case-insensitive in CSS L4...

Ahh, gross. Good catch, though. I hadn't looked at anything beyond CSS3. I bet there are plenty of complications coming down the grammar trail with CSS4+.

At first glance, seems like this general issue (not specifically excepted for i) could be solved without too much difficulty by nuancing in the whitespace insertion rules (lines 79-82 above) that another case for insertion is if a non-operator token comes right after another non-operator token, which would mean i would need a space if coming right after val. I'll see if I can patch something like that later today.

Thanks! Keep 'em coming!

Updated repo ~ tests passing now

Merely add the following if block for this one case, starting at line 86 ~ which could be condensed further:

      // case-insensitive attribute selector CSS L4
      if (state[state.length-1] === 1 && 
          tokens.length === 5 &&
          tokens[2].charAt(tokens[2].length-1) === '=') {
          tokens[4] = " " + tokens[4];
      }

Also think I should publish this to NPM so we can get the normalize-selector name ~ do you want to do that or shall I do it and squat the name for now?

I'll do it, soon. Do you believe people will want to use this tool outside of my niche use-case? I was wondering if any other CSS tools will care, or if they're already doing this implicitly in their own parsers?

I think it's better to publish it so that it can be used in other ways.

If people want to run a beautifier, for example, this might fit the bill. uglifiers are probably handling it already. reducers like absurdjs remove duplicated rules, etc.

What is your niche use case? Heard your comment last week on the EdgeConf stream about CSS templates ~ is that what this is heading for?

Nods, I will register the npm project name later today.

Yes, I am building a CSS templating engine called grips-css (part of the grips templating engine). In short, it treats each selector declaration in a stylesheet as a template partial (just like for html, etc), which means you can re-render either an entire stylesheet, or only a part(ial) of it.

Since there are so many possible variations of selector formatting, and the selector has to be an ID to be used to uniquely reference such a partial, normalizing it (both on compilation and at render-request) makes it the best chance someone gets what they want. :)

I just added test for namespaced attribute selector ~ no code change necessary ~ http://www.w3.org/TR/css3-selectors/#attrnmsp

sounds like a css macro => lookup table of normalized selectors (rulename) => template (rulesets)

thanks, added that test here too.

that's one tiny aspect of its capability. it's a lot more than that. :)

Finally got the repo and npm going: https://github.com/getify/normalize-selector