create-packer 1.45.18 → 1.45.20

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

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

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

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

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

@@ -1,3 +1,2 @@
 export * from './global'
-export * from './tss'
 export * from './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,21 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
 
-interface ImportMetaEnv {
-    readonly VITE_BASE_URL: string
-    readonly VITE_API_HOST: string
-    // 更多环境变量...
+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 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,9 @@ 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/vue-rsbuild/package.json

@@ -1,73 +1,73 @@
-{
-    "name": "vue-vite",
-    "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 \"**/*.{vue,ts,js,tsx,jsx,json,css,scss,less}\"",
-        "lint": "vue-tsc --noEmit && eslint --no-error-on-unmatched-pattern && stylelint **/*.{css,scss,less}",
-        "lint:fix": "eslint --fix && stylelint **/*.{css,scss,less} --fix",
-        "cz": "cz",
-        "push": "npm run commit && git push",
-        "commit": "git add . && npm run cz",
-        "up:vite": "pnpm up vite @vitejs/* vite-plugin-* -L"
-    },
-    "dependencies": {
-        "axios": "1.7.9",
-        "es-toolkit": "1.39.8",
-        "pinia": "3.0.3",
-        "tailwindcss": "4.1.4",
-        "type-fest": "4.33.0",
-        "vue": "3.5.20",
-        "vue-router": "4.5.1"
-    },
-    "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",
-        "@rsbuild/core": "1.5.2",
-        "@rsbuild/plugin-eslint": "1.1.2",
-        "@rsbuild/plugin-type-check": "1.2.4",
-        "@rsbuild/plugin-vue": "1.1.2",
-        "@rsdoctor/rspack-plugin": "1.2.3",
-        "@tailwindcss/postcss": "4.1.4",
-        "@types/mockjs": "1.0.10",
-        "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-vue": "9.32.0",
-        "globals": "15.12.0",
-        "husky": "9.1.6",
-        "inquirer": "8.1.2",
-        "postcss": "8.4.38",
-        "postcss-html": "1.8.0",
-        "postcss-import": "16.1.0",
-        "postcss-nesting": "12.1.1",
-        "prettier": "3.2.5",
-        "rollup-plugin-visualizer": "5.12.0",
-        "stylelint": "16.10.0",
-        "stylelint-config-standard-scss": "13.1.0",
-        "stylelint-webpack-plugin": "5.0.0",
-        "typescript": "5.8.2",
-        "typescript-eslint": "8.15.0",
-        "vue-tsc": "3.0.6"
-    },
-    "config": {
-        "commitizen": {
-            "path": "@commitlint/cz-commitlint"
-        }
-    }
-}
+{
+    "name": "vue-vite",
+    "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 \"**/*.{vue,ts,js,tsx,jsx,json,css,scss,less}\"",
+        "lint": "vue-tsc --noEmit && eslint --no-error-on-unmatched-pattern && stylelint **/*.{css,scss,less}",
+        "lint:fix": "eslint --fix && stylelint **/*.{css,scss,less} --fix",
+        "cz": "cz",
+        "push": "npm run commit && git push",
+        "commit": "git add . && npm run cz",
+        "up:vite": "pnpm up vite @vitejs/* vite-plugin-* -L"
+    },
+    "dependencies": {
+        "axios": "1.7.9",
+        "es-toolkit": "1.39.8",
+        "pinia": "3.0.3",
+        "tailwindcss": "4.1.4",
+        "type-fest": "4.33.0",
+        "vue": "3.5.20",
+        "vue-router": "4.5.1"
+    },
+    "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",
+        "@rsbuild/core": "1.5.10",
+        "@rsbuild/plugin-eslint": "1.1.2",
+        "@rsbuild/plugin-type-check": "1.2.4",
+        "@rsbuild/plugin-vue": "1.1.2",
+        "@rsdoctor/rspack-plugin": "1.2.3",
+        "@tailwindcss/postcss": "4.1.4",
+        "@types/mockjs": "1.0.10",
+        "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-vue": "9.32.0",
+        "globals": "15.12.0",
+        "husky": "9.1.6",
+        "inquirer": "8.1.2",
+        "postcss": "8.4.38",
+        "postcss-html": "1.8.0",
+        "postcss-import": "16.1.0",
+        "postcss-nesting": "12.1.1",
+        "prettier": "3.2.5",
+        "rollup-plugin-visualizer": "5.12.0",
+        "stylelint": "16.10.0",
+        "stylelint-config-standard-scss": "13.1.0",
+        "stylelint-webpack-plugin": "5.0.0",
+        "typescript": "5.8.2",
+        "typescript-eslint": "8.15.0",
+        "vue-tsc": "3.0.6"
+    },
+    "config": {
+        "commitizen": {
+            "path": "@commitlint/cz-commitlint"
+        }
+    }
+}

package/template/web-extension/eslint.config.js

@@ -96,7 +96,6 @@ export default tseslint.config([
             '@typescript-eslint/ban-ts-comment': 'off',
             '@typescript-eslint/no-empty-interface': 'off',
             '@typescript-eslint/triple-slash-reference': 'off',
-            '@typescript-eslint/triple-slash-reference': 'off',
             'react/prop-types': 'off',
             'react/no-find-dom-node': 'off',
             'react-hooks/exhaustive-deps': 'off',

package/template/web-extension/package.json

@@ -26,6 +26,7 @@
     },
     "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",
@@ -35,7 +36,6 @@
         "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"
     },
@@ -43,6 +43,7 @@
         "@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",

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

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

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

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

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

@@ -1,3 +1,2 @@
 export * from './global'
-export * from './tss'
 export * from './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,12 +1,21 @@
 /// <reference types="vite/client" />
 /// <reference types="./.wxt/wxt.d.ts" />
 
-interface ImportMetaEnv {
-    readonly VITE_API_HOST: string
-    readonly VITE_APP_ID: string
-    // 更多环境变量...
+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 ImportMeta {
-    readonly env: ImportMetaEnv
+declare module '@emotion/react' {
+    export interface Theme extends themeType {}
 }

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

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

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

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

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

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

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

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

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

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

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

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