panda cssを使ってみる

環境はbun, remix
環境構築の流れは

1. bun create vite@latest
   • ここではremixを選択する
2. vercelにデプロイするので試しでデプロイ
3. vercelで確認
4. panda cssを追加
5. panda cssをvercelで確認
   • pnpm panda init --postcssをする際にpostcss.config.jsではなく新しくpostcss.config.cjsが追加されるため、手動でその内容をpostcss.config.jsにもってくる
6. biomeが好きなので、biomeを入れる

export default {
  plugins: {
    autoprefixer: {},
    "@pandacss/dev/postcss": {},
  },
};

tailwind系は消した

export const C: FC = () => {
	return (
		<div
			className={css({
				border: "1px solid black",
				height: `calc(100vh - 20px)`,
			})}
		>
			dayCalendar
		</div>
	);
};

こういう時に
calc(100vh - 20px)はいけるんだけどcalc(100vh - ${hoge}px)はいけない。postcssあるある。