create-packer 1.45.13 → 1.45.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-packer",
-  "version": "1.45.13",
+  "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/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/eslint.config.js

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

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

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

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

@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "prepare": "panda codegen && husky",
+        "prepare": "husky",
         "dev": "rsbuild dev",
         "build": "rsbuild build",
         "build:analyse": "rsbuild build --env-mode analyse",
@@ -19,6 +19,8 @@
         "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",
@@ -37,13 +39,13 @@
         "@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",
         "@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",

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 { rootCss } from './view.css'
+import { StyledRoot } from './view.styled'
 
 export default function Home() {
     const { data } = useHomeData()
 
     console.log('data', data)
 
-    return <div className={rootCss}>sdfs</div>
+    return <StyledRoot>sdfs</StyledRoot>
 }

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

@@ -3,7 +3,6 @@ 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

@@ -41,6 +41,13 @@ export default defineConfig(({ envMode, command }) => {
                     new StylelintWebpackPlugin(),
                     process.env.RSDOCTOR && new RsdoctorRspackPlugin()
                 ]
+            },
+            swc: {
+                jsc: {
+                    experimental: {
+                        plugins: [['@swc/plugin-emotion', {}]]
+                    }
+                }
             }
         },
         plugins: [
@@ -55,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

@@ -0,0 +1,2 @@
+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,11 +18,12 @@
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
         "paths": {
             "@/*": ["./*"]
         }
     },
-    "include": ["**/*.ts", "**/*.tsx", "styled-system"],
+    "include": ["**/*.ts", "**/*.tsx"],
     "exclude": ["scripts", "rsbuild.config.ts"],
     "references": [
         {

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

@@ -15,7 +15,6 @@ export default tseslint.config([
             '**/dist/',
             '**/.history/',
             '**/.vscode/',
-            '**/styled-system/',
             'vite.config.ts.*',
             'mockUtils.ts',
         ]

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

@@ -1,4 +1,3 @@
 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": "panda codegen && husky",
+        "prepare": "husky",
         "dev": "vite",
         "build": "tsc --noEmit && vite build",
         "build:analyse": "tsc --noEmit && vite build --mode analyse",
@@ -18,6 +18,8 @@
         "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",
@@ -38,7 +40,6 @@
         "@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",
@@ -54,7 +55,7 @@
         "eslint-plugin-react-hooks": "5.1.0",
         "globals": "15.12.0",
         "husky": "9.1.6",
-        "inquirer": "^8.1.2",
+        "inquirer": "8.1.2",
         "postcss": "8.4.35",
         "postcss-import": "16.0.1",
         "postcss-nesting": "12.0.3",

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 { rootCss } from './view.css'
+import { StyledRoot } from './view.styled'
 
 export default function Home() {
     const { data } = useHomeData()
 
     console.log('data', data)
 
-    return <div className={rootCss}>sdfs</div>
+    return <StyledRoot>sdfs</StyledRoot>
 }

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

@@ -3,7 +3,6 @@ module.exports = {
         'postcss-import': {},
         'postcss-nesting': {},
         autoprefixer: {},
-        '@pandacss/dev/postcss': {},
         ...(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

@@ -0,0 +1,2 @@
+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,11 +18,12 @@
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
         "paths": {
             "@/*": ["./*"]
         }
     },
-    "include": ["**/*.ts", "**/*.tsx", "styled-system"],
+    "include": ["**/*.ts", "**/*.tsx"],
     "exclude": ["scripts", "vite.config.ts"],
     "references": [
         {

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

@@ -20,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-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

@@ -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 { defineGlobalStyles } from '@pandacss/dev'
-
-export const globalCss = defineGlobalStyles({
-    'html, body': {}
-})

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

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

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

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

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

@@ -1,18 +0,0 @@
-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/global.css.ts

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

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

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

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

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

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

@@ -1,18 +0,0 @@
-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-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({})