hyperapp用のstyled-componentsみたいなのをつくった

目的

hyperappでstyled-componentsみたいにスタイルを書いてみたかった。

hyperapp

こちらをごらんください
あと、picostyleというスタイル書くやつがすでにあるので、ごらんください

作ったもの

できること

styled-componentsみたいに書ける

const Element = styled.div`
  background-color: yellow;
`;

<Element>Yellow</Element>

独自のattributesを渡すこともできる

const Element = styled.div<{ color: string }>`
  background-color: ${({ color }) => color};
`;

<Element color="blue">Yellow</Element>

div以外もある

const Button = styled.button`
  background-color: yellow;
`;

できないこと

擬似要素→できるようにした

const Paragraph = styled.p`
  &:before {
    content: "> "
  }
`;

アニメーション

const Animation = styled.div`
  @keyframes {
    0% {
      color: yellow;
    }
    100% {
      color: blue;
    }
  }
`;

wrap関数でさらにラップしたエレメントを作る→できるようにした

const Original = styled.div`
  background-color: yellow;
`;

const Wrapped = wrap(Original)`
  font-size: 32px;
`;

ただし、hyperappのコンポーネントに対するスタイルはうまくいかないので注意。

しくみ

styled-componentsみたいに要素にユニークなidを振るようにして、そのidに合致するようにcssを吐く。

code.tsx

const Div = styled.div`
  color: yellow;
`;

↓

html

<div data-style="hhygaw">foo</div>
<style>
*[data-style=hhygaw] {
  color: yellow;
}
</style>

性能とかは何も考えていないので、再描画の度に<style>を書き換えている。