create-packer 1.45.12 → 1.45.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-packer",
-  "version": "1.45.12",
+  "version": "1.45.14",
   "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/domain/app/components/app-context.tsx

@@ -1,6 +1,8 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Global, ThemeProvider } from '@emotion/react'
 import { request } from '@/shared/service'
+import { globalCss, theme } from '@/shared/styles'
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -18,5 +20,12 @@ export interface propsType {
     children: ReactNode
 }
 export const Root: FunctionComponent<propsType> = props => {
-    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+    return (
+        <ThemeProvider theme={theme}>
+            <QueryClientProvider client={queryClient}>
+                <Global styles={globalCss} />
+                {props.children}
+            </QueryClientProvider>
+        </ThemeProvider>
+    )
 }

package/template/web-app/react-rsbuild/env.d.ts

@@ -1,14 +1,17 @@
 /// <reference types="@rsbuild/core/types" />
+import '@emotion/react'
+import { type themeType } from '@/shared/styles'
 
-interface ImportMetaEnv {
-    readonly PUBLIC_BASE_URL: string
-    readonly PUBLIC_API_HOST: string
-}
+declare global {
+    interface ImportMetaEnv {
+        readonly PUBLIC_BASE_URL: string
+        readonly PUBLIC_API_HOST: string
+    }
 
-interface ImportMeta {
-    readonly env: ImportMetaEnv
+    interface ImportMeta {
+        readonly env: ImportMetaEnv
+    }
 }
-
 declare module '*.svg' {
     const content: string
     export default content
@@ -18,3 +21,7 @@ declare module '*.svg?react' {
     const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
     export default ReactComponent
 }
+
+declare module '@emotion/react' {
+    export interface Theme extends themeType {}
+}

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

@@ -1,4 +1,3 @@
 import { startApp } from '@/domain/app'
-import './global.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": "husky",
         "dev": "rsbuild dev",
         "build": "rsbuild build",
         "build:analyse": "rsbuild build --env-mode analyse",
@@ -19,8 +19,9 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
+        "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.1",
         "@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",
@@ -44,11 +45,11 @@
         "@rsbuild/plugin-svgr": "1.2.2",
         "@rsbuild/plugin-type-check": "1.2.4",
         "@rsdoctor/rspack-plugin": "1.2.3",
+        "@swc/plugin-emotion": "11.1.0",
         "@types/node": "18.16.0",
         "@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.styled.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled'
+
+export const StyledRoot = styled.div`
+    ${({ theme }) => theme.tools.flex('center', '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 { StyledRoot } from './view.styled'
 
 export default function Home() {
     const { data } = useHomeData()
 
     console.log('data', data)
 
-    return <div className={styles.root}>sdfs</div>
+    return <StyledRoot>sdfs</StyledRoot>
 }

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,10 +38,16 @@ export default defineConfig(({ envMode, command }) => {
         tools: {
             rspack: {
                 plugins: [
-                    new VanillaExtractPlugin(),
                     new StylelintWebpackPlugin(),
                     process.env.RSDOCTOR && new RsdoctorRspackPlugin()
                 ]
+            },
+            swc: {
+                jsc: {
+                    experimental: {
+                        plugins: [['@swc/plugin-emotion', {}]]
+                    }
+                }
             }
         },
         plugins: [
@@ -57,6 +62,9 @@ export default defineConfig(({ envMode, command }) => {
             pluginReact({
                 reactRefreshOptions: {
                     exclude: [/\.css\.ts$/]
+                },
+                swcReactOptions: {
+                    importSource: '@emotion/react'
                 }
             })
         ],

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

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react'
+
+export const globalCss = css`
+    body {
+        margin: 0;
+    }
+`

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

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

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

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react'
+import { isString } from 'es-toolkit'
+import { isNumber } from 'es-toolkit/compat'
+
+export const theme = {
+    text: {
+        xs: { fontSize: '12px', lineHeight: '20px' },
+        sm: { fontSize: '14px', lineHeight: '22px' },
+        base: { fontSize: '16px', lineHeight: '24px' },
+        lg: { fontSize: '18px', lineHeight: '26px' },
+        xl: { fontSize: '20px', lineHeight: '28px' },
+        '2xl': { fontSize: '24px', lineHeight: '32px' },
+        '3xl': { fontSize: '28px', lineHeight: '40px' },
+        '4xl': { fontSize: '32px', lineHeight: '44px' }
+    } satisfies Record<string, CSSProperties>,
+    tools: {
+        ellipsis: () => ({
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }),
+        lineClamp: (n: number) => ({
+            '-webkit-line-clamp': `${n}`,
+            '-webkit-box-orient': 'vertical',
+            overflow: 'hidden',
+            display: '-webkit-box'
+        }),
+        size: (s: string) => ({ width: s, height: s }),
+        py: (s: string) => ({ paddingTop: s, paddingBottom: s }),
+        px: (s: string) => ({ paddingLeft: s, paddingRight: s }),
+        my: (s: string) => ({ marginTop: s, marginBottom: s }),
+        mx: (s: string) => ({ marginLeft: s, marginRight: s }),
+        flex: (
+            align: CSSProperties['alignItems'],
+            justify: CSSProperties['justifyContent'],
+            vertical?: boolean
+        ) => {
+            return {
+                display: 'flex',
+                alignItems: align,
+                justifyContent: justify,
+                flexDirection: vertical ? 'column' : 'row'
+            } satisfies CSSProperties
+        },
+        /** 数字为元素数量，字符串为对应css的值  */
+        grid: (
+            rows: number | CSSProperties['gridTemplateRows'],
+            cols: number | CSSProperties['gridTemplateColumns'],
+            gap?: number | string
+        ) => {
+            return {
+                display: 'grid',
+                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
+                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
+                gap: isNumber(gap) ? `${gap}px` : gap
+            } satisfies CSSProperties
+        }
+    }
+}
+export type themeType = typeof theme

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

@@ -18,6 +18,7 @@
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
         "paths": {
             "@/*": ["./*"]
         }

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/domain/app/components/app-context.tsx

@@ -1,6 +1,8 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Global, ThemeProvider } from '@emotion/react'
 import { request } from '@/shared/service'
+import { globalCss, theme } from '@/shared/styles'
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -18,5 +20,12 @@ export interface propsType {
     children: ReactNode
 }
 export const Root: FunctionComponent<propsType> = props => {
-    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+    return (
+        <ThemeProvider theme={theme}>
+            <QueryClientProvider client={queryClient}>
+                <Global styles={globalCss} />
+                {props.children}
+            </QueryClientProvider>
+        </ThemeProvider>
+    )
 }

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

@@ -16,7 +16,7 @@ export default tseslint.config([
             '**/.history/',
             '**/.vscode/',
             'vite.config.ts.*',
-            'mockUtils.ts'
+            'mockUtils.ts',
         ]
     },
     eslint.configs.recommended,

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

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

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

@@ -1,78 +1,78 @@
-{
-    "name": "react-vite",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "prepare": "husky install",
-        "dev": "vite",
-        "build": "tsc --noEmit && vite build",
-        "build:analyse": "tsc --noEmit && vite build --mode analyse",
-        "preview": "vite preview",
-        "up:vite": "pnpm up vite @vitejs/* vite-plugin-* -L",
-        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json,css,scss,less}\"",
-        "lint": "tsc --noEmit && eslint --no-error-on-unmatched-pattern && stylelint **/*.{css,scss,less,ts,tsx}",
-        "lint:fix": "eslint --fix && stylelint **/*.{css,scss,less,ts,tsx} --fix",
-        "cz": "cz",
-        "push": "npm run commit && git push",
-        "commit": "git add . && npm run cz"
-    },
-    "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",
-        "immer": "10.0.1",
-        "qs": "6.11.2",
-        "react": "18.3.1",
-        "react-dom": "18.3.1",
-        "react-router": "7.5.0",
-        "react-use": "17.5.0",
-        "type-fest": "4.33.0",
-        "zustand": "5.0.3"
-    },
-    "devDependencies": {
-        "@commitlint/cli": "17.6.1",
-        "@commitlint/config-conventional": "17.6.1",
-        "@commitlint/cz-commitlint": "17.5.0",
-        "@emotion/babel-plugin": "11.13.5",
-        "@eslint/js": "9.15.0",
-        "@faker-js/faker": "8.4.1",
-        "@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",
-        "cssnano": "6.0.0",
-        "eslint": "9.17.0",
-        "eslint-import-resolver-typescript": "3.7.0",
-        "eslint-plugin-import": "2.31.0",
-        "eslint-plugin-react": "7.37.2",
-        "eslint-plugin-react-hooks": "5.1.0",
-        "globals": "15.12.0",
-        "husky": "9.1.6",
-        "inquirer": "^8.1.2",
-        "postcss": "8.4.35",
-        "postcss-import": "16.0.1",
-        "postcss-nesting": "12.0.3",
-        "prettier": "3.2.5",
-        "rollup-plugin-visualizer": "5.12.0",
-        "stylelint": "16.10.0",
-        "stylelint-config-standard": "36.0.1",
-        "typescript": "5.8.2",
-        "typescript-eslint": "8.15.0",
-        "vite": "7.1.3",
-        "vite-plugin-checker": "0.10.2",
-        "vite-plugin-mock-dev-server": "1.9.3",
-        "vite-plugin-svgr": "4.5.0"
-    },
-    "config": {
-        "commitizen": {
-            "path": "@commitlint/cz-commitlint"
-        }
-    }
-}
+{
+    "name": "react-vite",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "prepare": "husky",
+        "dev": "vite",
+        "build": "tsc --noEmit && vite build",
+        "build:analyse": "tsc --noEmit && vite build --mode analyse",
+        "preview": "vite preview",
+        "up:vite": "pnpm up vite @vitejs/* vite-plugin-* -L",
+        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json,css,scss,less}\"",
+        "lint": "tsc --noEmit && eslint --no-error-on-unmatched-pattern && stylelint **/*.{css,scss,less,ts,tsx}",
+        "lint:fix": "eslint --fix && stylelint **/*.{css,scss,less,ts,tsx} --fix",
+        "cz": "cz",
+        "push": "npm run commit && git push",
+        "commit": "git add . && npm run cz"
+    },
+    "dependencies": {
+        "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.1",
+        "@tanstack/react-query": "5.51.15",
+        "axios": "1.7.9",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.39.8",
+        "immer": "10.0.1",
+        "qs": "6.11.2",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-router": "7.5.0",
+        "react-use": "17.5.0",
+        "type-fest": "4.33.0",
+        "zustand": "5.0.3"
+    },
+    "devDependencies": {
+        "@commitlint/cli": "17.6.1",
+        "@commitlint/config-conventional": "17.6.1",
+        "@commitlint/cz-commitlint": "17.5.0",
+        "@emotion/babel-plugin": "11.13.5",
+        "@eslint/js": "9.15.0",
+        "@faker-js/faker": "8.4.1",
+        "@types/node": "18.16.0",
+        "@types/qs": "6.9.7",
+        "@types/react": "18.3.3",
+        "@types/react-dom": "18.3.0",
+        "@vitejs/plugin-react": "5.0.1",
+        "autoprefixer": "10.4.14",
+        "commitizen": "4.3.0",
+        "cssnano": "6.0.0",
+        "eslint": "9.17.0",
+        "eslint-import-resolver-typescript": "3.7.0",
+        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-react": "7.37.2",
+        "eslint-plugin-react-hooks": "5.1.0",
+        "globals": "15.12.0",
+        "husky": "9.1.6",
+        "inquirer": "8.1.2",
+        "postcss": "8.4.35",
+        "postcss-import": "16.0.1",
+        "postcss-nesting": "12.0.3",
+        "prettier": "3.2.5",
+        "rollup-plugin-visualizer": "5.12.0",
+        "stylelint": "16.10.0",
+        "stylelint-config-standard": "36.0.1",
+        "typescript": "5.8.2",
+        "typescript-eslint": "8.15.0",
+        "vite": "7.1.3",
+        "vite-plugin-checker": "0.10.2",
+        "vite-plugin-mock-dev-server": "1.9.3",
+        "vite-plugin-svgr": "4.5.0"
+    },
+    "config": {
+        "commitizen": {
+            "path": "@commitlint/cz-commitlint"
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled'
+
+export const StyledRoot = styled.div`
+    ${({ theme }) => theme.tools.flex('center', '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'
+import { StyledRoot } from './view.styled'
 
 export default function Home() {
     const { data } = useHomeData()
 
     console.log('data', data)
 
-    return <div className={styles.root}>sdfs</div>
+    return <StyledRoot>sdfs</StyledRoot>
 }

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

@@ -1,8 +1,8 @@
-module.exports = {
-    plugins: {
-        'postcss-import': {},
-        'postcss-nesting': {},
-        autoprefixer: {},
-        ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
-    }
-}
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        'postcss-nesting': {},
+        autoprefixer: {},
+        ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
+    }
+}

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

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react'
+
+export const globalCss = css`
+    body {
+        margin: 0;
+    }
+`

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

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

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

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react'
+import { isString } from 'es-toolkit'
+import { isNumber } from 'es-toolkit/compat'
+
+export const theme = {
+    text: {
+        xs: { fontSize: '12px', lineHeight: '20px' },
+        sm: { fontSize: '14px', lineHeight: '22px' },
+        base: { fontSize: '16px', lineHeight: '24px' },
+        lg: { fontSize: '18px', lineHeight: '26px' },
+        xl: { fontSize: '20px', lineHeight: '28px' },
+        '2xl': { fontSize: '24px', lineHeight: '32px' },
+        '3xl': { fontSize: '28px', lineHeight: '40px' },
+        '4xl': { fontSize: '32px', lineHeight: '44px' }
+    } satisfies Record<string, CSSProperties>,
+    tools: {
+        ellipsis: () => ({
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }),
+        lineClamp: (n: number) => ({
+            '-webkit-line-clamp': `${n}`,
+            '-webkit-box-orient': 'vertical',
+            overflow: 'hidden',
+            display: '-webkit-box'
+        }),
+        size: (s: string) => ({ width: s, height: s }),
+        py: (s: string) => ({ paddingTop: s, paddingBottom: s }),
+        px: (s: string) => ({ paddingLeft: s, paddingRight: s }),
+        my: (s: string) => ({ marginTop: s, marginBottom: s }),
+        mx: (s: string) => ({ marginLeft: s, marginRight: s }),
+        flex: (
+            align: CSSProperties['alignItems'],
+            justify: CSSProperties['justifyContent'],
+            vertical?: boolean
+        ) => {
+            return {
+                display: 'flex',
+                alignItems: align,
+                justifyContent: justify,
+                flexDirection: vertical ? 'column' : 'row'
+            } satisfies CSSProperties
+        },
+        /** 数字为元素数量，字符串为对应css的值  */
+        grid: (
+            rows: number | CSSProperties['gridTemplateRows'],
+            cols: number | CSSProperties['gridTemplateColumns'],
+            gap?: number | string
+        ) => {
+            return {
+                display: 'grid',
+                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
+                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
+                gap: isNumber(gap) ? `${gap}px` : gap
+            } satisfies CSSProperties
+        }
+    }
+}
+export type themeType = typeof theme

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

@@ -18,6 +18,7 @@
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
         "paths": {
             "@/*": ["./*"]
         }

package/template/web-app/react-vite/vite-env.d.ts

@@ -1,12 +1,20 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+import '@emotion/react'
+import { type themeType } from '@/shared/styles'
 
-interface ImportMetaEnv {
-    readonly VITE_BASE_URL: string
-    readonly VITE_API_HOST: string
-    // 更多环境变量...
+declare global {
+    interface ImportMetaEnv {
+        readonly VITE_BASE_URL: string
+        readonly VITE_API_HOST: string
+        // 更多环境变量...
+    }
+
+    interface ImportMeta {
+        readonly env: ImportMetaEnv
+    }
 }
 
-interface ImportMeta {
-    readonly env: ImportMetaEnv
+declare module '@emotion/react' {
+    export interface Theme extends themeType {}
 }

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

@@ -4,7 +4,6 @@ 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 { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import { createChunks } from './scripts'
 
 // https://vitejs.dev/config/
@@ -12,7 +11,6 @@ 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(),
         mockDevServerPlugin({
             include: ['**/*.mock.{ts,js}']
@@ -22,7 +20,11 @@ export default defineConfig(({ mode }) => {
             typescript: true,
             eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
         }),
-        react()
+        react({
+            babel: {
+                plugins: ['@emotion']
+            }
+        })
     ]
 
     if (mode === 'analyse') {

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/entrypoints/content/domain/app/tools/insertApp.tsx

@@ -50,7 +50,9 @@ export function insertApp<T extends HTMLElement>(
         target.appendChild(result.rootEle)
     }
     const root = createRoot(result.rootEle)
-    root.render(<AppContext.Root>{option.reactNode}</AppContext.Root>)
+    root.render(
+        <AppContext.Root classNameSpace={classNameSpace}>{option.reactNode}</AppContext.Root>
+    )
     result.result = true
     return result
 }

package/template/web-extension/entrypoints/content/modules/common/common.tsx

@@ -1,5 +1,3 @@
-import '@/entrypoints/content/global.css'
-
 export default function Home() {
     return <></>
 }

package/template/web-extension/entrypoints/popup/main.tsx

@@ -2,7 +2,6 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { AppContext } from '@/shared/components'
 import Popup from './popup'
-import './global.css'
 
 createRoot(document.getElementById('root') as HTMLElement).render(
     <StrictMode>

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",
@@ -25,8 +25,9 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
+        "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.1",
         "@tanstack/react-query": "5.51.15",
-        "@vanilla-extract/css": "1.17.4",
         "@webext-core/messaging": "2.2.0",
         "axios": "1.7.9",
         "define-zustand": "3.4.0",
@@ -42,13 +43,13 @@
         "@commitlint/cli": "17.6.1",
         "@commitlint/config-conventional": "17.6.1",
         "@commitlint/cz-commitlint": "17.5.0",
+        "@emotion/babel-plugin": "11.13.5",
         "@eslint/js": "9.15.0",
         "@types/chrome": "0.0.254",
         "@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-extension/shared/components/app-context/view.tsx

@@ -1,10 +1,19 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Global, ThemeProvider } from '@emotion/react'
+import { createGlobalCss, theme } from '@/shared/styles'
 
 const queryClient = new QueryClient()
 
-const AppContext: FunctionComponent<{ children: ReactNode }> = props => {
-    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+const AppContext: FunctionComponent<{ children: ReactNode; classNameSpace?: string }> = props => {
+    return (
+        <ThemeProvider theme={theme}>
+            <QueryClientProvider client={queryClient}>
+                <Global styles={createGlobalCss(props.classNameSpace)} />
+                {props.children}
+            </QueryClientProvider>
+        </ThemeProvider>
+    )
 }
 
 export default AppContext

package/template/web-extension/shared/styles/global.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react'
+
+export const createGlobalCss = (nameSpace?: string) => {
+    return css`
+        ${nameSpace ? `.${nameSpace} ` : 'body'} {
+            margin: 0;
+        }
+    `
+}

package/template/web-extension/shared/styles/index.ts

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

package/template/web-extension/shared/styles/theme.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react'
+import { isString } from 'es-toolkit'
+import { isNumber } from 'es-toolkit/compat'
+
+export const theme = {
+    text: {
+        xs: { fontSize: '12px', lineHeight: '20px' },
+        sm: { fontSize: '14px', lineHeight: '22px' },
+        base: { fontSize: '16px', lineHeight: '24px' },
+        lg: { fontSize: '18px', lineHeight: '26px' },
+        xl: { fontSize: '20px', lineHeight: '28px' },
+        '2xl': { fontSize: '24px', lineHeight: '32px' },
+        '3xl': { fontSize: '28px', lineHeight: '40px' },
+        '4xl': { fontSize: '32px', lineHeight: '44px' }
+    } satisfies Record<string, CSSProperties>,
+    tools: {
+        ellipsis: () => ({
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }),
+        lineClamp: (n: number) => ({
+            '-webkit-line-clamp': `${n}`,
+            '-webkit-box-orient': 'vertical',
+            overflow: 'hidden',
+            display: '-webkit-box'
+        }),
+        size: (s: string) => ({ width: s, height: s }),
+        py: (s: string) => ({ paddingTop: s, paddingBottom: s }),
+        px: (s: string) => ({ paddingLeft: s, paddingRight: s }),
+        my: (s: string) => ({ marginTop: s, marginBottom: s }),
+        mx: (s: string) => ({ marginLeft: s, marginRight: s }),
+        flex: (
+            align: CSSProperties['alignItems'],
+            justify: CSSProperties['justifyContent'],
+            vertical?: boolean
+        ) => {
+            return {
+                display: 'flex',
+                alignItems: align,
+                justifyContent: justify,
+                flexDirection: vertical ? 'column' : 'row'
+            } satisfies CSSProperties
+        },
+        /** 数字为元素数量，字符串为对应css的值  */
+        grid: (
+            rows: number | CSSProperties['gridTemplateRows'],
+            cols: number | CSSProperties['gridTemplateColumns'],
+            gap?: number | string
+        ) => {
+            return {
+                display: 'grid',
+                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
+                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
+                gap: isNumber(gap) ? `${gap}px` : gap
+            } satisfies CSSProperties
+        }
+    }
+}
+export type themeType = typeof theme

package/template/web-extension/tsconfig.json

@@ -18,6 +18,7 @@
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
         "paths": {
             "@/*": ["./*"]
         }

package/template/web-extension/vite-env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="vite/client" />
 /// <reference types="./.wxt/wxt.d.ts" />
+import '@emotion/react'
+import { type themeType } from '@/shared/styles'
 
 declare global {
     interface ImportMetaEnv {
@@ -12,3 +14,7 @@ declare global {
         readonly env: ImportMetaEnv
     }
 }
+
+declare module '@emotion/react' {
+    export interface Theme extends themeType {}
+}

package/template/web-extension/wxt.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig, UserManifestFn } from 'wxt'
 import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr'
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import pkgJson from './package.json'
 
 const manifest: UserManifestFn = () => {
@@ -30,7 +29,14 @@ export default defineConfig({
     runner: { disabled: true },
     imports: { eslintrc: { enabled: 9 } },
     vite: ({ mode }) => ({
-        plugins: [vanillaExtractPlugin(), svgr(), react()] as any,
+        plugins: [
+            svgr(),
+            react({
+                babel: {
+                    plugins: ['@emotion']
+                }
+            })
+        ] as any,
         resolve: {
             alias: {
                 '@': __dirname

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

@@ -1,5 +0,0 @@
-import { globalStyle } from '@vanilla-extract/css'
-
-globalStyle('body', {
-    margin: 0
-})

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

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

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/global.css.ts

@@ -1,5 +0,0 @@
-import { globalStyle } from '@vanilla-extract/css'
-
-globalStyle('body', {
-    margin: 0
-})

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

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

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({})

package/template/web-extension/entrypoints/content/global.css.ts

@@ -1,5 +0,0 @@
-import { globalStyle } from '@vanilla-extract/css'
-import { createGlobalStyle } from '@/shared/styles'
-import { classNameSpace } from './constants'
-
-globalStyle(classNameSpace, createGlobalStyle())

package/template/web-extension/entrypoints/popup/global.css.ts

@@ -1,4 +0,0 @@
-import { globalStyle } from '@vanilla-extract/css'
-import { createGlobalStyle } from '@/shared/styles'
-
-globalStyle('body', createGlobalStyle())

package/template/web-extension/shared/styles/global.css.ts

@@ -1,7 +0,0 @@
-import { GlobalStyleRule } from '@vanilla-extract/css'
-
-export function createGlobalStyle(): GlobalStyleRule {
-    return {
-        margin: 0
-    }
-}

package/template/web-extension/shared/styles/theme.css.ts

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