alexdunphy / units Goto Github PK

The problem with server side rendering is that window doesnt exist. Neiter can it look what px the body has. Would be nice if the prop element also could be a numeric value in px.
units.convert('rem', '16px', 16);

I recently discovered the SVG DOM API provides some builtin unit conversion functionality. It would not be applicable to all cases, but I suspect it could possibly be more reliable and faster for the cases it can be used for.

See my SO answer here

For vertical-align, the two numeric values it can take are percentage and length.

• Length in this case is offset from text's baseline
• Percentage is offset from baseline as a percentage of line height
  So to correctly convert them you need to calculate line height. Unfortunately, getComputedStyle for line-height can return "normal" (appears to be "px" for all other cases). Perhaps a way to convert "normal" could be to measure something like:

getCreatedElementHeight(document.body, {
    lineHeight: el_styles.lineHeight, 
    fontFamily: el_styles.fontFamily, 
    fontSize: el_styles.fontSize
});

Though that may not be entirely reliable

When you try to convert from PX to % on an element, which is a child of body and has fixed position, it will throw an error on utilities.getRelativeElementDimension, when trying to get element.offsetParent, which is null in that case.

The solution I propose is to add document.documentElement fallback to offsetParent:
reference = positioned ? element.offsetParent || document.documentElement : element.parentNode;

This library was required from a Node Canvas dependency in our app and was failing because our code was initialised in the head rather than the body, so document.body didn't exist. This was the error for anyone googling

utilities.js: Uncaught TypeError: Cannot read property 'appendChild' of null