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

.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 }],
     },
   }
 );

src/core/vite.ts

@@ -4,6 +4,8 @@ import fs from "node:fs";
 import path from "node:path";
 import type { Plugin } from "vite";
 
+const suffix = ".css.tsx"
+
 /**
  * 生成主题输入
  * @param outDir 输出目录与 vite 配置中的 outDir 一致, 用于生成临时目录
@@ -28,12 +30,12 @@ export function themeInput(
 
   for (const entry of themeEntries) {
     // 目录下所有的 css.ts 文件都作为主题入口
-    if (entry.isFile() && entry.name.endsWith(".css.ts")) {
+    if (entry.isFile() && entry.name.endsWith(suffix)) {
-      const fileName = entry.name.replace(".css.ts", "");
+      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);`;
@@ -41,7 +43,7 @@ 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;

src/types/color/console.ts

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

themes/dark.css.tsx

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

vite.config.ts

@@ -13,7 +13,7 @@ dotenv.config({quiet: true});
 
 const require = createRequire(import.meta.url);
 
-const devTheme = process.env.DEV_THEME || "dark"; // 开发模式下的主题, 仅打包该主题
+const devTheme = process.env.DEV_THEME || "dark"; // 开发模式仅打包单个颜色主题
 const outDir = "dist"; // 输出目录
 const themesDir = "themes"; // 颜色主题目录
 
@@ -25,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",