create-packer 1.45.16 → 1.45.18

package/package.json

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

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

@@ -3,6 +3,5 @@
         "dbaeumer.vscode-eslint",
         "stylelint.vscode-stylelint",
         "esbenp.prettier-vscode",
-        "styled-components.vscode-styled-components"
     ]
 }

package/template/web-app/react-rsbuild/README.md

@@ -7,7 +7,7 @@
 -   Typescript
 -   react-router
 -   Zustand
--   styled-components
+-   tss-react
 -   Eslint
 -   Prettier
 -   axios

package/template/web-app/react-rsbuild/domain/app/components/app-context.tsx

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

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

@@ -1,6 +1,4 @@
 /// <reference types="@rsbuild/core/types" />
-import '@emotion/react'
-import { type themeType } from '@/shared/styles'
 
 declare global {
     interface ImportMetaEnv {
@@ -21,7 +19,3 @@ 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/package.json

@@ -1,79 +1,78 @@
-{
-    "name": "react-rsbuild",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "prepare": "husky",
-        "dev": "rsbuild dev",
-        "build": "rsbuild build",
-        "build:analyse": "rsbuild build --env-mode analyse",
-        "build:rsdoctor": "cross-env RSDOCTOR=true rsbuild build",
-        "preview": "rsbuild preview",
-        "up:rsbuild": "pnpm up @rsbuild/* -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",
-        "@eslint/js": "9.15.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",
-        "@types/react-dom": "18.3.0",
-        "autoprefixer": "10.4.14",
-        "commitizen": "4.3.0",
-        "cross-env": "7.0.3",
-        "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",
-        "postcss": "8.4.35",
-        "postcss-import": "16.0.1",
-        "postcss-nesting": "12.0.3",
-        "postcss-styled-syntax": "0.6.4",
-        "prettier": "3.2.5",
-        "stylelint": "16.10.0",
-        "stylelint-config-standard": "36.0.1",
-        "stylelint-webpack-plugin": "5.0.0",
-        "typescript": "5.8.2"
-    },
-    "config": {
-        "commitizen": {
-            "path": "@commitlint/cz-commitlint"
-        }
-    }
-}
+{
+    "name": "react-rsbuild",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "prepare": "husky",
+        "dev": "rsbuild dev",
+        "build": "rsbuild build",
+        "build:analyse": "rsbuild build --env-mode analyse",
+        "build:rsdoctor": "cross-env RSDOCTOR=true rsbuild build",
+        "preview": "rsbuild preview",
+        "up:rsbuild": "pnpm up @rsbuild/* -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",
+        "@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",
+        "tss-react": "4.9.19",
+        "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",
+        "@eslint/js": "9.15.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",
+        "@types/node": "18.16.0",
+        "@types/qs": "6.9.7",
+        "@types/react": "18.3.3",
+        "@types/react-dom": "18.3.0",
+        "autoprefixer": "10.4.14",
+        "commitizen": "4.3.0",
+        "cross-env": "7.0.3",
+        "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",
+        "postcss": "8.4.35",
+        "postcss-import": "16.0.1",
+        "postcss-nesting": "12.0.3",
+        "postcss-styled-syntax": "0.6.4",
+        "prettier": "3.2.5",
+        "stylelint": "16.10.0",
+        "stylelint-config-standard": "36.0.1",
+        "stylelint-webpack-plugin": "5.0.0",
+        "typescript": "5.8.2"
+    },
+    "config": {
+        "commitizen": {
+            "path": "@commitlint/cz-commitlint"
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+import { tss } from '@/shared/styles'
+
+export const useStyles = tss.create(({ theme }) => ({
+    root: {
+        ...theme.tools.flex('center', 'center')
+    }
+}))

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

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

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

@@ -41,13 +41,6 @@ export default defineConfig(({ envMode, command }) => {
                     new StylelintWebpackPlugin(),
                     process.env.RSDOCTOR && new RsdoctorRspackPlugin()
                 ]
-            },
-            swc: {
-                jsc: {
-                    experimental: {
-                        plugins: [['@swc/plugin-emotion', {}]]
-                    }
-                }
             }
         },
         plugins: [
@@ -59,14 +52,7 @@ export default defineConfig(({ envMode, command }) => {
                     }
                 }),
             pluginSvgr(),
-            pluginReact({
-                reactRefreshOptions: {
-                    exclude: [/\.css\.ts$/]
-                },
-                swcReactOptions: {
-                    importSource: '@emotion/react'
-                }
-            })
+            pluginReact()
         ],
         performance: {
             removeConsole: command === 'build' ? ['log'] : false,

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { createTss } from 'tss-react'
+import { theme } from './theme'
+
+export const { tss } = createTss({
+    useContext: () => ({ theme })
+})

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

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

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

@@ -3,6 +3,5 @@
         "dbaeumer.vscode-eslint",
         "stylelint.vscode-stylelint",
         "esbenp.prettier-vscode",
-        "styled-components.vscode-styled-components"
     ]
 }

package/template/web-app/react-vite/README.md

@@ -7,7 +7,7 @@
 -   Typescript
 -   react-router
 -   Zustand
--   styled-components
+-   tss-react
 -   Eslint
 -   Prettier
 -   axios

package/template/web-app/react-vite/domain/app/components/app-context.tsx

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

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

@@ -1,78 +1,77 @@
-{
-    "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"
-        }
-    }
-}
+{
+    "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",
+        "@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",
+        "tss-react": "4.9.19",
+        "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",
+        "@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.css.ts

@@ -0,0 +1,7 @@
+import { tss } from '@/shared/styles'
+
+export const useStyles = tss.create(({ theme }) => ({
+    root: {
+        ...theme.tools.flex('center', 'center')
+    }
+}))

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { createTss } from 'tss-react'
+import { theme } from './theme'
+
+export const { tss } = createTss({
+    useContext: () => ({ theme })
+})

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

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

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

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

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

@@ -20,11 +20,7 @@ export default defineConfig(({ mode }) => {
             typescript: true,
             eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
         }),
-        react({
-            babel: {
-                plugins: ['@emotion']
-            }
-        })
+        react()
     ]
 
     if (mode === 'analyse') {

package/template/web-extension/.vscode/extensions.json

@@ -3,6 +3,5 @@
         "dbaeumer.vscode-eslint",
         "stylelint.vscode-stylelint",
         "esbenp.prettier-vscode",
-        "styled-components.vscode-styled-components"
     ]
 }

package/template/web-extension/README.md

@@ -6,7 +6,7 @@
 -   React
 -   Typescript
 -   Zustand
--   Tailwindcss
+-   tss-react
 -   Eslint
 -   Prettier
 -   axios

package/template/web-extension/package.json

@@ -1,86 +1,85 @@
-{
-    "name": "web-extension",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "prepare": "husky",
-        "dev": "wxt",
-        "dev:firefox": "wxt -b firefox",
-        "build": "wxt build",
-        "build_dev": "wxt build --mode dev",
-        "build:firefox": "wxt build -b firefox",
-        "build_dev:firefox": "wxt build -b firefox --mode dev",
-        "zip": "wxt zip",
-        "zip_dev": "wxt zip --mode dev",
-        "zip:firefox": "wxt zip -b firefox",
-        "zip_dev:firefox": "wxt zip -b firefox --mode dev",
-        "postinstall": "wxt prepare",
-        "up:vite": "pnpm up vite @vitejs/* -L",
-        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json,css,scss,less}\"",
-        "lint": "tsc --noEmit && eslint **/*.{tsx,ts} && stylelint **/*.{css,scss,less,ts,tsx}",
-        "lint:fix": "eslint **/*.{tsx,ts} --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",
-        "@webext-core/messaging": "2.2.0",
-        "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",
-        "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",
-        "@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",
-        "@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.31",
-        "postcss-import": "15.1.0",
-        "postcss-nesting": "11.2.2",
-        "postcss-scss": "4.0.9",
-        "postcss-styled-syntax": "0.6.4",
-        "prettier": "3.2.5",
-        "rimraf": "5.0.1",
-        "sass": "1.63.4",
-        "stylelint": "16.10.0",
-        "stylelint-config-standard": "36.0.1",
-        "typescript": "5.8.2",
-        "typescript-eslint": "8.28.0",
-        "vite": "7.1.3",
-        "vite-plugin-svgr": "4.5.0",
-        "wxt": "0.20.5"
-    },
-    "config": {
-        "commitizen": {
-            "path": "@commitlint/cz-commitlint"
-        }
-    }
-}
+{
+    "name": "web-extension",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "prepare": "husky",
+        "dev": "wxt",
+        "dev:firefox": "wxt -b firefox",
+        "build": "wxt build",
+        "build_dev": "wxt build --mode dev",
+        "build:firefox": "wxt build -b firefox",
+        "build_dev:firefox": "wxt build -b firefox --mode dev",
+        "zip": "wxt zip",
+        "zip_dev": "wxt zip --mode dev",
+        "zip:firefox": "wxt zip -b firefox",
+        "zip_dev:firefox": "wxt zip -b firefox --mode dev",
+        "postinstall": "wxt prepare",
+        "up:vite": "pnpm up vite @vitejs/* -L",
+        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json,css,scss,less}\"",
+        "lint": "tsc --noEmit && eslint **/*.{tsx,ts} && stylelint **/*.{css,scss,less,ts,tsx}",
+        "lint:fix": "eslint **/*.{tsx,ts} --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",
+        "@tanstack/react-query": "5.51.15",
+        "@webext-core/messaging": "2.2.0",
+        "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",
+        "tss-react": "4.9.19",
+        "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",
+        "@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",
+        "@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.31",
+        "postcss-import": "15.1.0",
+        "postcss-nesting": "11.2.2",
+        "postcss-scss": "4.0.9",
+        "postcss-styled-syntax": "0.6.4",
+        "prettier": "3.2.5",
+        "rimraf": "5.0.1",
+        "sass": "1.63.4",
+        "stylelint": "16.10.0",
+        "stylelint-config-standard": "36.0.1",
+        "typescript": "5.8.2",
+        "typescript-eslint": "8.28.0",
+        "vite": "7.1.3",
+        "vite-plugin-svgr": "4.5.0",
+        "wxt": "0.20.5"
+    },
+    "config": {
+        "commitizen": {
+            "path": "@commitlint/cz-commitlint"
+        }
+    }
+}

package/template/web-extension/shared/components/app-context/view.tsx

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { createTss } from 'tss-react'
+import { theme } from './theme'
+
+export const { tss } = createTss({
+    useContext: () => ({ theme })
+})

package/template/web-extension/tsconfig.json

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

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

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

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

@@ -29,14 +29,7 @@ export default defineConfig({
     runner: { disabled: true },
     imports: { eslintrc: { enabled: 9 } },
     vite: ({ mode }) => ({
-        plugins: [
-            svgr(),
-            react({
-                babel: {
-                    plugins: ['@emotion']
-                }
-            })
-        ] as any,
+        plugins: [svgr(), react()] as any,
         resolve: {
             alias: {
                 '@': __dirname

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

@@ -1,5 +0,0 @@
-import styled from '@emotion/styled'
-
-export const StyledRoot = styled.div`
-    ${({ theme }) => theme.tools.flex('center', 'center')}
-`

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

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

package/template/web-app/react-rsbuild/shared/types/utils.ts

@@ -1,2 +0,0 @@
-import { type UseBoundStore, type StoreApi } from 'zustand'
-export type ExtractModelType<T> = T extends UseBoundStore<StoreApi<infer S>> ? S : unknown

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

@@ -1,5 +0,0 @@
-import styled from '@emotion/styled'
-
-export const StyledRoot = styled.div`
-    ${({ theme }) => theme.tools.flex('center', 'center')}
-`

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

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

package/template/web-app/react-vite/shared/types/utils.ts

@@ -1,2 +0,0 @@
-import  { type UseBoundStore, type StoreApi } from 'zustand'
-export type ExtractModelType<T> = T extends UseBoundStore<StoreApi<infer S>> ? S : unknown

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

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

package/template/web-extension/shared/types/utils.ts

@@ -1,3 +0,0 @@
-import { type UseBoundStore, type StoreApi } from 'zustand'
-
-export type ExtractModelType<T> = T extends UseBoundStore<StoreApi<infer S>> ? S : unknown