suggestion: Consider using a data structure that enforces required fields on a per-type basis.

Right now, this is a valid object per this type that will pass the type-checker:

const dimension: LayoutDimensionConfig = { type: "pixel", rem: 100 }

This is not actually correct, and it would be good for the compiler to prevent these kinds of situations to begin with.

We can use discriminated unions to achieve type safety in this scenario. For example:

type LayoutDimensionConfig =
  | { type: "stretch" }
  | { type: "content" }
  | { type: "pixel"; pixels: number }
  | { type: "rem"; rem: number }

Now, the same example from before becomes a compiler error!

Great idea, thanks!

@sfc-gh-bnisco had to make a lot of changes in useLayoutStyles to support this. Could you take another look since it is quite different since Lukas approved now.

suggestion (non-blocking): Now that we have a union type to work with, another common pattern is to utilize a switch with assertNever on these code paths in order to get exhaustive compiler-time type checking.

Something like:

const { type } = widthConfig

switch (type) {
  case DimensionType.STRETCH:
    width = "100%"
  case DimensionType.REM:
    width = `${widthConfig.rem}rem`
  // ... all the other cases
  default:
    assertNever(type)
}

The benefit of this approach is that if the type union were to add a new member, this switch statement would become a compiler error until the new case is added. The intention here is to have the compiler proactively alert to the areas that need to be updated.