declaring variable as in postcss-preset-env example not working

[zanona]

Under https://preset-env.cssdb.org/features#custom-properties we have the following example:

img {
  --some-length: 32px;

  height: var(--some-length);
  width: var(--some-length);
}

Although this doesn't seem to work and variables are not rewritten. The only way to get this working was to define the variable under :root?

Perhaps I am missing something or can the example listed indeed be achieved? Thanks

[masi]

Looks like the plugin only supports variables within :root. According to the spec some more matchings would work. Of course their are meant to be applied directly one the DOM, but actually they should work to some extent:

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
div.g { color: var(--color); }
#alert { color: var(--color); }

:root:lang(en) {--external-link: "external link";}
:root:lang(de) {--external-link: "externer Link";}
a[href^="http"]::after {content: " (" var(--external-link) ")"}

Expected:

* {
  color: blue; }

div.g {
  color: green; }

#alert {
  color: red; }

a[href^="http"]:lang(en)::after {
  content: " (external link)"; }

a[href^="http"]:lang(de)::after {
  content: " (externer Link)"; }

Actual:

* {
  color: blue; }

div.g {
  color: blue; }

#alert {
  color: blue; }

a[href^="http"]::after {
  content: " (" var(--external-link) ")"; }

[Semigradsky]

@masi see the old version of README - https://github.com/postcss/postcss-custom-properties/tree/cdb1fb0b415fd14f1f78361274f7667d4d7640f7#notes

The transformation of Custom Properties done by this plugin is not complete and cannot be because dynamic cascading variables based on custom properties relies on the DOM tree. Since we do not know the DOM in the context of this plugin, we cannot produce safe output. This plugin currently aims to provide a future-proof way of using a limited subset of the features provided by native CSS custom properties.

Looks like this explanation was removed in this commit 6ef218d07cbe30c357a0d00e8979f07a950383f1 @jonathantneal could you return this and maybe move it to top of README for making it more noticeable for users?

[masi]

Perhaps the note could be extended to what subset is supported. I reckon only definition within :root works. Nice would be if pseudo classes on :root would work as well:

:root:lang(en) {}
:root:link {}

[Semigradsky]

This has been described previously...

N.B. The transformation is not complete. It currently just aims to provide a future-proof way of using a limited subset (to top-level :root selector) of the features provided by native CSS custom properties. Read #1 & #9 to know why this limitation exists.

[Semigradsky]

Works as expected. Note was added to README