elm-css

elm-css copied to clipboard

box-shadow in CSS allows a comma separated list of box shadows. Unless I'm missing something, it's currently not possible to do this in elm-css (besides the obvious property-based workaround).

The obvious solution would be the boxShadowX variants taking lists rather than a single set of arguments.

It does look like this is not currently possible.

One issue with the suggested solution though is that this would only allow producing multiple box shadows where the different values passed in the list to a boxShadowX variant are all of the same type as that boxShadowX variant currently takes; i.e. this would allow producing a box-shadow value of 3px 3px, 4px 4px, but not of 3px 3px, 4px 4px red.

I'm not sure what the best API to allow the latter case would be. It might be possible to add a union type with constructors which take the current type of all of the different boxShadowX variants, and these could then be used with a new boxShadows function to create multiple box-shadow values, something like:

boxShadows [ (BoxShadow2 3px 3px), (BoxShadow3 4px 4px red) ]

This would allow the existing API with the boxShadowX functions to be retained, while still allowing multiple values if needed. But it does look a bit clunky.

Alternatively, the different boxShadowX functions could be changed to return a new type rather than Style, and we would then require that these be combined together with boxShadows to produce the final Style result, something like:

boxShadows [ (boxShadow2 3px 3px), (boxShadow3 4px 4px red) ]

This would be a breaking change however.

I'm not sure which, if either, of these is better. Or possibly there's other better alternatives - or some reason one or both of these wouldn't work.

Does anyone else have any thoughts or suggestions? Do we handle anything similar to this anywhere else in elm-css already?

can you just put multiple boxShadow calls in a stylesheet? For example

shadowed = styled div
    [ boxShadow2 3px 3px
    , boxShadow3 4px 4px red
    ]

If that doesn't work, what about keeping the existing implementation adding an new method multiBoxShadows that takes a list of BoxShadow's. I'm not sure what the type Signature would look like since the boxShadow methods return a Style.

Using multiple boxShadow does not work, the first boxShadow2 will be ignored in favour of the boxShadow3 one. See https://ellie-app.com/qpLJnCFsTa1/0.

We could keep the existing API and add something like:

boxShadows : List Shadow -> Style
shadow : None compatible -> Shadow
shadow2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Shadow
...

and have most of the code common with the existing implementation, but is it worth it (versus breaking the existing API) given the recent major changes with Html.Styled?

Another alternative would be to "merge" all the box-shadow properties into a single one at the appendProperty level, but I'm not sure if this would work or if this is a good idea, it would look more like a hack.

Here's how I have it implemented on the phantom-types branch: (the branch for https://github.com/rtfeldman/elm-css/issues/375) https://github.com/rtfeldman/elm-css/blob/9e7cdbf0a26c241d2545a82f5a91e05eb5b08299/src/Css.elm#L1155-L1174

Any news about this?