How to migrate to rtfeldman/elm-css

Learn
1

I’ve written my first Elm app and used the approach in the Guide to define my HTML/CSS.

It’s got out of hand and I’d like to use elm-css instead.

Does all the existing in my view code have to be replaced with elm-css calls before my app will run again?

2

Yes, but that should be a lot easier than you might think.

You can import the elm-css variants with import Html.Styled as Html and all your Html.something will work just fine. If all the functions are used without the namespace than it is just a matter of import Html exposing (..) being replaced with import Html.Styled exposing (..).

In other words, the changes you need to do might just be limited to some import refactoring.

2 Likes
3

thanks. That has gotten me a good distance.

I’m having trouble plumbing in this new Html.Styled to my view

import Browser

app : Program () Model Msg
app =
    Browser.application
        { init = init
        , view = view
        ...
        }

view : Model -> Browser.Document Msg
view model =
    { title = "app title"
    , body = 
        [ div ...
    }

The compiler spots the problem:

Type mismatch error.
Expected: `Document Msg`
Found: `{ title : String, body : List (Html Msg) }`
Mismatched fields: 
 Field `body` expected `List (Html Msg)`, found `List (Html Msg)`Elm

Is it time to stop using Browser.Document Msg ?

4

Nope! This is the one place where you need to use toUnstyled to convert from Html.Styled to ordinary Html. Unfortunately, the error message is confusing in this case because of the import alias.

1 Like
5

I’d found several pages about toUnstyled, going back several years, but each applies it differently.

Here’s what worked:

import Browser

app : Program () Model Msg
app =
    Browser.application
        { init = init
        , view = view
        ...
        }

view : Model -> Browser.Document Msg
view model =
    let
        content = div [ ... ]
    in
    { title = "app title"
    , body = [ Html.Styled.toUnstyled content ]
6

Yes, exactly. body = takes a list, so you’ll need body = [ toUnstyled (div ...)]

1 Like
7

elm-css is now type-checking all my styling code.
It spotted an error where I was using "color" "dark-gray" in my elm app and the browser had been ignoring it — because CSS color names don’t use hyphens.

cool.

4 Likes
8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.