Skip to content

Commit 554a962

Browse files
sounmindsounmind
committed
feat: setup Panda CSS in a Vite project using PostCSS
1 parent 750124c commit 554a962

File tree

11 files changed

+310
-152
lines changed

11 files changed

+310
-152
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
## Panda
27+
styled-system
28+
styled-system-studio

‎README.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
1-
# React TypeScript Starter Template
1+
# React TypeScript + Panda CSS Template
22

3-
A modern web application template built with React and TypeScript, providing a solid foundation for quick setup of new projects.
3+
A modern web application template built with React, TypeScript, and Panda CSS, providing a solid foundation for quick setup of new projects with a modern styling approach.
44

55
## Tech Stack
66

7-
- **React:** v19.1.0
7+
- **Frontend Framework:**
8+
- React: v19.1.0
9+
- React DOM: v19.1.0
10+
- **Styling:**
11+
- Panda CSS: v0.53.3 (Zero-runtime CSS-in-JS)
812
- **TypeScript:** v5.7.3
9-
- **Build Tool:** Vite v6.2.3
13+
- **Build Tool:** Vite v6.2.3 with SWC
1014
- **Testing Framework:** Vitest v3.0.9
1115
- **Testing Utilities:**
12-
- Testing Library (React, Jest-DOM, User-Event)
13-
- Happy DOM for browser environment simulation
16+
- Testing Library React: v16.2.0
17+
- Testing Library Jest-DOM: v6.6.3
18+
- Testing Library User-Event: v14.6.1
19+
- Happy DOM: v17.4.4 for browser environment simulation
1420
- **Code Quality:**
1521
- ESLint v9.23.0
16-
- TypeScript-ESLint
22+
- TypeScript-ESLint v8.28.0
23+
- React-specific linting plugins

‎bun.lock

Lines changed: 254 additions & 1 deletion
Large diffs are not rendered by default.

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>Practice PandaCSS</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "react-typescript-starter-template",
2+
"name": "practice-panda-css",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
@@ -8,14 +8,16 @@
88
"build": "tsc -b && vite build",
99
"lint": "eslint .",
1010
"preview": "vite preview",
11-
"test": "vitest"
11+
"test": "vitest",
12+
"prepare": "panda codegen"
1213
},
1314
"dependencies": {
1415
"react": "^19.1.0",
1516
"react-dom": "^19.1.0"
1617
},
1718
"devDependencies": {
1819
"@eslint/js": "^9.23.0",
20+
"@pandacss/dev": "^0.53.3",
1921
"@testing-library/jest-dom": "^6.6.3",
2022
"@testing-library/react": "^16.2.0",
2123
"@testing-library/user-event": "^14.6.1",

‎panda.config.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { defineConfig } from "@pandacss/dev";
2+
3+
export default defineConfig({
4+
// Whether to use css reset
5+
preflight: true,
6+
7+
// Where to look for your css declarations
8+
include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
9+
10+
// Files to exclude
11+
exclude: [],
12+
13+
// Useful for theme customization
14+
theme: {
15+
extend: {},
16+
},
17+
18+
// The output directory for your css system
19+
outdir: "styled-system",
20+
});

‎postcss.config.cjs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
'@pandacss/dev/postcss': {},
4+
},
5+
}

‎src/App.css

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/App.tsx

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,11 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
1+
import { css } from "../styled-system/css";
52

63
function App() {
7-
const [count, setCount] = useState(0)
8-
94
return (
10-
<>
11-
<div>
12-
<a href="https://vite.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.tsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
31-
</>
32-
)
5+
<div className={css({ fontSize: "2xl", fontWeight: "bold" })}>
6+
Hello 🐼!
7+
</div>
8+
);
339
}
3410

35-
export default App
11+
export default App;

‎src/index.css

Lines changed: 1 addition & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1 @@
1-
:root {
2-
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
5-
6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
15-
16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
20-
}
21-
a:hover {
22-
color: #535bf2;
23-
}
24-
25-
body {
26-
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
31-
}
32-
33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
36-
}
37-
38-
button {
39-
border-radius: 8px;
40-
border: 1px solid transparent;
41-
padding: 0.6em 1.2em;
42-
font-size: 1em;
43-
font-weight: 500;
44-
font-family: inherit;
45-
background-color: #1a1a1a;
46-
cursor: pointer;
47-
transition: border-color 0.25s;
48-
}
49-
button:hover {
50-
border-color: #646cff;
51-
}
52-
button:focus,
53-
button:focus-visible {
54-
outline: 4px auto -webkit-focus-ring-color;
55-
}
56-
57-
@media (prefers-color-scheme: light) {
58-
:root {
59-
color: #213547;
60-
background-color: #ffffff;
61-
}
62-
a:hover {
63-
color: #747bff;
64-
}
65-
button {
66-
background-color: #f9f9f9;
67-
}
68-
}
1+
@layer reset, base, tokens, recipes, utilities;

‎tsconfig.app.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,5 @@
2525
/* Additional Options */
2626
"types": ["vitest"]
2727
},
28-
"include": ["src", "src/**/*.test.ts"]
28+
"include": ["src", "src/**/*.test.ts", "styled-system"]
2929
}

0 commit comments

Comments
 (0)