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.

Looking at your code rewrites over on your repo. Thanks so much for your efforts!

One question:

The spaces around media queries and their ( ) pairs... could that have been handled without an explicit state, but just in the exact same way as the [ ] pairs in [a=b] selectors was? That is, I inserted space tokens, but this would leave things ugly like [ a =b] or whatever, so the final filter goes through and removes the unnecessary ones.

Was thinking maybe the patterns that look for the [ ] and = characters could also look for the ( and ) characters, respectively, and thus the whitespace would be handled correctly. Do you think that would work, or am I missing a nuance there?

RE the comments ~ roger, that. Just getting clarity.

RE the state for parentheses ~ no nuance. The original method was very long with a lot of internal branching. Once I added the media query test and saw it fail, I had to figure out where in the loop to isolate the parens case. It wasn't obvious where that should go and after a couple bad attempts, I added a state and eventually the IIFE and hallelujah. Just wanted cases covered and passing so that it's shovel-ready for refactoring.

Next steps ~ what direction would you like to take this? Should I keep going? Or do you want to clone the repo, copy the method, ...?

I just posted a substantial re-working of the code. It addressed the need for handling ( ) pairs in a similar way to [ ] pairs. I also did some reorg inspired by some of your edits (not the minor var names changes, but the structural changes). I was able to do away with the filtering, which makes me happy.

I know the original version was kinda confusing. Hopefully this rework (plus more and better comments) is a bit easier to understand. Let me know if you think it's improved the situation?

Right now, it minifies+gzips to 509 bytes. That's like 30% better than before, but still 2x than I want it to be. But I think this may be approaching the smallest code for the correct algorithm. I dunno how much more can really be saved.

NOTE: I don't just want to golf out a few bytes here and there. If I make changes, I want it to be substantial reductions (like when I was able to rework so the filtering wasn't necessary anymore) in the structural parts that get us closer to 200-300 bytes. Dunno if that's going to be possible or not. :/

Those are some good tests to add. Running them against the previous version of ns() there's one failing:

  1) normalizeSelector should normalize parentheses:

      AssertionError: "((a) (b(c)) d) > *[data-foo=\"bar\"]" == "((a)(b(c))d) >
*[data-foo=\"bar\"]"
      + expected - actual

      +((a)(b(c))d) > *[data-foo="bar"]
      -((a) (b(c)) d) > *[data-foo="bar"]

Against the new version that passes but two older cases are failing:

1) normalizeSelector should normalize asterisks:

    AssertionError: "*.class[data*='data']" == "*.class[data *='data']"
    + expected - actual

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


2) normalizeSelector should normalize case-insensitivity attribute selector:

    AssertionError: "[att=vali]" == "[att=val i]"
    + expected - actual

    +[att=val i]
    -[att=vali]

I'll golf those out if I can and let you know.

+.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