postcss / postcss-custom-properties

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

Fix calc multiple custom props with fallbacks #147

Closed tornqvist closed 6 years ago

tornqvist commented 6 years ago

This fixes an issue where a calc with multiple var in it would replace the trailing parentheses with the last fallback it encountered.

An example

/** source */
.text--calc {
  width: calc((100% - var(--xxx, 1px)) + var(--yyy, 10px));
}

/** before fix */
.text--calc {
  width: calc((100% - 1px) + 10px 10px;
  width: calc((100% - var(--xxx, 1px)) + var(--yyy, 10px));
}

/** after fix */
.text--calc {
  width: calc((100% - 1px) + 10px);
  width: calc((100% - var(--xxx, 1px)) + var(--yyy, 10px));
}
jonathantneal commented 6 years ago

Thank you, @tornqvist !