Panda CSS を触ってみる

こんにちは、上條（mk-0A0）です。
少し前に Panda CSS というライブラリを見かけ、気になったので触ってみました。

Panda CSS とは

Panda CSS とは、Chakra UI の開発チームが開発した比較的新しい CSS in JS ライブラリです。Github を見ると Chakra UI や Vanilla Extract などさまざまなライブラリから影響を受けているようで、それらのいいとこ取りをしたような印象を持ちました。

使い方

ドキュメントに沿ってインストールします。

npm install -D @pandacss/dev
npx panda init --postcss

npx panda init で panda.config.ts と styled-system ディレクトリが生成され、--postcss を付けると postcss.config.cjs も生成されます。既存のプロジェクトへの導入で既に postcss の config ファイルがある場合は前者のコマンドで大丈夫です。styled-system ディレクトリに Panda CSS を使うための関数などが生成され、panda.config.ts の outdir で生成するディレクトリの変更が可能です。
実際に使うにはもう少し設定が必要なのですが、ドキュメントどおりに進めれば問題なく動くと思うので本記事では省略します。

ドキュメントで紹介されている使い方は大きく分けて3通りあります。

関数を使う

Panda CSS の基本的な使い方で、className に css 関数を渡してプロパティを定義します。ドキュメントはこちらです。

import { css } from "@styled-system/css"

const Home = () => {
  return (
    <main
      className={css({
        fontSize: "2xl",
        fontWeight: "bold",
        bgColor: "gray.200",
      })}
    >
      Hello 🐼!
    </main>
  )
}

export default Home

props を使う

postcss.config.js に jsxFramework を設定すると Box などのコンポーネントが使えるようになり、props でスタイルが指定できます。ドキュメントはこちらです。

import { defineConfig } from "@pandacss/dev"

export default defineConfig({
  // 省略
  jsxFramework: "react",
})

import { Box } from "@styled-system/jsx"

const Home = () => {
  return (
    <Box fontSize={"2xl"} fontWeight={"bold"} bgColor={"gray.200"}>
      Hello 🐼!
    </Box>
  )
}

export default Home

css 関数を使うパターンと見た目は特に変わりません。

Recipes を使う

Recipes とは、複数のスタイルを定義して使用する側で出し分けができる機能です。base で共通のスタイルを定義し、variants で使用する場所によって異なるスタイルを定義します。ドキュメントはこちらです。

import { cva } from "@styled-system/css"

export const backgroundColor = cva({
  base: {
    fontWeight: "bold",
    fontSize: "2xl",
  },
  variants: {
    color: {
      gray: { bgColor: "gray.200" },
      red: { bgColor: "red.200" },
    },
  },
})

import { backgroundColor } from "@src/styles/backgroundColor.css"

const Home = () => {
  return (
    <main>
      <div className={backgroundColor({ color: "gray" })}>Hello gray 🐼!</div>
      <div className={backgroundColor({ color: "red" })}>Hello red 🐼!</div>
    </main>
  )
}

export default Home

このように、使用する側で variants で定義した color を指定することでスタイルの出し分けができます。

メリット

ドキュメントに書いてあるとおり、以下3つが大きな特徴です。

Zero runtime

CSS in JS は二重解析によるパフォーマンス低下のデメリットがあります。二重解析とはブラウザが CSS in JS で構築された CSS を読み込むときに起こる現象で、① JavaScript で記述された CSS の解析 ② CSS でスタイリングするための解析が行われることです。
その二重解析を回避できるのが Zero runtime で、ビルド時に .css ファイルを生成することで①を実行する必要がなくなりブラウザ実行時のパフォーマンスが上がります。

Type safe

型安全が保証されているため、存在しない CSS プロパティを指定してもエラーで気づけたり、補完が使用できるなどの恩恵があります。たまに typo しても気づかないことがあるので、型安全に開発できるのはとても助かります。

Amazing DX

セットアップさえ済めば普通の CSS と同じように書けるので、学習コストが低くなります。そのため、開発に慣れていないメンバーでも特に問題なくプロジェクトに入ってもらえそうだなと思いました。

他にも RSC Compatible とも書かれており、React Server Component に対応しているそうですが、この部分はよく分かっていないので今後の記事で調べたことをアウトプットできたらいいなと思っています。

まとめ

Amazing DX と謳われていることもあってとっつきやすく、さまざまな使い方ができるのでプロジェクトのニーズに合わせた開発ができそうだなと思いました。Patterns や Slot Recipes など調べきれなかった機能があるので、引き続き触りながら知見を溜めていきます！