💈
lumeでPanda CSSを使うメモ
勉強会でstatic site generatorであるlumeを教わったので、Panda CSSを組み合わせるところまで試してみたのでメモです。
概ね同内容のリポジトリはここにあります: https://github.com/sunnyone/luma-pandacss-demo
前提
lumeのsrcは./srcとしている。
const site = lume({
src: "./src"
});
site.use(jsx());
site.use(mdx());
postcss pluginのインストール
@importを使うようにするために、https://lume.land/plugins/postcss/#installation の通り設定。
_config.tsに以下を追加
import postcss from "lume/plugins/postcss.ts";
site.use(postcss());
index.css + layoutの設定
layoutを作り、エントリポイントのindex.cssを読むようにする。
src/index.css
body {
background-color: green; /* sample */
}
src/_includes/layouts/main.vto
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
{{ content }}
</body>
</html>
このレイアウトを適用してスタイルが適用されることを確認。
src/index.tsx
export const layout = "layouts/main.vto";
export default (data: Lume.Data) => {
const { title, date } = data;
return (
<header>
<h1>{title}</h1>
<time>{date.toString()}</time>
</header>
);
};
@pandacss/devのインストール
$ deno add npm:@pandacss/dev
Add npm:@pandacss/dev@0.51.1
config生成
$ deno run -A --node-modules-dir npm:@pandacss/dev init
🐼 info [cli] Panda v0.51.1
🐼 info [init:config] creating panda config file: `panda.config.mjs`
🐼 warn [init:config]
It looks like you already have panda created`.
You can now run `npm run panda --watch`.
(略)
これでpanda.config.mjsができる
CSS出力先を変更
import対象であるsrc/_includesの下に作るようにするため、outdirをsrc/_includes/styled-systemに設定する。
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ["./src/**/*.{js,jsx,ts,tsx,md,mdx}"],
// Files to exclude
exclude: [],
// Useful for theme customization
theme: {
extend: {},
},
// The output directory for your css system
outdir: "src/_includes/styled-system",
});
.gitignoreも変えておく
/src/_includes/styled-system
再生成する
$ rm -rf styled-system
$ deno run -A --node-modules-dir npm:@pandacss/dev codegen
生成タスクの追加
deno.jsonのtasksに以下を追加する
"css": "deno run -A --node-modules-dir npm:@pandacss/dev"
以下で生成
$ deno task css
index.cssの調整
Panda CSSのlayerの指定とimportを追加する
@layer reset, base, tokens, recipes, utilities;
@import "styled-system/styles.css";
お試し
src/index.tsx
import {css} from "./_includes/styled-system/css/index.mjs";
export const layout = "layouts/main.vto";
export const title = "Hello, World";
export default (data: Lume.Data) => {
const { title, date } = data;
return (
<header>
<h1 className={css({fontSize: "30px"})}>{title}</h1>
<time>{date.toString()}</time>
</header>
);
};
importがちょっと気持ち悪いけども使えるようになった。
Discussion