Overriding Styles not Working in Special Cases

[k15a]

If the overwritten styles are already injected the order of the rules are different.

button =
    styled Html.button
        [ backgroundColor white
        , color pink
        , fontSize (Styled.em 1)
        , margin (Styled.em 1)
        , padding2 (Styled.em 0.25) (Styled.em 1)
        , border (px 2) solid pink
        , borderRadius (px 3)
        ]


primaryButton =
    styled button
        [ backgroundColor pink
        , color white
        ]


wrapper =
    styled Html.div
        [ backgroundColor pink
        , color white
        ]


main =
    div
        []
        [ wrapper []
            [ button [] [ text "Normal" ]
            , primaryButton [] [ text "Primary" ]
            ]
        ]