Yet Another elm-css作った

elm-origamiリリースしました🎉

elm-origamiってなに

CSS in Elmを実現するためのパッケージです
こんな感じに書けます

import Origami exposing (..)
import Origami.Html exposing (..)
import Origami.Html.Attributes exposing (css)
import Origami.Html.Events exposing (onClick)

view : Model -> Html Msg
view model =
    div
        [ css
            [ property "width" "100vw"
            , property "height" "100vh"
            , property "display" "flex"
            , property "justify-content" "center"
            , property "align-items" "center"
            ]
        ]
        [ button
            [ css
                [ property "display" "flex"
                , property "justify-content" "center"
                , property "align-items" "center"
                , property "position" "relative"
                , property "height" "50px"
                , property "width" "200px"
                , property "outline" "none"
                , property "border-width" "0"
                , property "background-color" "#f58c64"
                , property "color" "white"
                , property "font-size" "20px"
                , property "letter-spacing" "2px"
                , property "cursor" "pointer"
                , property "transition" "all 0.3s cubic-bezier(0.13, 0.99, 0.39, 1.01)"
                , property "box-shadow" "0 3px 5px rgba(0, 0, 0, 0.3)"
                , withPseudoClass "hover" [ property "background-color" "#ef794c" ]
                , case model of
                    Initial ->
                        noStyle

                    Loading ->
                        batch
                            [ property "border-radius" "50px"
                            , property "width" "50px"
                            , -- [Copyright (c) 2019 Epicmax LLC](https://epic-spinners.epicmax.co/)
                              withEach [ pseudoElement [] "after", pseudoElement [] "before" ]
                                [ property "content" <| qt ""
                                , property "position" "absolute"
                                , property "width" "60%"
                                , property "height" "60%"
                                , property "border-radius" "100%"
                                , property "border" "calc(30px / 10) solid transparent"
                                , animation
                                    [ ( ( from, [] ), [ propertyA "transform" "rotate(0deg)" ] )
                                    , ( ( to, [] ), [ propertyA "transform" "rotate(360deg)" ] )
                                    ]
                                , property "animation-duration" "1s"
                                , property "animation-iteration-count" "infinite"
                                ]
                            , withPseudoElement "after" [ property "border-top-color" "#ffe9ef" ]
                            , withPseudoElement "before"
                                [ property "border-bottom-color" "#ffe9ef"
                                , property "animation-direction" "alternate"
                                ]
                            ]

                    Completed ->
                        batch
                            [ property "border-radius" "50px"
                            , property "width" "50px"
                            , withPseudoElement "after"
                                [ property "content" <| qt ""
                                , property "position" "absolute"
                                , property "width" "60%"
                                , property "height" "30%"
                                , property "border-left" "3px solid #fff"
                                , property "border-bottom" "3px solid #fff"
                                , property "transform" "rotate(-45deg)"
                                ]
                            ]
                ]
            ]
            [ if model == Initial then
                span
                    [ css
                        [ animation
                            [ ( ( from, [] ), [ propertyA "opacity" "0" ] )
                            , ( ( to, [] ), [ propertyA "opacity" "1" ] )
                            ]
                        , property "animation-duration" "1s"
                        ]
                    ]
                    [ text "Click Me!" ]

              else
                text ""
            ]
        ]

rtfeldman/elm-cssをフォークしていて使い方はほぼ一緒です

なぜ作ったのか

elm-cssには型のついたプロパティ関数が多く用意されています
しかもCSSの柔軟性を表現するためによくわからない感じの型がついてます

CSSの書き方は結構ひとによって違うと思いますが、それらすべてを表現できるように設計するのは無理があるのではないでしょうか？
CSS in Elm的に使える部分だけでいいんじゃないだろうかと思いました

ということで作りました

なにがうれしいの？

新規性はほぼないです
型のついたプロパティ関数がないことが新規性みたいなもんです

一応Sassとかみたいにセレクターをネストさせていくのをelm-cssより柔軟に書けたりします

作ってみてなにがよかったの？

使う人には関係ない話ですが内部構造がむっちゃきれいになりました
すごい！よくなった！

elm-cssは結構古くて、当初はElmでCSSを書いてそこからcssファイルを生成する感じのライブラリでした
本当のところは知りませんがあんまりElmで書いても嬉しくないねって感じになったみたいです

今はstyled-componentsとかみたいにCSS in Elmな感じのことができるようになっています
同じようなアプローチとしてmdgriffith/elm-uiというパッケージがあってこちらがとてもいいよってreadmeにも書いてあります

そんな感じでelm-cssは内部の改善とかは全然されていません。Elmのversion up対応とPRのmergeだけって感じです

内部の型も昔のCSSを生成していたときの設計にCSS in Elmができるようにする機能を載せていてあんまり整理できていないなという感じです
elm-origamiでは参考にしつつほぼ1から作り直していてすごくきれいになったと思います
使う人には関係のない話ですが

使って欲しいというか

elm-origamiは任意のCSSを適用できますが、elm-uiのようなopinionatedなパッケージのほうがいいと思います
もしなにかしらの方法論でCSSを組んでいるのならそれを表現するパッケージを作って欲しいです。elm-uiみたいな
elm-origamiを作って思いましたがHtml型とは違うalt Html型をexposeするパッケージを作るのは結構できます
やって

おわり

よかったら使ってみてくださいね