Open6

elm-origami開発に関していろいろ

css を複数適用する

styled-componentsかemotionのドキュメントに複数適用した場合どっちが優先されるかわからんよって書いてあった気がする

elm-cssでは複数適用した場合最初のが適用されてそれ以外は捨てられます。が、捨てられたほうもクラス名はつくため他のところで捨てられたstyleが適用されているとstyle tagに入ってることになるので適用されます。その場合どっちが優先されるかはわかりません。
1個しか付けれないよって規約でもいいんですが現状の実装はよろしくないですね。

elm-origamiでは複数適用できて優先はわからないという実装にしてます。そこら辺は作り直したので。

今後

一つしか適用できないようにするなら型をそういう感じにすべきかなって思います。
もしくは適用した順になるように内部でくっつけるようにするか……

型安全CSSについて

この文脈での型安全はCSSの構文を型付DSLで書けるようにして安全だねってするやつです。

https://qiita.com/arowM/items/2d5ff8f773e8b53c5f79#css-in-js-elm-css-との比較

「型安全にするため」という名目で独自のプロパティ名を逐一調べないといけません。

調べて使い方を理解しないといけないのだるい。
elm-cssは型安全CSSを目指して作り始めたっぽいのでそういう部分が大きいんですが、DSLを表現するためにextensible recordによるFantom Typeしててなかなか面倒です。文字列で書けばいいんじゃないかと思ってます。
あとCSSがたくさんあるせいで漏れ漏れな感じです。メンテする気はもうないと思います。

わたしはCSS in Elm的な部分だけあればいいと思ったので抜き出してきれいにしてorigamiを作った感じです。仕組みを後付してきれいにしてなかったので結構謎な感じだったんですよね。

CSSファイルを生成する

型安全CSSを目指して作られたっぽいelm-cssは以前はCSSファイルを生成してました。
その頃使ってないのであんまりわかんないんですけど。
その後、今のCSS in Elm的使用法だけに限定された感じです。

CSS生成部分を使いたいひと用にフォークしたパッケージもあった気がする

テスト用に何か生成する

それはともかく要素に適用されたstyleを吐き出すAPI作ったらテスト用に使えるかなってちょっと思ってる。

Chakra

Chakraはemotionを使って作られたUIライブラリ?です。たぶん
ひとびと、結局よくできたコンポーネント集を求めているらしいのでそういうの作っといたらいいのかなって思ってる。

てーみんぐ

てーみんぐ機能があるんだけど結構使われるものらしい。そうなのか……。それも作ったほうがいいかな……。

型安全CSSセレクター

elm-origamiではプロパティは文字列で書けよってなってますがセレクターには型を付けてます。
これにはやむを得ぬ理由があって

spam, ham {
  egg, sausage {
    ...
  }
}

こういうネストかつセレクターリストを使われたらこういう風に平らにしたくて

spam egg, spam sausage, ham egg, ham sausage {...}

emotionとかだとSASS的なパースをしてるんじゃないかと思ってるんですが(確認する気ない)パーサーを書くのは面倒なので型付DSLを作りました。

今後

来年あたりにis, where selectorなんかがChromeとかでも使えるようになるかと思うのでそしたら型を排除して簡単な実装にしちゃおうかなと考えてます。is使ってくれ

ログインするとコメントできます