support themeSeries custom styles

CONTRIBUTING.md

@@ -83,7 +83,7 @@ bun bundle
 Format project code:
 
 ```bash
-bun format
+bun fmt
 ```
 
 For PR submission — check and compile all project code with formatting:

CONTRIBUTING_CN.md

@@ -77,7 +77,7 @@ bun bundle
 格式化项目中的代码
 
 ```bash
-bun format
+bun fmt
 ```
 
 用于 PR, 检查并编译项目中的所有代码并进行格式化

package.json

@@ -21,9 +21,9 @@
   },
   "scripts": {
     "lint": "bun eslint .",
-    "format": "bun prettier --write .",
+    "fmt": "bun prettier --write .",
     "bundle": "tsgo -b && bunx --bun vite build",
-    "commit": "bun format && bun lint && bun bundle && bun vitest",
+    "commit": "bun fmt && bun lint && bun bundle && bun vitest",
     "version": "bun scripts/version.ts",
     "release": "bun bundle && bun update:locale",
     "sync:theme": "bun scripts/syncTheme.ts",

src/core/css.ts

@@ -25,7 +25,6 @@ import { captureStyle } from "../vanilla-extract";
 declare const CSSBrand: unique symbol;
 type CSSObject = { [CSSBrand]: true };
 type CSSPrimitive = string | number;
-type CSSString = string & CSSObject;
 type CSSInterpolation = CSSPrimitive | CSSObject | undefined;
 type SelectorStyleRule =
   | StyleRule
@@ -33,6 +32,7 @@ type SelectorStyleRule =
       [key: string]: StyleRule | SelectorStyleRule;
     };
 
+export type CSSString = string & CSSObject;
 /**
  * css 模板字符串 —— 类式 linaria 的 css tag，用于 vscode-styled-components 高亮。
  * 构建时校验 CSS 语法并返回 CSS 字符串。

src/core/index.ts

@@ -19,7 +19,7 @@
 
 export { createChroma } from "./chroma";
 export { createCodeMirror } from "./codemirror";
-export { css, cssCombine, cssStyle } from "./css";
+export { css, cssCombine, cssStyle, type CSSString } from "./css";
 export { createThemeMetaInfo, type ColorblindType, type GiteaThemeMeta } from "./meta";
 export { createTheme, defineTheme, type Theme, type ThemeVars } from "./theme";
 export type { CSSVarFunction, MapLeafNodes } from "./types";

src/vite-plugin/index.ts

@@ -19,7 +19,7 @@
 
 import { transform } from "lightningcss";
 import type { PluginOption } from "vite";
-import { createTheme, createThemeMetaInfo, type GiteaThemeMeta, type Theme } from "../core";
+import { createTheme, createThemeMetaInfo, type CSSString, type GiteaThemeMeta, type Theme } from "../core";
 import { compileCSS } from "../vanilla-extract";
 import { buildFullDisplayName, buildFullThemeName } from "./utils";
 
@@ -30,6 +30,7 @@ type ThemeEntry = {
   meta: GiteaThemeMeta;
   theme?: Theme;
   autoTheme?: { darkThemeName: string; lightThemeName: string };
+  styles?: CSSString;
 };
 
 export function giteaGitHubTheme(): PluginOption {
@@ -68,6 +69,7 @@ export function giteaGitHubTheme(): PluginOption {
               colorblindType: entry.colorblindType,
             },
             theme: entry.theme,
+            styles: themeSeries.styles,
           });
         }
         // 处理自动主题
@@ -92,11 +94,11 @@ export function giteaGitHubTheme(): PluginOption {
 
       // 2. 编译公共样式
       const rawStyles = Buffer.from((await import("@lutinglt/gitea-github-theme/styles")).default);
-      const styles = transform({ filename: "styles.css", code: rawStyles, minify: true }).code.toString();
+      const globalStyles = transform({ filename: "globalStyles.css", code: rawStyles, minify: true }).code.toString();
 
       // 3. 编译每个主题的 CSS 并输出
       for (const entry of themeEntries) {
-        const { themeName, meta, autoTheme } = entry;
+        const { themeName, meta, autoTheme, styles } = entry;
 
         const rawThemeCSS = Buffer.from(
           compileCSS(() => {
@@ -105,13 +107,17 @@ export function giteaGitHubTheme(): PluginOption {
           })
         );
         const themeCSS = transform({ filename: themeName + ".css", code: rawThemeCSS, minify: true }).code.toString();
+        const stylesCSS = styles
+          ? transform({ filename: themeName + ".styles.css", code: Buffer.from(styles), minify: true }).code.toString()
+          : "";
+
         const source = autoTheme
           ? [
               `@import "./${autoTheme.darkThemeName}.css" (prefers-color-scheme: dark);`,
               `@import "./${autoTheme.lightThemeName}.css" (prefers-color-scheme: light);`,
               themeCSS,
             ].join("\n")
-          : `${themeCSS}${styles}`;
+          : `${themeCSS}${globalStyles}${stylesCSS}`;
 
         this.emitFile({ type: "asset", fileName: `${themeName}.css`, source });
       }

src/vite-plugin/themeConfig.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { ColorblindType, Theme } from "../core";
+import type { ColorblindType, CSSString, Theme } from "../core";
 
 type ThemeConfig = {
   /** 主题名称, 用于生成文件名, 未指定时取 themes 中的键名 */
@@ -54,6 +54,8 @@ export type ThemeSeries = {
   };
   /** 必须至少声明 dark/light 其中一个, 如果 dark & light 都声明了, 会生成自动颜色主题 */
   themes: Themes;
+  /** 主题系列追加的样式, 优先级高于默认样式 */
+  styles?: CSSString;
 };
 
 /** 定义主题配置 */