best way to compose styles

[brunoti]

Let's say I want to create a custom function called size. The value passed to it should be applied in the same way tailwind does: sets width and height.

I tried to do this:

pub fn size(size: Size) -> Style(a, b) {
  sketch.class([
    sketch.width(size),
    sketch.height(size),
  ])
  |> sketch.compose()
}

But it ended memoizing the function and always returned the same class on lustre.

Returning a list and spreading/appending is also a possible way. But I did it like this:

pub fn size(size: Size) -> Style(a, b) {
  sketch.dynamic("size-" <> size.to_string(size), [
    sketch.width(size),
    sketch.height(size),
  ])
  |> sketch.compose()
}

// Then we can sketch.class([some_style, size(px(10))])

How bad is it? Is there a better way to do it? I think we should have some compose examples on the docs.