search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
597 stars 77 forks source link

don't warn of unexpandable (undefined) properties #149

Closed drzraf closed 5 years ago

drzraf commented 5 years ago

According to specification:

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with @media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.

I use this CSS trick

@supports (--custom:property) {
    [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
    }
}

In combination with: <div style="--aspect-ratio:1">

But postcss-custom-properties then issues this warnings:

[1] undefined [undefined] [[repeated multiple times]]
[1] 45:2    ⚠  variable '--aspect-ratio' is undefined and used without a fallback [postcss-custom-properties]

Defining a default value, whether from :root, from postcss.config.js or using var()'s second argument is not a solution because I want to preserver the expression as-is in the final CSS but just avoid this warning.

jonathantneal commented 5 years ago

Would you update your copy of the plugin? You are probably using an old version. This plugin doesn’t do anything like that anymore. I had the same issues before I started maintaining this.

drzraf commented 5 years ago

Indeed. I had postcss-cssnext in my deps' which bundled an additional (outdated) version postcss-custom-properties which, sadly, was the one in use when running postcss.

I updated to postcss-preset-env and it now runs like a charm.

thx