なつねこメモ

2023/04/29

macaron で Media Query を使いたい

最近ゼロランタイム 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",
      },
    },
  },
});

簡単ですね。ということで、メモでした。