create-packer 1.45.8 → 1.45.9

package/package.json

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

package/template/lib/workspace/tsconfig.node.json

@@ -8,7 +8,7 @@
         "strictNullChecks": true,
         "target": "ESNext",
         "noImplicitAny": false,
-        "moduleResolution": "bundler",
+        "moduleResolution": "node",
         "sourceMap": false,
         "declaration": true,
         "outDir": "lib",

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

@@ -1 +1 @@
-export * as theme from './theme.css'
+export * from './theme.css'

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

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

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

@@ -1 +1 @@
-export * as theme from './theme.css'
+export * from './theme.css'

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

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

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

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

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

@@ -1,10 +1,5 @@
-import { GlobalStyle } from '@/shared/styles'
-import { classNameSpace } from '@/entrypoints/content/constants'
+import '@/entrypoints/content/global.css'
 
 export default function Home() {
-    return (
-        <>
-            <GlobalStyle nameSpace={classNameSpace} />
-        </>
-    )
+    return <></>
 }

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

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

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

@@ -1,13 +1,12 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { AppContext } from '@/shared/components'
-import { GlobalStyle } from '@/shared/styles'
 import Popup from './popup'
+import './global.css'
 
 createRoot(document.getElementById('root') as HTMLElement).render(
     <StrictMode>
         <AppContext.Root>
-            <GlobalStyle />
             <Popup />
         </AppContext.Root>
     </StrictMode>

package/template/web-extension/package.json

@@ -26,6 +26,7 @@
     },
     "dependencies": {
         "@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",
@@ -34,7 +35,6 @@
         "qs": "6.11.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "styled-components": "^6.1.17",
         "type-fest": "4.33.0",
         "zustand": "5.0.3"
     },
@@ -48,9 +48,9 @@
         "@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": "4.3.4",
         "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,16 +1,10 @@
 import { FunctionComponent, ReactNode } from 'react'
-import { ThemeProvider } from 'styled-components'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { theme } from '@/shared/styles'
 
 const queryClient = new QueryClient()
 
 const AppContext: FunctionComponent<{ children: ReactNode }> = props => {
-    return (
-        <QueryClientProvider client={queryClient}>
-            <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
-        </QueryClientProvider>
-    )
+    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
 }
 
 export default AppContext

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

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

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

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

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

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

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

@@ -1,9 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="./.wxt/wxt.d.ts" />
 
-import 'styled-components'
-import { themeType } from './shared/styles'
-
 declare global {
     interface ImportMetaEnv {
         readonly VITE_API_HOST: string
@@ -15,7 +12,3 @@ declare global {
         readonly env: ImportMetaEnv
     }
 }
-
-declare module 'styled-components' {
-    export interface DefaultTheme extends themeType {}
-}

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

@@ -1,6 +1,7 @@
 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 = () => {
@@ -29,24 +30,7 @@ export default defineConfig({
     runner: { disabled: true },
     imports: { eslintrc: { enabled: 9 } },
     vite: ({ mode }) => ({
-        plugins: [
-            svgr(),
-            react({
-                babel: {
-                    plugins: [
-                        [
-                            'babel-plugin-styled-components',
-                            {
-                                ssr: false,
-                                displayName: false,
-                                fileName: false,
-                                transpileTemplateLiterals: false
-                            }
-                        ]
-                    ]
-                }
-            })
-        ] as any,
+        plugins: [vanillaExtractPlugin(), svgr(), react()] as any,
         resolve: {
             alias: {
                 '@': __dirname

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

@@ -1,9 +0,0 @@
-import { createGlobalStyle, css } from 'styled-components'
-
-export const GlobalStyle = createGlobalStyle<{ nameSpace?: string }>(props => {
-    return css`
-        .${props.nameSpace || 'body'} {
-            margin: 0;
-        }
-    `
-})

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

@@ -1,47 +0,0 @@
-import { CSSProperties } from 'react'
-import { isString } from 'es-toolkit'
-
-export const theme = {
-    tools: {
-        ellipsis: () => ({
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-        }),
-        lineClamp: (n: number) => {
-            return {
-                WebkitLineClamp: `${n}`,
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-                display: '-webkit-box'
-            } 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 | string, cols: number | string, gap?: number) => {
-            return {
-                display: 'grid',
-                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
-                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
-                gap: gap ? `${gap}px` : void 0
-            } satisfies CSSProperties
-        }
-    }
-}
-export type themeType = typeof theme