Using calc in a transform expression

[MelvIsntNormal]

I can't seem to use a calc expression for a transformation. I'm trying to write:

.tooltip {
    /*--- snip ---*/
    transform: translateX(calc(0px - var(--tooltip-offset)));
}

But (what I think is) the elm-css equivalent does not compile:

tooltip : LengthOrAuto (Calc compatible) -> Style
tooltip offset =
    batch
        [ {--- snip ---}
        , transform (translateX (calc (px 0) minus offset))
        ]

I get this error:

-- TYPE MISMATCH ------------------------------------ ./src/App/View/Tooltip.elm

The 1st argument to `translateX` is not what I expect:

115|                         [ transform (translateX (calc (px 0) minus offset))
                                                      ^^^^^^^^^^^^^^^^^^^^^^^^
This `calc` call produces:

    CalculatedLength

But `translateX` needs the 1st argument to be:

    { compatible
        | length : Css.Structure.Compatible
        , numericValue : Float
        , unitLabel : String
        , units : units
        , value : String
    }

Hint: Seems like a record field typo. Maybe numericValue should be value?

Hint: Can more type annotations be added? Type annotations always help me give
more specific messages, and I think they could help a lot in this case!

[tgelu]

a bit late, but did you manage to figure this out? I am struggling with a similar case

[sebbes-at-deepgram]

Same here!

[sebbes-at-deepgram]

Workaround: in regular old css, rather than calc'ing the translation, you can actually use a series of translates, as long as they're in the same property. So we can do:

Css.transforms
      [ Css.translateX <| Css.px <| 48
      , Css.translateX <| Css.pct <| 50
      ]