Queries/selectors not building properly when a general sibling selector (~) is present?

[robertwbradford]

trafficstars

This is a great module. I may have come across a bug. I was working on some trickery using http://alistapart.com/article/quantity-queries-for-css#section5. This explains using a general sibling selector to apply styles when X or more of an element is present. Say we have the following HTML, and I want the thing elements to be colored red when there are two or more:

 <section>
   <div class="thing">This is thing one</div>
   <div class="thing">This is thing two</div>
   <div class="thing">This is thing three</div>
 </section>

The following CSS will change the color to red when two or more of the element exist:

.thing:nth-last-child(n+2),
.thing:nth-last-child(n+2) ~ .thing {
  color: red;
}    

Now say we only want to change the color of the .things if they are also wider than 100px. We can apply this module by modifying the CSS to the following:

.thing:nth-last-child(n+2)[min-width~="100px"],
.thing:nth-last-child(n+2)[min-width~="100px"] ~ .thing[min-width~="100px"] {
  color: red;
}    

However, when trying that CSS, I get the following JavaScript error in the console:

site.js:5993 Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '.thing:nth-last-child(1n+2),.thing:nth-last-child(1n+2),~ .thing' is not a valid selector.
  findElementQueriesElements
  init
  ElementQueries.init

It seems like the general sibling selector (~) is not being parsed properly when the queries/selectors are being built. I believe this is happening in the extractQuery function in ElementQueries.js, but I was getting stuck while trying to debug.

I have tried this with a more simple example with the same result:

.thing[min-width~="100px"] ~ .thing[min-width~="100px"] {
  color: red;
}    

The console error:

 Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '.thing,~ .thing' is not a valid selector.

Any ideas?

[marcj]

Yeah, our regex to parse the rule is not compatible with a sibling selector like this. :(