💬
Chakra-UIからPanda CSS用のpresetが公開されました
こんにちは!
何かと頻繁に更新のあるChakra-UI
ですが、今回PandaCSS
用のpresetが公開されていたので紹介します。
Panda CSS
Chakra-UIの開発メンバーにより開発された CSS-in-JS ライブラリです。
サーバーファースト時代における CSS-in-JS の課題を解決すること
を目的としています。
Chakra-UI
2024年の10月にv3に更新されました。
それまでのアーキテクチャから一新され、Zag.js
やArk-UI
といった同チームにより開発された
ヘッドレスフレームワークを使ったコンポーネントへと変更されています。
v3更新のタイミングでPanda CSS
への移行も期待されましたが、Break Changesを減らしたいとのことで見送りとなりました(参考)
しかしながらテーマなどの設定はPanda CSSライクなAPIに変更されたため、同時に使用することは可能です。
使い方
- Panda CSSをセットアップします。
本記事では下記ドキュメントのvite
をもとに作成したプロジェクトで動作させています。
-
@chakra-ui/panda-preset
をインストール
npm i -D @chakra-ui/panda-preset
- presets, themeを設定する
panda.config.ts
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
+ // Presetを追加
+ presets: ["@chakra-ui/panda-preset"],
+ // Theme用のconditionを追加
+ conditions: {
+ light: "[data-color-mode=light] &",
+ dark: "[data-color-mode=dark] &",
+ },
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
// Files to exclude
exclude: [],
// The output directory for your css system
outdir: "styled-system",
});
index.html
<!doctype html>
<html lang="en" data-color-mode="light">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
- Recipeを使ってコンポーネントを配置
必要なコンポーネントのRecipeをimportし、適用します。
App.tsx
import { center } from "styled-system/patterns";
import { css } from "styled-system/css";
import { input } from "styled-system/recipes";
const App = () => (
<div className={center({ p: "2rem" })}>
<section className={css({ maxW: "480px", w: "full" })}>
<h1 className={css({ textStyle: "lg", fontWeight: "bold" })}>
PandaCSS Presets
</h1>
{/* Recipeを適用 */}
<input type="text" className={input()} />
</section>
</div>
);
export default App;
設定が適用されていれば以下のような表示結果となります。
-
ライトモード (
data-color-mode="light"
)
-
ダークモード (
data-color-mode="dark"
)
まとめ
今回はChakra-UIから公開されたPanda CSS用プリセットについて紹介しました。
各コンポーネント毎に適用していく使い方はあまりしないかもしれませんが、現状Ark-UI
では存在するVue.js
やSvelte
などの別フレームワークへの適用の可能性が見えてきたかなと感じます。
また、Panda CSS
に対してChakra-UI
のトークン設定を引き継がせるという使い方もあると思います。
この辺りは今後も注視していこうと思います。
Discussion