postcss / postcss-custom-properties

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

Duplicate output with fallbacks #88

Closed Antonio-Laguna closed 6 years ago

Antonio-Laguna commented 6 years ago

Hi there!

I was adding a feature to a library I have around PostCSS which helps to create kind of a base framework for us to go through.

So we have this mixin:

That should optionally use a different line-height (if the variable is defined) otherwise it should just fall back to the global one. Something like this:

var(--heading-1-line-height, var(--heading-line-height))

Now fallback works great but if --heading-1-line-height is defined I get both outputs which is undesired:

  line-height: 1.2;
  line-height: 1.3;

I've checked the code and it seems that the logic is: If no variable and no fallback, then warning. If fallback, no matter what, append it. I guess there are valid use cases around that but I think it could be beneficial to add an option around (which replicates current behavior by default) to disable this.

Something in the lines of if (fallback && (!variable || globalOpts.doubleFallback)) {

Does this sound sane to you, would you be interested in a pull request for this feature?

jonathantneal commented 6 years ago

I would accept such a PR

Antonio-Laguna commented 6 years ago

After all, the option is already there, which is strict. It was fun going through this nevertheless!