Parenthesis missing when using variable with CSS functions (nested)

[juliovedovatto]

I'm facing problems with IE11 browser using css variables. So I decided to use this awesome lib to convert CSS variables to normal representation value, to make work in the browser.

But the css is broken after parsing it. It does not work in any browser.

After a time debugging, I noticed a wrong behavior.

Example:

Without postcss-css-variables

:root {
  --variable-name-goes-here: 24px;
}
/* [...] */
.css_class {
    width: calc(58.3333333333% - var(--variable-name-goes-here, 0px)); 
}

Using postcss-css-variables

.css_class {
width: calc(58.3333333333% - 24px; /* <- missing )) */
}

It seems the string replacement is not working as expected.

I'm using 0.12.0 version.

[cuberoot]

I hit this too, so I took a quick look. The issue seems to be this regex.

/var\(\s*(--[^,\s]+?)(?:\s*,\s*(.+))?\s*\)/

When it matches calc(58.3333333333% - var(--variable-name-goes-here, 0px)), it steals an extra paren.

This sort of problem is really hard to solve well with regular expressions, sadly. The expression I am trying to parse is even worse:

padding: var(--spectrum-global-dimension-size-50)
        calc(
            var(
                    --spectrum-button-primary-padding-x,
                    var(--spectrum-global-dimension-size-200)
                ) - var(--spectrum-button-primary-border-size, 2px)
        );

[juliovedovatto]

@cuberoot There is a pull request in process of approval to solve this problem #97 :)

let's hope @MadLittleMods approve it soon 🤞🏻

[cuberoot]

FYI, the fix from @juliovedovatto in #97 solves my more complicate case as well. Thanks!

[MadLittleMods]

Fixed via https://github.com/MadLittleMods/postcss-css-variables/pull/97