Expand variables in AtRule properties

As written, this plugin makes the seemingly reasonable assumption that all variable expansions will happen inside of a CSS Rule (that is, a set of Properties scoped to one or more Selectors).

However, some CSS At-Rules (like @font-face and @page) allow for CSS Properties to be their direct descendants. These are philosophically a little trickier to implement, since (e.g.) the @page [At-]Rule doesn't actually appear in the DOM hierarchy, but not permitting At-Rules to use variables limits their utility and forces duplication of variable values.

:root {
  --theme-color: red;
}

body {
  color: var(--theme-color);
}

@page {
  background-color: var(--theme-color);  /* Never expanded. */
}

For such cases, there is a simple, sensible interpretation that extends naturally: :root implies the set of "global" variables, and the expectation is that At-Rules would have access to variables defined in that scope. Variables defined in lower scopes should (obviously) not have an effect on such high-level [At-]Rules – and the existing behaviors for At-Rule-scoped Rules seem adequate for describing the cases where both an At-Rule and a lower-scoped variable need to coordinate.

MadLittleMods / postcss-css-variables

Expand variables in AtRule properties #104