Hi Qiming,
I did something similar and created the following function:
module Styles.Tag exposing (style')
import Html exposing (Html, node)
import Json.Encode exposing (string)
import Html.Attributes exposing (property)
{-| Return a `style` HTML tag, to be used for inline CSS styling
-}
style' : String -> Html msg
style' css =
let
encodedStyles =
string css
in
node "style" [ property "innerHTML" encodedStyles ] []
Then, I created some CSS as a function:
module Styles.MainStyles exposing (style)
import Html exposing (Html)
import Styles.Tag exposing (style')
style : Html msg
style =
style' stylesCss
stylesCss : String
stylesCss =
"""
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica
Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
"""
Finally, in my view function, I included some css like this:
import Styles.MainStyles as Styles
view : Model -> Html Msg
view model =
div [ class "main-view" ]
[ Styles.style
, div [] [ text "another div" ]
]
On Tue, Nov 22, 2016 at 2:49 PM, Qiming Weng <[email protected]> wrote:
> This is a continuation from a conversation that originally started with
> this issue https://github.com/elm-lang/package.elm-lang.org/issues/207
>
> Here's the thing, essentially I'm trying to write a package that allows
> you to define styles in elm, and, as a side effect, those styles are
> automatically injected into the DOM in a <style> tag.
>
> *What I'm looking for is some function that can take an arbitrary string,
> and just insert it into the DOM?*
>
> Now, I can achieve this with a native function, but native functions are
> no longer allowed in the package manager (for good reasons, I think, but
> still...)
>
> Evan has suggested using the VirtualDom, but something like
>
> whatever =
> div [] [ node "style" [] [ text ".cats { ... }" ] ]
>
> Simply creates a node representation in memory, but doesn't actually
> insert it into the DOM.
>
> So, looking for some guidance here
>
> My current Elm-est attempt (still with a native module) can be found here
> - https://github.com/qimingweng/elm-narcissus/tree/master
>
> In terms of why this is useful, my original Javascript implementation
> explains in more detail - https://github.com/qimingweng/narcissus
>
> --
> You received this message because you are subscribed to the Google Groups
> "Elm Discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
