create-packer 1.47.2 → 1.48.0

package/package.json

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

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

@@ -1,79 +1,79 @@
-{
-    "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",
-        "up:tailwind": "pnpm up tailwindcss @tailwindcss/* -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",
-        "axios": "1.7.9",
-        "define-zustand": "3.4.0",
-        "es-toolkit": "1.43.0",
-        "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",
-        "tailwindcss": "4.1.4",
-        "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.6.15",
-        "@rsbuild/plugin-eslint": "1.2.0",
-        "@rsbuild/plugin-react": "1.4.2",
-        "@rsbuild/plugin-svgr": "1.2.3",
-        "@rsbuild/plugin-type-check": "1.3.2",
-        "@rsdoctor/rspack-plugin": "1.4.0",
-        "@tailwindcss/postcss": "4.1.4",
-        "@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",
+        "up:tailwind": "pnpm up tailwindcss @tailwindcss/* -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",
+        "axios": "1.7.9",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.43.0",
+        "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",
+        "tailwindcss": "4.1.4",
+        "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.6.15",
+        "@rsbuild/plugin-eslint": "1.2.0",
+        "@rsbuild/plugin-react": "1.4.2",
+        "@rsbuild/plugin-svgr": "1.2.3",
+        "@rsbuild/plugin-type-check": "1.3.2",
+        "@rsdoctor/rspack-plugin": "1.4.0",
+        "@tailwindcss/postcss": "4.1.4",
+        "@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-extension/entrypoints/content/domain/app/tools/insertApp.tsx

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

package/template/web-extension/entrypoints/content/index.tsx

@@ -1,6 +1,5 @@
 import { CONTENT_MATCHES, contentMessage } from '@/shared/content'
 import { Common } from './modules'
-import '@/shared/styles/theme.css'
 
 export default defineContentScript({
     runAt: 'document_idle',

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

@@ -1,3 +1,9 @@
+import { GlobalStyle } from './view.styled'
+
 export default function Home() {
-    return <></>
+    return (
+        <>
+            <GlobalStyle />
+        </>
+    )
 }

package/template/web-extension/entrypoints/content/modules/common/view.styled.ts

@@ -0,0 +1,10 @@
+import { createGlobalStyle, css } from 'styled-components'
+import { classNameSpace } from '@/entrypoints/content/constants'
+
+export const GlobalStyle = createGlobalStyle(() => {
+    return css`
+        .${classNameSpace} {
+            color: initial;
+        }
+    `
+})

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 '@/shared/styles/theme.css'
 
 createRoot(document.getElementById('root') as HTMLElement).render(
     <StrictMode>

package/template/web-extension/entrypoints/popup/popup.styled.ts

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

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

@@ -1,3 +1,5 @@
+import { StyledRoot } from './popup.styled'
+
 export default function Home() {
-    return <div className="tw:flex">home</div>
+    return <StyledRoot>home</StyledRoot>
 }

package/template/web-extension/package.json

@@ -34,7 +34,7 @@
         "qs": "6.11.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "tailwindcss": "4.1.4",
+        "styled-components": "6.2.0",
         "type-fest": "4.33.0",
         "zustand": "5.0.3"
     },
@@ -43,7 +43,6 @@
         "@commitlint/config-conventional": "17.6.1",
         "@commitlint/cz-commitlint": "17.5.0",
         "@eslint/js": "9.15.0",
-        "@tailwindcss/vite": "4.1.18",
         "@types/chrome": "0.0.254",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
@@ -51,6 +50,7 @@
         "@types/react-dom": "18.3.0",
         "@vitejs/plugin-react": "5.1.2",
         "autoprefixer": "10.4.14",
+        "babel-plugin-styled-components": "2.1.4",
         "commitizen": "4.3.0",
         "cssnano": "6.0.0",
         "eslint": "9.17.0",

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

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

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

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react'
+import { isString } from 'es-toolkit'
+import { isNumber } from 'es-toolkit/compat'
+
+export function createTheme() {
+    return {
+        tools: {
+            ellipsis: () => ({
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+            }),
+            lineClamp: (n: number) => {
+                return {
+                    WebkitLineClamp: `${n}`,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    display: '-webkit-box',
+                    wordBreak: 'break-all'
+                } satisfies CSSProperties
+            },
+            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 = ReturnType<typeof createTheme>

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_BASE_URL: string
-    readonly VITE_API_HOST: string
-    // 更多环境变量...
+import 'styled-components'
+import { type themeType } from './shared/styles/theme'
+
+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 'styled-components' {
+    export interface DefaultTheme 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 tailwindcss from '@tailwindcss/vite'
 import pkgJson from './package.json'
 
 const manifest: UserManifestFn = () => {
@@ -30,7 +29,24 @@ export default defineConfig({
     runner: { disabled: true },
     imports: { eslintrc: { enabled: 9 } },
     vite: ({ mode }) => ({
-        plugins: [tailwindcss(), svgr(), react()] as any,
+        plugins: [
+            svgr(),
+            react({
+                babel: {
+                    plugins: [
+                        [
+                            'babel-plugin-styled-components',
+                            {
+                                ssr: false,
+                                displayName: false,
+                                fileName: false,
+                                transpileTemplateLiterals: false
+                            }
+                        ]
+                    ]
+                }
+            })
+        ] as any,
         resolve: {
             alias: {
                 '@': __dirname

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

@@ -1,4 +0,0 @@
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" prefix(tw) layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-