Using a `+` or `-` function from ReasonML

,
#1

Hello,

I am trying to learn how to use the cool bs-css library. However, there is some part in my code where I need to use the CSS calc feature. Naturally, the library offers a strongly typed version of it, with both addition and subtraction functions. The problem is when I am trying to use it. As code is worth a thousands words:

let tooltip = style(. [
  translateY(Calc.-(-100.->pct, 5->px)),
])

ReScript compiler then complains about I'm not sure what to parse here when looking at "-".

The signature from the .rei file suggests that the functions names are actually the + and - symbols.

Is there something I am doing wrong?

#2 
let tooltip = style(. [
  translateY(Calc.\"-"(-100.->pct, 5->px)),
])

should work.

#3

It does work, indeed, thank you very much!

I might write some utilities in the future, like

let calcAdd = (a, b) => Calc.\"+"(a, b)
#4

why not just opening the module?

open Calc
let tooltip = style(. [
  translateY(-100.->pct - 5->px),
])

You might have to use open! Calc given it shadows int’s -.

3 Likes
#5

This works too and seems more convenient. I am thinking if it is worth opening it in my Styles module without any “risk”. For example, one might want to create their variables files, holding a header height and later want to set a height minus this header height and forget about the open module.

For now, using the hybrid:

transforms({
  open! Calc
  [
    translateX(-50.->pct),
    translateY(-100.->pct - 10->px),
  ]
})
#6

As long as you don’t need the “normal” -, opening Calc in a Style module should be safe.
And even if you need it, but maybe not as often as the Calc -, you can still assign it to a let binding and use it as a function.

let sub = Pervasives.\"-"
sub(3, 2)
2 Likes
#7

Yes, absolutely. After all, the Calc usage should be rather limited, I think.

Thank you for your help gentlemen.