Doesn't support `calc`

[malash]

import cssstyle from "cssstyle";

export const stringifyCssText = (styleObject: object): string => {
  let cssText = "";
  const style = new cssstyle.CSSStyleDeclaration(newCssText => {
    cssText = newCssText;
  });
  Object.assign(style, styleObject);

  return cssText;
};
console.log(
  stringifyCssText({
    width: "100vh",
    height: "calc(100vh * 2)"
  })
);
// will output `width: 100vh;` but `height` is missing

Demo here https://codesandbox.io/s/flamboyant-moore-983md

[malash]

cc @jimexist @byunicorn

[jsakas]

Hi @malash, thanks for reporting. I think the lib should definitely support calc properties. I will take a look.

[jsakas]

Digging in, it looks like supporting calc isn't exactly trivial. Browsers will actually evaluate what it can when setting the result.

I put up a WIP branch that handles expressions that cannot be evaluated directly, such as percentage types or units that do not match. But in your example, the result of the calc would actually just be calc(200vh). So we need to parse the calc function and evaluate the expression if possible - this is where it starts to get a little more complicated than a simple patch on the lib.

Some example tests:

style.setProperty('width', 'calc(100px * 2)');
expect(style.getPropertyValue('width')).toEqual('calc(200px)');

style.setProperty('width', 'calc(calc(100px * 2) - calc(100vw + 80px))');
expect(style.getPropertyValue('width')).toEqual('calc(200px - (100vw + 80px))');

#101

[aeagle]

Hi @jsakas. I can see that you've merged #115 but haven't created an NPM release yet that includes it which means dependant issues in jsdom remain outstanding, i.e. jsdom/jsdom#1332.

A test against the latest version 2.2.0 confirms that support for calc is still not there - https://runkit.com/embed/2f7g0k4iu8nx.

Were you intending to release only after adding logic to evaluate the calc expression?

[jsakas]

Hi @aeagle - v2.3.0 has been published this morning with the basic calc implementation.

[aeagle]

Fantastic. Many thanks!