Add at-rule support – as in firefox implementation

[jakob-e]

The following example does not work in cssnext as opposed to the firefox implementation

// Define color
:root { --color: tomato; }

// Assign the color variable
body { background-color: var(--color); }

// Re-define color in different media queries. 
// Note how we do NOT reference body!    
@media (max-width: 960px){ :root { --color: gold;    } }
@media (max-width: 640px){ :root { --color: olive;   } }
@media (max-width: 420px){ :root { --color: skyblue; } }

Error thrown

Custom property ignored: not scoped to the top-level 
:root element (:root { ... --color: ... }), in atrule

Expected CSS3 output:

body { background-color: tomato; }
@media (max-width: 960px){ body { background-color: gold; } }
@media (max-width: 640px){ body { background-color: olive; }}
@media (max-width: 420px){ body { background-color: skyblue; }}

Example (view in firefox)

[MoOx]

Closing in favor of postcss/postcss-custom-properties#9