Support for media-query scoped properties

[pgregorova]

it would be nice to be able to separate logic from design by using dynamic variables, where we set the variables and change its value as desired within breakpoint within :root.

Expected Behavior

:root { --fontSize: 2rem; }

@media (min-width: 64rem) {
   :root { --font-size: 3rem; }
}

Current Behavior

Currently it's impossible change value for a variable in :root, which is wrapped within media query. It simply throws errors and doesn't compile. Similar issue has been also reported in PostCSS's issue ticket related to custom properties, where you can see more examples.

Steps to Reproduce (for bugs)

You can use my codepen for responsive table, where I was testing it just using PostCSS, no CSSNext and it works like a charm.

[drolsen]

@pgregorova just for a context sake, did the following approach fail too for you?

:root { 
    --fontSize: 2rem; 
    @media (min-width: 64rem) {
        --font-size: 3rem;
    }
}