Using elm-css with elm-pointer-events

[John_Alm_Martensson]

Hi,
I’m new to Elm and trying to use elm-css with elm-pointer-events.

But I’m getting the following error:

TYPE MISMAT    CH - The 1st argument to `p` is not what I expect:

29|         [ p
30|#>#            [ Mouse.onClick Click ]
31|             [ text <| Debug.toString event ]

This argument is a list of type:

List #(Html.Attribute Msg)#

But `p` needs the 1st argument to be:

List #(Attribute msg)#

Any thoughts on how to solve this?

Sourcecode:

module Mouse exposing (..)

import Browser
import Html.Events.Extra.Mouse as Mouse
import Html.Styled exposing (..)



-- import Html exposing (..)


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


type Msg
    = None
    | Click Mouse.Event


view : Msg -> Html Msg
view event =
    div []
        [ p
            [ Mouse.onClick Click ] 
            [ text <| Debug.toString event ]
        ]

[dmy]

Have a look at Html.Stryled.Attributes.fromUnstyled.

Html.Styled.Attribute from elm/css is actually not the same type as Html.Attribute from elm/html and this function is required to use the later in elm-css.

Similarly, this is a little tricky at first with elm-css, but Html.Html type from elm/html is not the same as Html.Styled.Html from elm-css, and the Browser.sandbox view function needs the former, hence the >> Html.Styled.toUnstyled needed at the top level.

Example: https://ellie-app.com/8Fz4PKzrjmHa1

PS: nice trick with using the Msg as the Model for a quick debug, a little confusing at first though.

[John_Alm_Martensson]

Thanks a lot @dmy !
The “Attr.fromUnstyled” did the trick.

And I get your comment regarding the model. I just used an example code from elm-pointer-events to get a small and readable example.