💈

lumeでPanda CSSを使うメモ

2025/01/25に公開

勉強会で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