Do vars only work under :root? about css-vars-ponyfill HOT 1 CLOSED

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:

• MoOx/postcss-cssnext#99
• postcss/postcss-custom-properties#1
• postcss/postcss-custom-properties#9

Hence the :root-level limitation. 😄

from css-vars-ponyfill.