returns NaN when dividing var() in calc() in preserve mode

[rokoroku]

with postcss-cssnext options

features: {
  customProperties: {
    preserve: true
  }
}

below css

:root {
    --iconSize: 14px;
    --lineHeight: calc(var(--iconSize) / 8);
}

results

:root {
    --iconSize: 14px;
    --lineHeight: NaN;
}

It's weird, because orginal css calc() should work with var() too. However, multiplying var() is working well.

So my current workaround is

:root {
    --iconSize: 14px;
    --lineHeight: calc(var(--iconSize) * .125);
}

[Semigradsky]

My result:

:root {
    --iconSize: 14px;
    --lineHeight: 1.75px;
    --lineHeight: NaN;
}

I will investigate.

[Semigradsky]

https://github.com/postcss/postcss-calc/issues/44

[MoOx]

:root {
    --iconSize: 14px;
    --lineHeight: calc(var(--iconSize) * .125);
}

body {
line-height: var(--lineHeight)
}

gives

body {
line-height: 1.75px
}

in the playground, so it might be a recent bug.

[Semigradsky]

Fixed in https://github.com/MoOx/reduce-css-calc/commit/483e3557190a767f2db244c3d9e1e00feeacae68 Just reinstall reduce-css-calc dependency