Expand variables in AtRule properties

[pvande]

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]

Let's use rule.type === 'rule'

Also why are we moving away from walkRules if we then check for rule.type === 'rule' here anyway?

[MadLittleMods]

It looks like it is because walkRules doesn't walk over atrule types.

[pvande]

Sorry, I believed I had responded to this comment. Yes, it's because atrule types were not being traversed by walkRules.

[MadLittleMods]

Hey @pvande, I've created #121 with the review comments resolved 🚀

Thanks for the contribution and sorry for the delay 🙇