Nested media queries & whitespace in variable values

[mnussbaumer]

• https://github.com/mnussbaumer/cssex/issues/50 Correct nested media queries where the media query only defines styles without any selectors. CSSEx relies on selector chains that are kept as lists until the moment the selector is closed (with the } bracket). This works fine for most cases. When CSSEx encounters certain types of declarations, such as @media, it starts another parser with the current selector chain defined but outside a selector context, and if this other parser never opens/adds a new selector token, the current chain isn't properly finalised. What this means is that for instance here:

.a {
  .b {
    .c {
       some-rule: some-value;
       @media (...) {
         some-rule: other-value;
       }
    }
  }
}

The rule inside media, when parsed, because that block (that starts a new parser) has no selector, when it goes to store the rules would just write the selector as the list [['.a', '.b', '.c']] which wouldn't add spaces, so the rule would be written as:

@media ..... {
    .a.b.c { ...}
}

Instead of (notice the white space between the classes selectors):

@media ..... {
    .a .b .c { ...}
}

If the @media declaration had a selector inside it, then it would work correctly because that selector starts a chain in the new parser instance, which then makes it so that it gets correctly assembled. The solution is to, before writing out the css, we check if the selector is still a list, and if so we join the elements with whitespace into a string, as they would be if there was a selector.

• https://github.com/mnussbaumer/cssex/issues/51 White-space in variables values were being added to the key definition instead of the value, making it so that for a variable such as:

  $!some_var 1px 1px 5px 10px;

After parsing that line, the variable name would be some_var (notice the whitespace) and value would be: 1px1px5px10px making it impossible to use vars to store values that have whitespaces in their declarations (outside of other delimiters such as (...), "...", etc). Now it works as expected