Styles get lost after model update

[simonh1000]

Take a look at https://ellie-app.com/7ZFCDMKy54sa1 .

Look at the red square using the dev console and note the padding is a mixture of 5 and 20px.
Click the button.

Expect: padding-top of 5px
Actual: All mention of padding has been removed from html being rendered

module Main exposing (main)

import Browser
import Dict exposing (Dict)
import Html exposing (Html, button, div, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)


type alias Model =
    { styles : Dict String Int }


initialModel : Model
initialModel =
    { styles =
        Dict.fromList
            [ ( "width", 100 )
            , ( "height", 100 )
            , ( "padding", 20 )
            , ( "padding-top", 5 )
            ]
    }


type Msg
    = Increment


update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            { model | styles = Dict.remove "padding" model.styles }


view : Model -> Html Msg
view model =
    let
        attrs =
            model.styles
                |> Dict.map (\k v -> style k (String.fromInt v ++ "px"))
                |> Dict.values
    in
    div []
        [ div (style "backgroundColor" "red" :: attrs) []
        , button [ onClick Increment ] [ text "Remove one" ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

Comments:

• this issue can occur for any css that can be built using a composite key, and by sub-keys: margin, background, ...
• Joshua Reusch found that Vue and Angular have the same bug: https://codesandbox.io/s/nostalgic-goldstine-xbfby (vue) https://codesandbox.io/s/silent-glade-ronuo (angular)
• React has special handling https://github.com/facebook/react/blob/b98adb648a27640db8467064e537b238b8c306ce/packages/react-dom/src/shared/CSSShorthandProperty.js

[lydell]

Probably related: elm/html#145