Document how to introduce elm-css to an existing project

[midorikocak]

Hello,

Currently I have a project that heavily uses Html, Html.Attributes and Html.Events. We have different html elements with class attributes and we have bunch of css files in the project which are getting bigger and bigger.

I wanted to introduce elm-css to the project and I was willing to have different styles in different files and able to import them to our existing elements. I am also using some external packages that generate Html elements.

Here is my question:

Do I have to replace each element's Html imports with Html.Styled ones? And what should I do when I have incompatiblity that generate Type Mismatch? For example when I use Html.Styled.Map, I got error because the plugin that generates element is using only Html, not Html.Styled.

Thank you very much.

[rlefevre]

You can use Html.Styled imports instead of Html, and if you have some modules that you cannot or do not want to change, use fromUnstyled (and eventually toUnstyled) to convert the views type.

Note that one case for which you currently must call toUnstyled even when using only Html.Styled is if you use Html.Styled.Lazy, see Html.Styled.Lazy. This will most likely be improved once Elm 0.19 is released though.

[midorikocak]

If there was a documentation on how to add elm-css to existing projects, that would be good.

[kfrn]

Thanks for this issue. My use case is not quite the same as @midorikocak, but maybe some things in common. We have a large codebase with complex views - our styles are in SCSS, but there are a few places where we have inline styles for practical reasons.

In the places where we're using the style attribute, I'm trying out replacing those elements with ones using elm-css. So far I've simply created Styled.Html msg elements with the requisite CSS, then used Styled.toUnstyled to be able to set them in place.

A simplified example in case it's helpful for someone. Equivalents:

import Color.Convert exposing (colorToCssHsl)
import Css
import Html exposing (div, text)
import Html.Attributes exposing (style)
import Html.Styled as Styled
import Html.Styled.Attributes as StyledAttrs

myRegularDiv : Color -> Html Messages.Msg
myRegularDiv borderColor =
    div
        [ style
            [ ( "border", "solid 1px " ++ colorToCssHsl borderColor ) ]
        ]
        [ text "a div with a border" ]

myCSSDiv : Css.Color -> Html Messages.Msg
myCSSDiv color =
    Styled.toUnstyled <|
        Styled.div
            [ StyledAttrs.css
                [ Css.border3 (Css.px 1) Css.solid color ]
            ]
            [ Styled.text "a div with a border" ]

(By the way, is there a library function for converting a Color to a Css.Color? I wrote one, since I couldn't see it.)

I realise that that's not the intended use of the library, it's designed to use Styled.Html msgs throughout the app. So maybe what I describe is an antipattern. But it would be useful to have a note on how to approach using elm-css in places (even if the advice is simply not to do so!)
Or just generally how to introduce elm-css to existing projects.