query match tolerance

[SassNinja]

Currently the queries match is very strict what might result in unintended results. This occurs in particular when using some compiler such as sass.

Example:

// webpack.config.js

queries: {
  '(min-width:1000px)': 'desktop'
}

// style.scss

.foo { color: red }
@media (min-width:1000px) {
  .foo { color: green }
} 

The expected result would be a style.css and a style-desktop.css with the extracted CSS. But that's what you get:

// style.css
.foo {
  color: red;
}
@media (min-width: 1000px) {
  .foo {
    color: green;
  }
}

That's not what you want, is it? The reason is the query match is very strict and since the sass compiler has changed the code (added a whitespace) the query doesn't match anymore because '(min-width:1000px)' !== '(min-width: 1000px)'

To fix this the comparison should be more tolerant (e.g. by normalizing the query before comparing) so that the example above works.