Nested @ rules produce unexpected results

[chrisdeeming]

Consider the following input:

html::after
{
    content: 'full';
    display: none;

    @media (max-width: 1200px)
    { 
        content: 'wide';
    }
    @media (max-width: 800px)
    { 
        content: 'medium';
    }
    @media (max-width: 400px)
    { 
        content: 'narrow';
    }
}

Most pre-processors would process this as:

html::after {
  content: 'full';
  display: none;
}
@media (max-width: 1200px) {
  html::after {
    content: 'wide';
  }
}
@media (max-width: 800px) {
  html::after {
    content: 'medium';
  }
}
@media (max-width: 400px) {
  html::after {
    content: 'narrow';
  }
}

Unfortunately this is the result from Crush:

html:after {
    content: 'full';
    display: none;
    @media (max-width: 1200px){content: 'wide';
    }@media (max-width: 800px){content: 'medium';
    }@media (max-width: 400px){content: 'narrow';
    }

This is invalid in a couple of ways:

1. Native CSS doesn't support this kind of nesting
2. The output is completely malformed

[peteduel]

The preprocessor doesn't get this right as the closing brace is lost.

Though new native nesting does support this syntax if you try this is the latest firefox, for example:

html {
    letter-spacing: 1px;
    @media (min-width: 400px) {letter-spacing: 2px;}
    @media (min-width: 800px) {letter-spacing: 3px;}
    @media (min-width: 1200px) {letter-spacing: 4px;}
}