Support calc

[c-harding]

As this transformer now supports viewport units (#18), please could we add support for calc? This would allow us to use rules such as margin-left: calc(50vw - 10px), which could compile to {marginLeft: vw(50)-10} (with vw from https://github.com/joetakara/react-native-expo-viewport-units).

[c-harding]

Actually I think I misunderstood the form the output takes, as viewport widths are not converted to function calls by this module. I guess I'll have to go without.

[c-harding]

How did you get viewport widths to work in the first place? I'm now getting the error "JSON value '30vw' of type NSString cannot be converted to a ABI33_0_0YGValue. Did you forget the % or pt suffix?".

[kristerkari]

Hey @xsanda.

So let me explain a bit about calc and the viewport units.

Both of them need to be calculated at runtime. The viewport units work because they run through a special function that uses the Dimensions module of React Native to check what the viewport width and height is.

calc is a bit trickier to handle, because when you use width or height inside of calc, the size of the elements needs to be known. In React Native it's only possible to get the size of an element asynchronously, which means that you need to first get the value, and then re-render the component.

[c-harding]

If you only use exact and viewport values (as opposed to percentages), then why would calculating calc(50vw + 5 px) be any harder than calculating 50vw? The output is in pixels anyway.

[kristerkari]

If you only use exact and viewport values (as opposed to percentages), then why would calculating calc(50vw + 5 px) be any harder than calculating 50vw? The output is in pixels anyway.

That's easy to handle, the problem is that calc is really useful when used with width and height (e.g. https://css-tricks.com/a-couple-of-use-cases-for-calc/).

I really would not like to add support for CSS features that are only partially implemented.

[kristerkari]

So calc with viewport units is easy, but calc with width/height + percentages is difficult to implement.

[kristerkari]

Also, I have made a proof of concept of using percentages and calc. I would just need to finish writing a babel plugin for it.

Here's an example:
https://github.com/kristerkari/css-calc-proof-of-concept/blob/master/App.js#L47-L61

[kristerkari]

I have also created a library that turns calc values to pixels based on the viewport/element size:
https://github.com/kristerkari/css-calc-transform/blob/master/__tests__/index.spec.js

[NE-SmallTown]

Hey guys, will the css-calc-transform be added to this repo?

[iambool]

Hey guys, will the css-calc-transform be added to this repo? +1

[kristerkari]

@NE-SmallTown @iambool Look at my comment above. It can not just be added, calc() needs values that can only be known at runtime.