CSS Properties that expect one or more values

[JoshSweaterGuy]

CSS Properties that expect one or more values

For properties like background-image that take in one or multiple images, decide how to implement.

Ideas

This example overrides the addition operation for image type problem would be that it is tied to the Unit.Image type, other tags may not expect multiple images

CSS.background(image:
.image(.url("")) +
.image(.src("asdf"))
)

This example creates a new initializer that takes in multiple problem would be that it is a little ugly and requires a custom initializer (or Shipwright + Treasure modification)

CSS.background(image: .image(.url("")))
CSS.background(images: [ .image(.url("")), .image(.src("asdf")]))

Issues

Some CSS properties with multiple values that get taken in do this one or more thing. If there is properties with 2 of these its possible to create 4 initializers but any more and its exponential. In this case the addition operator might make more sense but more prone to user error.

Another note overriding the addition operator may be not super trivial because some CSS elements require comma separator and some require just spaces or a slash. Also for applying the addition operator to Color it would be cool to auto-apply color-mix(...) and mix the two colors which would be another utility on the + operator that could mess things up. Because of this it may be better to create/use another operator (like '|').

CSS.takesInSomeAmountOfColors(color:
    (.red + .blue) | \\ no function, might be a cool feature later on, with default mix fn
    .colorMix(.rcs(.srgb), .red, .blue) | \\ currently how color mix works, notice it takes in a function
    .rgb(100, 100, 100)
 )

[JoshSweaterGuy]

issue (.red + .blue) is not possible because it cant infer the type would need to be Unit.Color.red + Unit.Color.blue, which is long and nontrivial so operators are probably not the way to go for this.

[JoshSweaterGuy]

solved in 0.4 by using parameter sequences and avoiding adding some named params in some cases.

CSS.background(image: .image(.url("")), .image(.url("")))