declaring variable as in postcss-preset-env example not working
zanona opened this issue · 5 comments
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
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) ")"; }
@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 6ef218d
@jonathantneal could you return this and maybe move it to top of README for making it more noticeable for users?
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 {}
Works as expected. Note was added to README