Media queries support

[F21]

Just started using this plugin and loving it!

I would love to see media queries support (not sure how difficult this will be to implement).

This is my input:

body{
    font: 16px/2 'Roboto';
}

@media(width <= 600px) {
    body{
        font: 32px/2 'Roboto';
    }
}

.test {
    margin-bottom: 1vr;
    padding-top: .5vr;
}

That outputs:

body{
    font: 16px/2 'Roboto';
}

@media(max-width: 600px) {
    body{
        font: 32px/2 'Roboto';
    }
}

.test {
    margin-bottom: 64px;
    padding-top: 32px;
}

If media queries are supported, the output should be:

body{
    font: 16px/2 'Roboto';
}

@media(max-width: 600px) {
    body{
        font: 32px/2 'Roboto';
    }

    .test {
        margin-bottom: 64px;
        padding-top: 32px;
    }
}

.test {
    margin-bottom: 32px;
    padding-top: 16px;
}

[markgoodyear]

Interesting, thanks for the suggestion. I think this should be possible with PostCSS, but I'd need to take a deeper look into it.

[ghost]

I think it would be easier to use relative units instead of px, in that case it wouldn't be necessary to take in consideration the media queries:

body{
    font: 16px/2 'Roboto';
}

@media(width <= 600px) {
    body{
        font: 32px/2 'Roboto';
    }
}

.test {
    margin-bottom: 1vr;
    padding-top: .5vr;
}

Would become:

body{
    font: 16px/2 'Roboto';
}

@media(max-width: 600px) {
    body{
        font: 32px/2 'Roboto';
    }
}

.test {
    /* > 600px: 1rem = 16px */
    /* < 600px: 1rem = 32px */
    margin-bottom: 2rem;
    padding-top: 1rem;
}

I think it should work, but I don't know if there is any other things to take in consideration.