Better progressive enhancement control

[keithjgrant]

I have a scenario where I want to use custom properties natively for browsers that support it, with a reasonable fallback for those than don't. But I don't think this is possible with the plugin:

// input:
.nav {
  --nav-color: blue;
  background-color: var(--nav-color, white);
}

// actual result:
.nav {
  --nav-color: blue;
  background-color: white;
}

// desired result:
.nav {
  --nav-color: blue;
  background-color: white;
  background-color: var(--nav-color, white);
}

I know the plugin can’t convert this, and I don’t want it to. But I want my authored styles to pass through to those browsers that can handle it.

Additionally, this throws a warning that I’d like to be able to suppress: “Custom property ignored: not scoped to the top-level :root element (.nav { ... --nav-color: ... })”

[jonathantneal]

Hey, you might want to update your copy of this Custom Properties plugin. The last major update preserved declarations by default.

[jonathantneal]

There are also warning configurations in the options of the README documentation. If you think they can be clearer, feel free to point that out in another issue or suggest a PR. I’m in agreement with you, which is why I changed the default functionality.