@as binding within function named arguments

1

Is it possible to use the @as binding when creating a make() function for example:

  @obj
  external makeStyles: (
    ~color: string=?,
    ~backgroundColor: string=?,
    ~fontFamily: string=?,
    ~fontSmoothing: string=?,
    ~fontSize: string=?,
    ~fontStyle: string=?,
    ~fontVariant: string=?,
    ~fontWeight: string=?,
    ~iconColor: string=?,
    ~lineHeight: string=?,
    ~letterSpacing: string=?,
    ~textAlign: string=?,
    ~padding: string=?,
    ~textDecoration: string=?,
    ~textShadow: string=?,
    ~textTransform: string=?,
    @as("::hover") ~hover: styles=?,
    @as("::focus") ~focus: styles=?,
    @as("::placeholder") ~placeholder: styles=?,
    @as("::selection") ~selection: styles=?,
    @as(":-webkit-autofill") ~webkitAutofill: styles=?,
    @as(":disable") ~disable: styles=?,
    @as("::-ms-clear") ~msClear: styles=?,
    unit,
  ) => styles = ""

Unfortunately at the moment the @as is ignored and it is outputting:

style: {
  placeholder: {
    color: "#FFFFFF"
  }
}

Expected:

style: {
  "::placeholder": {
    color: "#FFFFFF"
  }
}

Thanks in advance!

2

@as works if you use @deriving(abstract):

@deriving(abstract)
type rec style = {
  @optional color: string,
  @optional @as("::hover") hover: style
}

let s = style(~color="red", ~hover=style(), ())

Output:

var s = {
  color: "red",
  "::hover": {}
};
2 Likes
3

That makes sense, so I just need to allow the @deriving(abstract) generate the “make” function rather than manually making the function myself.

Thanks!

1 Like