Astro SarkaraプロジェクトでPanda CSSを使う場合、通常のAstro + Panda CSSプロジェクトでPanda CSSを使う場合と少し異なる方法を用います。

通常Panda CSSのコードはプロジェクトルート内のstyled-systemに生成しますが、Astro Sarkaraを使用する場合はnode_modules/@cieloazul310/sarkara-cssにコードを生成します。node_modules傘下にPanda CSSのコードを生成するため、インポートする場合は相対パスではなく他のパッケージと同様にパッケージ名(@cieloazul310/sarkara-css)を記述します。

---
import { css } from "@cieloazul310/sarkara-css/css";
import { flex } from "@cieloazul310/sarkara-css/patterns"; 
---

<p class={css({ color: "primary.600" })}>
  Primary color
</p>

インポート元が@cieloazul310/sarkara-cssに変わること以外は通常のPanda CSSの使用方法と同じです。

panda.config.ts

この動作はpanda.config.tsでdefineSarkaraConfigを使って設定する場合、emitPackageがtrueになっていることに由来します。defineSarkaraConfigを使わない場合は、emitPackage: true、outDir: "@cieloazul310/sarkara-css"の指定が必須となります。

// panda.config.ts
import { defineConfig } from "@pandacss/dev";
import {
  createSarkaraPreset,
  astroComponentsPaths,
} from "@cieloazul310/astro-sarkara/preset";

export default defineConfig({
  presets: [
    "@pandacss/dev/presets",
    createSarkaraPreset({ palette: { primary: "teal", secondary: "yellow" } }),
  ],

  include: ["./src/**/*.{js,ts,astro}", ...astroComponentsPaths],

  outdir: "@cieloazul310/sarkara-css",
  emitPackage: true,  
});