feat(css): replace linaria with pandacss

.gitignore

@@ -43,3 +43,7 @@ next-env.d.ts
 # storybook
 /.storybook
 *storybook.log
+
+## Panda
+styled-system
+styled-system-studio

README.md

@@ -15,7 +15,7 @@ This is my playground where I test or practice TypeScript, Next.js, and related
 - react-table
 - zod
 - headlessui
-- linaria
+- panda css
 
 ## Backend
 

next.config.ts

@@ -1,10 +1,12 @@
+import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
 import type { NextConfig } from 'next';
-import withLinaria from 'next-with-linaria';
+
+const withVanillaExtract = createVanillaExtractPlugin();
 
 const nextConfig: NextConfig = {
   experimental: {
     typedRoutes: true,
   },
 };
 
-export default withLinaria(nextConfig);
+export default withVanillaExtract(nextConfig);

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "prepare": "husky",
+    "prepare": "husky && panda codegen",
     "types:check": "tsc --noEmit",
     "lint:check": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
@@ -24,9 +24,6 @@
     "@conform-to/react": "^1.2.2",
     "@conform-to/zod": "^1.2.2",
     "@headlessui/react": "^2.2.0",
-    "@linaria/babel-preset": "^5.0.4",
-    "@linaria/core": "^6.2.0",
-    "@linaria/react": "^6.2.1",
     "@tanstack/react-table": "^8.20.5",
     "@vitest/eslint-plugin": "^1.1.7",
     "@wyw-in-js/babel-preset": "^0.5.5",
@@ -36,7 +33,6 @@
     "mini-css-extract-plugin": "^2.9.2",
     "next": "^15.1.2",
     "next-auth": "5.0.0-beta.25",
-    "next-with-linaria": "^0.7.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "typescript-case-convert": "^1.3.5",
@@ -51,6 +47,7 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.15.0",
     "@next/eslint-plugin-next": "^15.0.2",
+    "@pandacss/dev": "^0.52.0",
     "@secretlint/secretlint-rule-preset-recommend": "^9.0.0",
     "@storybook/addon-essentials": "^8.4.2",
     "@storybook/addon-interactions": "^8.4.2",

panda.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig, defineGlobalStyles } from '@pandacss/dev';
+
+const globalCss = defineGlobalStyles({
+  html: {
+    fontSize: '14px',
+    lineHeight: '1.5rem',
+    fontFamily: "'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif",
+  },
+  h1: {
+    fontSize: '1.5rem',
+    fontWeight: 'bold',
+  },
+});
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: ['./src/app/**/*.{js,jsx,ts,tsx}'],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: 'styled-system',
+
+  syntax: 'template-literal', // required
+  jsxFramework: 'react', // optional
+  globalCss,
+});