create-packer 1.44.0 → 1.44.1

package/package.json

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

package/template/web-extension/package.json

@@ -34,6 +34,7 @@
         "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"
     },
@@ -41,7 +42,6 @@
         "@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/lodash-es": "4.17.12",

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

@@ -1,5 +1,5 @@
 import { FunctionComponent, ReactNode } from 'react'
-import { ThemeProvider } from '@emotion/react'
+import { ThemeProvider } from 'styled-components'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { theme } from '@/shared/styles'
 

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

@@ -0,0 +1,9 @@
+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,5 +1,4 @@
 import { CSSProperties } from 'react'
-
 import { isString } from 'lodash-es'
 
 export const theme = {
@@ -9,12 +8,14 @@ export const theme = {
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap'
         }),
-        lineClamp: (n: number) => ({
-            '-webkit-line-clamp': `${n}`,
-            '-webkit-box-orient': 'vertical',
-            overflow: 'hidden',
-            display: '-webkit-box'
-        }),
+        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 }),
@@ -33,24 +34,14 @@ export const theme = {
             } satisfies CSSProperties
         },
         /** 数字为元素数量，字符串为对应css的值  */
-        grid: {
-            grid: (rows: number | string, cols: number | string, gap?: number) => ({
+        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
-            }),
-            rows: (rows: number | string, gap?: number) => ({
-                display: 'grid',
-                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
-                rowGap: gap ? `${gap}px` : void 0
-            }),
-            cols: (cols: number | string, gap?: number) => ({
-                display: 'grid',
-                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
-                columnGap: gap ? `${gap}px` : void 0
-            })
-        } satisfies Record<string, (...args: any) => CSSProperties>
+            } satisfies CSSProperties
+        }
     }
 }
 export type themeType = typeof theme

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

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 /// <reference types="./.wxt/wxt.d.ts" />
 
-import '@emotion/react'
+import 'styled-components'
 import { themeType } from './shared/styles'
 
 declare global {
@@ -16,6 +16,6 @@ declare global {
     }
 }
 
-declare module '@emotion/react' {
-    export interface Theme extends themeType {}
+declare module 'styled-components' {
+    export interface DefaultTheme extends themeType {}
 }

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

@@ -33,7 +33,17 @@ export default defineConfig({
             svgr(),
             react({
                 babel: {
-                    plugins: ['@emotion']
+                    plugins: [
+                        [
+                            'babel-plugin-styled-components',
+                            {
+                                ssr: false,
+                                displayName: false,
+                                fileName: false,
+                                transpileTemplateLiterals: false
+                            }
+                        ]
+                    ]
                 }
             })
         ] as any,

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

@@ -1,14 +0,0 @@
-import { FunctionComponent } from 'react'
-import { css, Global } from '@emotion/react'
-
-export const GlobalStyle: FunctionComponent<{ nameSpace?: string }> = props => {
-    return (
-        <Global
-            styles={css`
-                ${props.nameSpace ? '.' + props.nameSpace : 'body'} {
-                    margin: 0;
-                }
-            `}
-        />
-    )
-}