create-packer 1.45.11 → 1.45.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-packer",
-  "version": "1.45.11",
+  "version": "1.45.13",
   "main": "index.js",
   "repository": "https://github.com/kevily/create-packer",
   "author": "1k <bug_zero@163.com>",

package/template/web-app/react-rsbuild/.gitignore

@@ -26,3 +26,8 @@ vite.config.ts.*
 *.njsproj
 *.sln
 *.sw?
+
+
+## Panda
+styled-system
+styled-system-studio

package/template/web-app/react-rsbuild/eslint.config.js

@@ -10,7 +10,7 @@ const files = scriptExtensions.map(ext => `**/*.${ext}`)
 
 export default tseslint.config([
     {
-        ignores: ['**/node_modules/', '**/dist/', '**/.history/', '**/.vscode/']
+        ignores: ['**/node_modules/', '**/dist/', '**/.history/', '**/.vscode/', '**/styled-system/',]
     },
     eslint.configs.recommended,
     importPlugin.flatConfigs.recommended,

package/template/web-app/react-rsbuild/global.css.ts

@@ -1,5 +1,5 @@
-import { globalStyle } from '@vanilla-extract/css'
+import { defineGlobalStyles } from '@pandacss/dev'
 
-globalStyle('body', {
-    margin: 0
+export const globalCss = defineGlobalStyles({
+    'html, body': {}
 })

package/template/web-app/react-rsbuild/main.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

package/template/web-app/react-rsbuild/main.tsx

@@ -1,4 +1,4 @@
 import { startApp } from '@/domain/app'
-import './global.css'
+import './main.css'
 
 startApp()

package/template/web-app/react-rsbuild/package.json

@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "prepare": "husky install",
+        "prepare": "panda codegen && husky",
         "dev": "rsbuild dev",
         "build": "rsbuild build",
         "build:analyse": "rsbuild build --env-mode analyse",
@@ -20,7 +20,6 @@
     },
     "dependencies": {
         "@tanstack/react-query": "5.51.15",
-        "@vanilla-extract/css": "1.17.4",
         "axios": "1.7.9",
         "define-zustand": "3.4.0",
         "es-toolkit": "1.39.8",
@@ -38,6 +37,7 @@
         "@commitlint/config-conventional": "17.6.1",
         "@commitlint/cz-commitlint": "17.5.0",
         "@eslint/js": "9.15.0",
+        "@pandacss/dev": "1.2.0",
         "@rsbuild/core": "1.5.2",
         "@rsbuild/plugin-eslint": "1.1.2",
         "@rsbuild/plugin-react": "1.4.0",
@@ -48,7 +48,6 @@
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
-        "@vanilla-extract/webpack-plugin": "2.3.22",
         "autoprefixer": "10.4.14",
         "commitizen": "4.3.0",
         "cross-env": "7.0.3",

package/template/web-app/react-rsbuild/pages/home/view.css.ts

@@ -1,7 +1,7 @@
-import { style } from '@vanilla-extract/css'
+import { css } from '@/styled-system/css'
 
-export const root = style({
+export const rootCss = css({
     display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    alignItems: 'center'
 })

package/template/web-app/react-rsbuild/pages/home/view.tsx

@@ -1,10 +1,10 @@
 import { useHomeData } from '@/shared/service'
-import * as styles from './view.css'
+import { rootCss } from './view.css'
 
 export default function Home() {
     const { data } = useHomeData()
 
     console.log('data', data)
 
-    return <div className={styles.root}>sdfs</div>
+    return <div className={rootCss}>sdfs</div>
 }

package/template/web-app/react-rsbuild/panda.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from '@pandacss/dev'
+import { globalCss } from './global.css'
+
+export default defineConfig({
+    // Whether to use css reset
+    preflight: true,
+    // Where to look for your css declarations
+    include: ['**/*.{js,jsx,ts,tsx}'],
+    // Files to exclude
+    exclude: [],
+    // Useful for theme customization
+    theme: {
+        extend: {}
+    },
+    // The output directory for your css system
+    outdir: 'styled-system',
+    globalCss
+})

package/template/web-app/react-rsbuild/postcss.config.cjs

@@ -3,6 +3,7 @@ module.exports = {
         'postcss-import': {},
         'postcss-nesting': {},
         autoprefixer: {},
+        '@pandacss/dev/postcss': {},
         ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
     }
 }

package/template/web-app/react-rsbuild/rsbuild.config.ts

@@ -4,7 +4,6 @@ import { pluginEslint } from '@rsbuild/plugin-eslint'
 import StylelintWebpackPlugin from 'stylelint-webpack-plugin'
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin'
-import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin'
 import { pluginSvgr } from '@rsbuild/plugin-svgr'
 import { createChunks } from './scripts'
 
@@ -39,7 +38,6 @@ export default defineConfig(({ envMode, command }) => {
         tools: {
             rspack: {
                 plugins: [
-                    new VanillaExtractPlugin(),
                     new StylelintWebpackPlugin(),
                     process.env.RSDOCTOR && new RsdoctorRspackPlugin()
                 ]

package/template/web-app/react-rsbuild/tsconfig.json

@@ -22,7 +22,7 @@
             "@/*": ["./*"]
         }
     },
-    "include": ["**/*.ts", "**/*.tsx"],
+    "include": ["**/*.ts", "**/*.tsx", "styled-system"],
     "exclude": ["scripts", "rsbuild.config.ts"],
     "references": [
         {

package/template/web-app/react-vite/.gitignore

@@ -26,3 +26,7 @@ vite.config.ts.*
 *.njsproj
 *.sln
 *.sw?
+
+## Panda
+styled-system
+styled-system-studio

package/template/web-app/react-vite/eslint.config.js

@@ -15,8 +15,9 @@ export default tseslint.config([
             '**/dist/',
             '**/.history/',
             '**/.vscode/',
+            '**/styled-system/',
             'vite.config.ts.*',
-            'mockUtils.ts'
+            'mockUtils.ts',
         ]
     },
     eslint.configs.recommended,

package/template/web-app/react-vite/global.css.ts

@@ -1,5 +1,5 @@
-import { globalStyle } from '@vanilla-extract/css'
-
-globalStyle('body', {
-    margin: 0
-})
+import { defineGlobalStyles } from '@pandacss/dev'
+
+export const globalCss = defineGlobalStyles({
+    'html, body': {}
+})

package/template/web-app/react-vite/main.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

package/template/web-app/react-vite/main.tsx

@@ -1,4 +1,4 @@
-import { startApp } from '@/domain/app'
-import './global.css'
-
-startApp()
+import { startApp } from '@/domain/app'
+import './main.css'
+
+startApp()

package/template/web-app/react-vite/package.json

@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "prepare": "husky install",
+        "prepare": "panda codegen && husky",
         "dev": "vite",
         "build": "tsc --noEmit && vite build",
         "build:analyse": "tsc --noEmit && vite build --mode analyse",
@@ -19,7 +19,6 @@
     },
     "dependencies": {
         "@tanstack/react-query": "5.51.15",
-        "@vanilla-extract/css": "1.17.4",
         "axios": "1.7.9",
         "define-zustand": "3.4.0",
         "es-toolkit": "1.39.8",
@@ -39,11 +38,11 @@
         "@emotion/babel-plugin": "11.13.5",
         "@eslint/js": "9.15.0",
         "@faker-js/faker": "8.4.1",
+        "@pandacss/dev": "1.2.0",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
-        "@vanilla-extract/vite-plugin": "5.1.1",
         "@vitejs/plugin-react": "5.0.1",
         "autoprefixer": "10.4.14",
         "commitizen": "4.3.0",

package/template/web-app/react-vite/pages/home/view.css.ts

@@ -1,7 +1,7 @@
-import { style } from '@vanilla-extract/css'
-
-export const root = style({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-})
+import { css } from '@/styled-system/css'
+
+export const rootCss = css({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+})

package/template/web-app/react-vite/pages/home/view.tsx

@@ -1,10 +1,10 @@
-import { useHomeData } from '@/shared/service'
-import * as styles from './view.css'
-
-export default function Home() {
-    const { data } = useHomeData()
-
-    console.log('data', data)
-
-    return <div className={styles.root}>sdfs</div>
-}
+import { useHomeData } from '@/shared/service'
+import { rootCss } from './view.css'
+
+export default function Home() {
+    const { data } = useHomeData()
+
+    console.log('data', data)
+
+    return <div className={rootCss}>sdfs</div>
+}

package/template/web-app/react-vite/panda.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from '@pandacss/dev'
+import { globalCss } from './global.css'
+
+export default defineConfig({
+    // Whether to use css reset
+    preflight: true,
+    // Where to look for your css declarations
+    include: ['**/*.{js,jsx,ts,tsx}'],
+    // Files to exclude
+    exclude: [],
+    // Useful for theme customization
+    theme: {
+        extend: {}
+    },
+    // The output directory for your css system
+    outdir: 'styled-system',
+    globalCss
+})

package/template/web-app/react-vite/postcss.config.cjs

@@ -3,6 +3,7 @@ module.exports = {
         'postcss-import': {},
         'postcss-nesting': {},
         autoprefixer: {},
+        '@pandacss/dev/postcss': {},
         ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
     }
 }

package/template/web-app/react-vite/tsconfig.json

@@ -22,7 +22,7 @@
             "@/*": ["./*"]
         }
     },
-    "include": ["**/*.ts", "**/*.tsx"],
+    "include": ["**/*.ts", "**/*.tsx", "styled-system"],
     "exclude": ["scripts", "vite.config.ts"],
     "references": [
         {

package/template/web-app/react-vite/vite.config.ts

@@ -1,79 +1,63 @@
-import { defineConfig, loadEnv } from 'vite'
-import react from '@vitejs/plugin-react'
-import svgr from 'vite-plugin-svgr'
-import mockDevServer from 'vite-plugin-mock-dev-server'
-import checker from 'vite-plugin-checker'
-import { visualizer } from 'rollup-plugin-visualizer'
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
-import { createChunks } from './scripts'
-
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-    const env = loadEnv(mode, process.cwd(), '')
-    const proxyBaseUrl = env.VITE_BASE_URL + env.VITE_API_HOST
-    const plugins: any[] = [
-        vanillaExtractPlugin(),
-        svgr(),
-        mockDevServer({
-            include: ['**/*.mock.{ts,js}']
-        }),
-        checker({
-            enableBuild: false,
-            typescript: true,
-            eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
-        }),
-        react({
-            babel: {
-                plugins: [
-                    [
-                        'babel-plugin-styled-components',
-                        {
-                            ssr: false,
-                            displayName: false,
-                            fileName: false,
-                            transpileTemplateLiterals: false
-                        }
-                    ]
-                ]
-            }
-        })
-    ]
-
-    if (mode === 'analyse') {
-        plugins.push(visualizer({ open: true, sourcemap: true, brotliSize: true, gzipSize: true }))
-    }
-
-    return {
-        base: env.VITE_BASE_URL,
-        plugins,
-        resolve: {
-            alias: {
-                '@': __dirname
-            }
-        },
-        esbuild: {
-            drop: ['production', 'analyse'].includes(mode) ? ['console', 'debugger'] : []
-        },
-        build: {
-            sourcemap: mode === 'analyse',
-            reportCompressedSize: mode === 'analyse',
-            rollupOptions: {
-                output: {
-                    manualChunks: createChunks({
-                        react: ['react', 'react-dom']
-                    })
-                }
-            }
-        },
-        server: {
-            host: '0.0.0.0',
-            proxy: {
-                [proxyBaseUrl]: {
-                    target: 'http://127.0.0.1',
-                    changeOrigin: true,
-                    rewrite: path => path.replace(proxyBaseUrl, '')
-                }
-            }
-        }
-    }
-})
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr'
+import { mockDevServerPlugin } from 'vite-plugin-mock-dev-server'
+import checker from 'vite-plugin-checker'
+import { visualizer } from 'rollup-plugin-visualizer'
+import { createChunks } from './scripts'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), '')
+    const proxyBaseUrl = env.VITE_BASE_URL + env.VITE_API_HOST
+    const plugins: any[] = [
+        svgr(),
+        mockDevServerPlugin({
+            include: ['**/*.mock.{ts,js}']
+        }),
+        checker({
+            enableBuild: false,
+            typescript: true,
+            eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
+        }),
+        react()
+    ]
+
+    if (mode === 'analyse') {
+        plugins.push(visualizer({ open: true, sourcemap: true, brotliSize: true, gzipSize: true }))
+    }
+
+    return {
+        base: env.VITE_BASE_URL,
+        plugins,
+        resolve: {
+            alias: {
+                '@': __dirname
+            }
+        },
+        esbuild: {
+            drop: ['production', 'analyse'].includes(mode) ? ['console', 'debugger'] : []
+        },
+        build: {
+            sourcemap: mode === 'analyse',
+            reportCompressedSize: mode === 'analyse',
+            rollupOptions: {
+                output: {
+                    manualChunks: createChunks({
+                        react: ['react', 'react-dom']
+                    })
+                }
+            }
+        },
+        server: {
+            host: '0.0.0.0',
+            proxy: {
+                [proxyBaseUrl]: {
+                    target: 'http://127.0.0.1',
+                    changeOrigin: true,
+                    rewrite: path => path.replace(proxyBaseUrl, '')
+                }
+            }
+        }
+    }
+})

package/template/web-app/svelte/package.json

@@ -4,7 +4,7 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "prepare": "husky install",
+        "prepare": "husky",
         "dev": "cross-env MODE=development vite",
         "build": "npm run check && npm run lint && cross-env MODE=production vite build",
         "build:analyse": "npm run check && npm run lint && vite build --mode analyse",

package/template/web-app/vue/package.json

@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "prepare": "husky install",
+        "prepare": "husky",
         "dev": "vite",
         "build": "vue-tsc --noEmit && vite build",
         "build:analyse": "tsc --noEmit && vite build --mode analyse",

package/template/web-app/vue-rsbuild/package.json

@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "prepare": "husky install",
+        "prepare": "husky",
         "dev": "rsbuild dev",
         "build": "rsbuild build",
         "build:analyse": "rsbuild build --env-mode analyse",

package/template/web-extension/package.json

@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "prepare": "husky install",
+        "prepare": "husky",
         "dev": "wxt",
         "dev:firefox": "wxt -b firefox",
         "build": "wxt build",

package/template/web-app/react-rsbuild/shared/styles/index.ts

@@ -1 +0,0 @@
-export * from './theme.css'

package/template/web-app/react-rsbuild/shared/styles/theme.css.ts

@@ -1,3 +0,0 @@
-import { createTheme } from '@vanilla-extract/css'
-
-export const [themeClass, themeVars] = createTheme({})

package/template/web-app/react-vite/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npm run lint

package/template/web-app/react-vite/shared/styles/index.ts

@@ -1 +0,0 @@
-export * from './theme.css'

package/template/web-app/react-vite/shared/styles/theme.css.ts

@@ -1,3 +0,0 @@
-import { createTheme } from '@vanilla-extract/css'
-
-export const [themeClass, themeVars] = createTheme({})