添加开发插件建议&.css.tsx兼容插件提示

.env.example

@@ -0,0 +1,4 @@
+DEV_THEME=dark
+SSH_SERVER=localhost
+SSH_USER=root
+GITEA_THEME_PATH=/data/gitea/public/assets/css/

.gitignore

@@ -1,3 +1,4 @@
 dist
 node_modules
 package-lock.json
+.env

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "usernamehw.errorlens",
+    "mikestead.dotenv",
+    "styled-components.vscode-styled-components"
+  ]
+}

eslint.config.js

@@ -19,7 +19,6 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
     },
   }
 );

package.json

@@ -26,6 +26,7 @@
     "@vitejs/plugin-react-swc": "^3.10.2",
     "@wyw-in-js/babel-preset": "^0.7.0",
     "@wyw-in-js/vite": "^0.7.0",
+    "dotenv": "^17.0.0",
     "eslint": "^9.29.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",

src/core/vite.ts

@@ -1,8 +1,11 @@
+import { execSync } from "node:child_process";
 import crypto from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
 import type { Plugin } from "vite";
 
+const suffix = ".css.tsx"
+
 /**
  * 生成主题输入
  * @param outDir 输出目录与 vite 配置中的 outDir 一致, 用于生成临时目录
@@ -27,12 +30,12 @@ export function themeInput(
 
   for (const entry of themeEntries) {
     // 目录下所有的 css.ts 文件都作为主题入口
-    if (entry.isFile() && entry.name.endsWith(".css.ts")) {
-      const fileName = entry.name.replace(".css.ts", "");
+    if (entry.isFile() && entry.name.endsWith(suffix)) {
+      const fileName = entry.name.replace(suffix, "");
       // 开发模式只打包 devTheme 主题
       if (mode === "dev" && fileName !== devTheme) continue;
       // 创建颜色主题的 css.ts 文件, vanilla-extract 需要这个文件后缀名并生成 css
-      const tmpCssTs = path.join(tmpDir, `${fileName}.css.ts`);
+      const tmpCssTs = path.join(tmpDir, `${fileName}${suffix}`);
       const createImport = `import { createTheme } from "src/core";`;
       const themeImport = `import theme from "themes/${fileName}";`;
       const createFn = `createTheme(theme);`;
@@ -40,12 +43,15 @@ export function themeInput(
       // 生成主题入口的 .ts 文件, 合并样式和颜色主题
       const tmpInputTs = path.join(tmpDir, `${fileName}.ts`);
       const stylesImport = `import "styles";`;
-      const cssImport = `import "./${fileName}.css.ts";`;
+      const cssImport = `import "./${fileName}${suffix}";`;
       fs.writeFileSync(tmpInputTs, `${stylesImport}\n${cssImport}`);
 
       input[fileName] = tmpInputTs;
     }
   }
+  if (mode === "dev") {
+    console.log("[themeInput] devTheme:", devTheme);
+  }
   return input;
 }
 
@@ -88,5 +94,22 @@ export function themePlugin(): Plugin {
         }
       }
     },
+    closeBundle() {
+      const server = process.env.SSH_SERVER;
+      const user = process.env.SSH_USER || "root";
+      const path = process.env.GITEA_THEME_PATH;
+      if (server && path) {
+        const cmd = `scp dist/${prefix}*.css ${user}@${server}:${path}`;
+        console.log("[themePlugin] exec:", cmd);
+        try {
+          execSync(cmd, { stdio: "inherit" });
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_) {
+          // continue regardless of error
+        }
+      } else {
+        console.log("[themePlugin] no SSH_SERVER or GITEA_THEME_PATH, skip upload");
+      }
+    },
   };
 }

src/types/color/console.ts

@@ -21,12 +21,8 @@ export const console = {
   },
   bg: null,
   border: null,
-  active: {
-    bg: null,
-  },
-  hover: {
-    bg: null,
-  },
+  activeBg: "color-console-active-bg",
+  hoverBg: "color-console-hover-bg",
   menu: {
     bg: null,
     border: null,

themes/dark.css.tsx

@@ -8,12 +8,8 @@ const console: Console = {
   },
   bg: "#010409",
   border: "#2b3139",
-  active: {
-    bg: "#2a313c",
-  },
-  hover: {
-    bg: "#15191f",
-  },
+  activeBg: "#2a313c",
+  hoverBg: "#15191f",
   menu: {
     bg: themeVars.color.body,
     border: themeVars.color.light.border,

vite.config.ts

@@ -1,6 +1,7 @@
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import react from "@vitejs/plugin-react";
 import linaria from "@wyw-in-js/vite";
+import * as dotenv from "dotenv";
 import { Features } from "lightningcss";
 import { createRequire } from "node:module";
 import path from "node:path";
@@ -8,9 +9,11 @@ import * as sass from "sass-embedded";
 import { defineConfig } from "vite";
 import { themeInput, themePlugin } from "./src/core/vite";
 
+dotenv.config({quiet: true});
+
 const require = createRequire(import.meta.url);
 
-const devTheme = "dark"; // 开发模式仅打包单个颜色主题
+const devTheme = process.env.DEV_THEME || "dark"; // 开发模式仅打包单个颜色主题
 const outDir = "dist"; // 输出目录
 const themesDir = "themes"; // 颜色主题目录
 
@@ -22,7 +25,7 @@ export default defineConfig(({ mode }) => {
         styles: path.resolve(__dirname, "styles"),
         themes: path.resolve(__dirname, "themes"),
       },
-      extensions: [".js", ".jsx", ".ts", ".tsx", ".css.ts"],
+      extensions: [".js", ".jsx", ".ts", ".tsx", ".css.tsx"],
     },
     css: {
       transformer: "lightningcss",