Do vars only work under :root?

[VVey]

Is this plugin support to set the vars under the class,
ex.
.test{
--color; red;
}

[jhildenbiddle]

Vars must be defined as :root-level declarations.

This will work:

:root {
  --a: red;
}

p {
  color: var(--a);
}

This will not work:

p {
  --a: red;
  color: var(--a);
}

Creating a pony/polyfill to handle scoped variables (the second example) simply isn't possible. Many discussions have been had on the topic:

• var declared in media query should pull in properties that use/reference that var MoOx/postcss-cssnext#99
• remove :root limitation by injecting rules with new declarations that just contains modified properties. postcss/postcss-custom-properties#1
• Investigate support for media-query scoped properties postcss/postcss-custom-properties#9

Hence the :root-level limitation. 😄