# How to migrate to rtfeldman/elm-css

**URL:** <https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530>\
**Category:** Learn\
**Created:** [July 25, 2022, 3:43pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530 "2022-07-25T15:43:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carl/32/4542_2.png) [@Carl](https://discourse.elm-lang.org/u/Carl)\
**Post date:** [July 25, 2022, 3:43pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530/1 "2022-07-25T15:43:40Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![pdamoc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pdamoc/32/36_2.png) [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)\
**Post date:** [July 25, 2022, 4:07pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530/2 "2022-07-25T16:07:36Z")

</div>

> [@Carl](#):
>
> Does all the existing in my view code have to be replaced with elm-css calls before my app will run again?

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.

---

<div class="post-metadata">

**Author:** ![Carl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carl/32/4542_2.png) [@Carl](https://discourse.elm-lang.org/u/Carl)\
**Post date:** [July 26, 2022, 1:26pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530/3 "2022-07-26T13:26:44Z")

</div>

thanks. That has gotten me a good distance.

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

```auto
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:

```auto
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` ?

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [July 26, 2022, 2:17pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530/4 "2022-07-26T14:17:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Carl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carl/32/4542_2.png) [@Carl](https://discourse.elm-lang.org/u/Carl)\
**Post date:** [July 26, 2022, 3:07pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530/5 "2022-07-26T15:07:26Z")

</div>

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

Here’s what worked:

```auto
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]

```

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [July 26, 2022, 3:20pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530/6 "2022-07-26T15:20:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Carl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carl/32/4542_2.png) [@Carl](https://discourse.elm-lang.org/u/Carl)\
**Post date:** [July 27, 2022, 1:00pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530/7 "2022-07-27T13:00:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [August 6, 2022, 1:00pm UTC](https://discourse.elm-lang.org/t/how-to-migrate-to-rtfeldman-elm-css/8530/8 "2022-08-06T13:00:34Z")

</div>

Closed on August 6, 2022, 1:00pm UTC

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