mdgriffith / elm-ui

What if you never had to write CSS again?
https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/
BSD 3-Clause "New" or "Revised" License
1.36k stars 111 forks source link

Feature request: batch attributes together #338

Open staeter opened 2 years ago

staeter commented 2 years ago

It would be great to be able to batch attributes together into a single one. It is a seemingly small feature but it would avoid quite a bit of overhead when whiting custom and composed attributes.

Examples:

-- max browser compatibility 
gradientBackground : Element.Attribute msg
gradientBackground =
    [ Html.Attributes.style "background" "rgb(2,0,36)"
    , Html.Attributes.style "background" "-moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"
    , Html.Attributes.style "background" "-webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"
    , Html.Attributes.style "background" "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"
    , Html.Attributes.style "filter" "progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1)"
    ]
    |> List.map Element.htmlAttribute
    |> Element.Attribute.batch

view =
    Element.el
        [ ...
        , gradientBackground
        ]
        (...)

or

mixBlendColor : Element.Attribute msg
mixBlendColor =
    [ Element.htmlAttribute (Html.Attributes.style "mix-blend-mode" "color-burn")
    , Element.Background.color (Element.rgb 1 1 0)
    ]
   |> Element.Attribute.batch

view =
    Element.el
        [ ...
        , mixBlendColor
        ]
        (...)

instead of

gradientBackground : List (Element.Attribute msg)

view =
    Element.el
        ( [ ...
          ]
              ++ gradientBackground
        )
        (...)

and

mixBlendColor : List (Element.Attribute msg)

view =
    Element.el
        ( [ ...
          ]
              ++ mixBlendColor
        )
        (...)
a-teammate commented 1 year ago

+1 that would really clean up a lot of code and make some decisions easier.

a-teammate commented 11 months ago

I am not sure if this is relevant for a possible implementation, just saw there is the same for Html: https://package.elm-lang.org/packages/arowM/html/latest/

I guess it would be easier to just convert Element.Attribute to a have two cases: Batched and Single.