create-packer 1.43.14 → 1.44.0

package/package.json

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

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

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

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

@@ -2,7 +2,6 @@ import { useLayoutEffect, Suspense } from 'react'
 import { RouterProvider } from 'react-router/dom'
 import { request } from '@/shared/service'
 import { routerInstance } from '@/domain/router'
-import { GlobalStyle } from '@/shared/styles'
 import * as AppContext from './app-context'
 
 export const Root = () => {
@@ -17,7 +16,6 @@ export const Root = () => {
 
     return (
         <AppContext.Root>
-            <GlobalStyle />
             <Suspense fallback={<>loading...</>}>
                 <RouterProvider router={routerInstance} />
             </Suspense>

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

@@ -1,32 +1,21 @@
 /// <reference types="@rsbuild/core/types" />
-import '@emotion/react'
-import { themeType } from './shared/styles'
 
-declare module 'styled-components' {
-    export interface DefaultTheme extends themeType {}
+interface ImportMetaEnv {
+    readonly PUBLIC_BASE_URL: string
+    readonly PUBLIC_API_HOST: string
+    readonly PUBLIC_ENV_MODE: 'production' | 'development'
 }
-declare global {
-    interface ImportMetaEnv {
-        readonly PUBLIC_BASE_URL: string
-        readonly PUBLIC_API_HOST: string
-        readonly PUBLIC_ENV_MODE: 'production' | 'development'
-    }
 
-    interface ImportMeta {
-        readonly env: ImportMetaEnv
-    }
-
-    declare module '*.svg' {
-        const content: string
-        export default content
-    }
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
 
-    declare module '*.svg?react' {
-        const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
-        export default ReactComponent
-    }
+declare module '*.svg' {
+    const content: string
+    export default content
 }
 
-declare module '@emotion/react' {
-    export interface Theme extends themeType {}
+declare module '*.svg?react' {
+    const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
+    export default ReactComponent
 }

package/template/web-app/react-rsbuild/main.css

@@ -0,0 +1,7 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" prefix(tw) layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+body {
+    margin: 0;
+}

package/template/web-app/react-rsbuild/main.tsx

@@ -1,3 +1,4 @@
 import { startApp } from '@/domain/app'
+import './main.css'
 
 startApp()

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

@@ -19,8 +19,6 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
-        "@emotion/react": "11.14.0",
-        "@emotion/styled": "11.14.0",
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
         "define-zustand": "3.2.1",
@@ -31,6 +29,7 @@
         "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"
     },
@@ -45,7 +44,7 @@
         "@rsbuild/plugin-svgr": "1.0.7",
         "@rsbuild/plugin-type-check": "1.2.1",
         "@rsdoctor/rspack-plugin": "0.4.13",
-        "@swc/plugin-emotion": "9.0.3",
+        "@tailwindcss/postcss": "4.1.4",
         "@types/lodash-es": "4.17.12",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
@@ -65,7 +64,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",

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

@@ -1,10 +1,9 @@
 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>
+    return <div className="tw:flex tw:items-center tw:justify-center">sdfs</div>
 }

package/template/web-app/react-rsbuild/postcss.config.cjs

@@ -2,6 +2,7 @@ module.exports = {
     plugins: {
         'postcss-import': {},
         autoprefixer: {},
+        "@tailwindcss/postcss": {},
         ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
     }
 }

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,11 +52,7 @@ export default defineConfig(({ envMode, command }) => {
                     }
                 }),
             pluginSvgr(),
-            pluginReact({
-                swcReactOptions: {
-                    importSource: '@emotion/react'
-                }
-            })
+            pluginReact()
         ],
         performance: {
             removeConsole: command === 'build' ? ['log'] : false,

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

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

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

@@ -2,7 +2,6 @@ import { useLayoutEffect, Suspense } from 'react'
 import { RouterProvider } from 'react-router/dom'
 import { request } from '@/shared/service'
 import { routerInstance } from '@/domain/router'
-import { GlobalStyle } from '@/shared/styles'
 import * as AppContext from './app-context'
 
 export const Root = () => {
@@ -17,7 +16,6 @@ export const Root = () => {
 
     return (
         <AppContext.Root>
-            <GlobalStyle />
             <Suspense fallback={<>loading...</>}>
                 <RouterProvider router={routerInstance} />
             </Suspense>

package/template/web-app/react-vite/main.css

@@ -0,0 +1,7 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" prefix(tw) layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+body {
+    margin: 0;
+}

package/template/web-app/react-vite/main.tsx

@@ -1,3 +1,4 @@
 import { startApp } from '@/domain/app'
+import './main.css'
 
 startApp()

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

@@ -18,8 +18,6 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
-        "@emotion/react": "11.14.0",
-        "@emotion/styled": "11.14.0",
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
         "define-zustand": "3.2.1",
@@ -30,6 +28,7 @@
         "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"
     },
@@ -40,6 +39,7 @@
         "@emotion/babel-plugin": "11.13.5",
         "@eslint/js": "9.15.0",
         "@faker-js/faker": "8.4.1",
+        "@tailwindcss/vite": "4.1.4",
         "@types/lodash-es": "4.17.12",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
@@ -47,7 +47,6 @@
         "@types/react-dom": "18.3.0",
         "@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",
@@ -61,7 +60,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",
         "rollup-plugin-visualizer": "5.12.0",
         "stylelint": "16.10.0",

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

@@ -1,10 +1,9 @@
-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'
+
+export default function Home() {
+    const { data } = useHomeData()
+
+    console.log('data', data)
+
+    return <div className="tw:flex tw:items-center tw:justify-center">sdfs</div>
+}

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

@@ -1,21 +1,12 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
 
-import '@emotion/react'
-import { 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

@@ -5,6 +5,7 @@ import mockDevServer from 'vite-plugin-mock-dev-server'
 import checker from 'vite-plugin-checker'
 import { visualizer } from 'rollup-plugin-visualizer'
 import { includes } from 'lodash-es'
+import tailwindcss from '@tailwindcss/vite'
 import { createChunks } from './scripts'
 
 // https://vitejs.dev/config/
@@ -12,6 +13,7 @@ export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd(), '')
     const proxyBaseUrl = env.VITE_BASE_URL + env.VITE_API_HOST
     const plugins: any[] = [
+        tailwindcss(),
         svgr(),
         mockDevServer({
             include: ['**/*.mock.{ts,js}']

package/template/web-app/vue/{style.css → main.css}

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

package/template/web-app/vue/main.ts

@@ -1,6 +1,6 @@
 import { createPinia } from 'pinia'
 import { router } from '@/domain/router'
 import { app } from '@/domain/app'
-import './style.css'
+import './main.css'
 
 app.use(createPinia()).use(router).mount('#app')

package/template/web-app/vue/pages/home/view.vue

@@ -11,6 +11,6 @@ console.log('data', data)
 
 <style scoped>
 .root {
-    @apply flex items-center justify-center;
+    @apply tw:flex tw:items-center tw:justify-center;
 }
 </style>

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

@@ -4,7 +4,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import svgLoader from 'vite-svg-loader'
 import mockDevServer from 'vite-plugin-mock-dev-server'
 import checker from 'vite-plugin-checker'
-// @ts-ignore
 import tailwindcss from '@tailwindcss/vite'
 import { visualizer } from 'rollup-plugin-visualizer'
 import { includes } from 'lodash-es'

package/template/web-app/vue-rsbuild/{style.css → main.css}

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

package/template/web-app/vue-rsbuild/main.ts

@@ -1,6 +1,6 @@
 import { createPinia } from 'pinia'
 import { router } from '@/domain/router'
 import { app } from '@/domain/app'
-import './style.css'
+import './main.css'
 
 app.use(createPinia()).use(router).mount('#app')

package/template/web-app/vue-rsbuild/pages/home/view.vue

@@ -11,6 +11,6 @@ console.log('data', data)
 
 <style scoped>
 .root {
-    @apply flex items-center justify-center;
+    @apply tw:flex tw:items-center tw:justify-center;
 }
 </style>

package/template/web-extension/package.json

@@ -25,8 +25,6 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
-        "@emotion/react": "11.14.0",
-        "@emotion/styled": "11.14.0",
         "@tanstack/react-query": "5.51.15",
         "@webext-core/messaging": "2.2.0",
         "axios": "1.7.9",

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`
-    ${props => props.theme.tools.flex('center', 'center')}
-`

package/template/web-app/react-rsbuild/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;
-                }
-            `}
-        />
-    )
-}

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

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

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

@@ -1,55 +0,0 @@
-import { CSSProperties } from 'react'
-import { isString } from 'lodash-es'
-
-export const theme = {
-    tools: {
-        ellipsis: () => ({
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-        }),
-        lineClamp: (n: number) => ({
-            '-webkit-line-clamp': `${n}`,
-            '-webkit-box-orient': 'vertical',
-            overflow: 'hidden',
-            display: '-webkit-box'
-        }),
-        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: {
-            grid: (rows: number | string, cols: number | string, gap?: number) => ({
-                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>
-    }
-}
-export type themeType = typeof theme

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`
-    ${props => props.theme.tools.flex('center', 'center')}
-`

package/template/web-app/react-vite/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;
-                }
-            `}
-        />
-    )
-}

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

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

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

@@ -1,55 +0,0 @@
-import { CSSProperties } from 'react'
-import { isString } from 'lodash-es'
-
-export const theme = {
-    tools: {
-        ellipsis: () => ({
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-        }),
-        lineClamp: (n: number) => ({
-            '-webkit-line-clamp': `${n}`,
-            '-webkit-box-orient': 'vertical',
-            overflow: 'hidden',
-            display: '-webkit-box'
-        }),
-        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: {
-            grid: (rows: number | string, cols: number | string, gap?: number) => ({
-                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>
-    }
-}
-export type themeType = typeof theme