主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2023/04/29
最近ゼロランタイム CSS-in-JS を触っていることがあるのですが、今回はラクスさんのブログで紹介していた macaronについての記事です。
macaron は、 styled-components などの CSS-in-JS とは異なり、ビルド時に静的な CSS を吐き出すいわゆるゼロランタイム CSS-in-JS と呼ばれるライブラリです。
この手のもので一番有名なのは vanilla-extract が有名だと思います。
個人的には、 macaron のメリットとしてはコンポーネントのコロケーションがしやすい点が挙げられると思います。
vanilla-extract は .css.ts
のようなものを作る必要がありますが、 macaron はそれを裏で自動でやってくれます。
これにより、 styled-components 的な書き方になって、開発がやりやすくなります。
デメリットとしては、公式サイトのドキュメントがあまり充実していないことです。
とはいえ、中身は vanilla-extractなので、同じ書き方で問題ありません。
つまりは、こういった感じ。
import { styled } from "@macaron-css/react";
const Button = styled("button", {
base: {
// ...
"@media": {
"(min-width: 720px)": {
width: "400px",
},
},
},
});
簡単ですね。ということで、メモでした。