From 0ec4e37c13b502760ccc5ea17affb5d30293c14a Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 5 Nov 2025 01:36:46 +0800
Subject: [PATCH] fix(css): support style transformer for inline css (#2403)

* fix(css): support style transformer for inline css

* fix(eink): bold text for current chapter in the TOC, closes #2401
---
 .../app/reader/components/FoliateViewer.tsx   | 15 +++++++++---
 .../app/reader/components/sidebar/TOCItem.tsx |  2 +-
 .../src/services/transformers/index.ts        |  2 ++
 .../src/services/transformers/style.ts        | 23 +++++++++++++++++++
 .../src/services/transformers/types.ts        |  2 ++
 apps/readest-app/src/styles/globals.css       |  4 ++++
 apps/readest-app/src/utils/style.ts           |  4 ++++
 7 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 apps/readest-app/src/services/transformers/style.ts

diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 98707285..d800b2ec 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -129,13 +129,22 @@ const FoliateViewer: React.FC<{
           if (viewSettings && detail.type === 'text/css')
             return transformStylesheet(width, height, data);
           if (viewSettings && bookData && detail.type === 'application/xhtml+xml') {
-            const ctx = {
+            const ctx: TransformContext = {
               bookKey,
               viewSettings,
+              width,
+              height,
               primaryLanguage: bookData.book?.primaryLanguage,
               content: data,
-              transformers: ['punctuation', 'footnote', 'whitespace', 'language', 'sanitizer'],
-            } as TransformContext;
+              transformers: [
+                'style',
+                'punctuation',
+                'footnote',
+                'whitespace',
+                'language',
+                'sanitizer',
+              ],
+            };
             return Promise.resolve(transformContent(ctx));
           }
           return data;
diff --git a/apps/readest-app/src/app/reader/components/sidebar/TOCItem.tsx b/apps/readest-app/src/app/reader/components/sidebar/TOCItem.tsx
index 2aa5875e..ee939e8a 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/TOCItem.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/TOCItem.tsx
@@ -68,7 +68,7 @@ const TOCItemView = React.memo<{
       className={clsx(
         'flex w-full cursor-pointer items-center rounded-md py-4 sm:py-2',
         isActive
-          ? 'sm:bg-base-300/65 sm:hover:bg-base-300/75 sm:text-base-content text-blue-500'
+          ? 'text-bold-in-eink sm:bg-base-300/65 sm:hover:bg-base-300/75 sm:text-base-content text-blue-500'
           : 'sm:hover:bg-base-300/75',
       )}
       style={{
diff --git a/apps/readest-app/src/services/transformers/index.ts b/apps/readest-app/src/services/transformers/index.ts
index c5e4a9c9..ac46f70c 100644
--- a/apps/readest-app/src/services/transformers/index.ts
+++ b/apps/readest-app/src/services/transformers/index.ts
@@ -4,11 +4,13 @@ import { languageTransformer } from './language';
 import { punctuationTransformer } from './punctuation';
 import { whitespaceTransformer } from './whitespace';
 import { sanitizerTransformer } from './sanitizer';
+import { styleTransformer } from './style';
 
 export const availableTransformers: Transformer[] = [
   punctuationTransformer,
   footnoteTransformer,
   languageTransformer,
+  styleTransformer,
   whitespaceTransformer,
   sanitizerTransformer,
   // Add more transformers here
diff --git a/apps/readest-app/src/services/transformers/style.ts b/apps/readest-app/src/services/transformers/style.ts
new file mode 100644
index 00000000..6904e494
--- /dev/null
+++ b/apps/readest-app/src/services/transformers/style.ts
@@ -0,0 +1,23 @@
+import { transformStylesheet } from '@/utils/style';
+import type { Transformer } from './types';
+
+export const styleTransformer: Transformer = {
+  name: 'style',
+
+  transform: async (ctx) => {
+    let result = ctx.content;
+    const styleMatches = [...result.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)];
+
+    for (const match of styleMatches) {
+      const [full, css] = match;
+      const transformed = await transformStylesheet(
+        ctx.width || window.innerWidth,
+        ctx.height || window.innerHeight,
+        css!,
+      );
+      result = result.replace(full, `<style>${transformed}</style>`);
+    }
+
+    return result;
+  },
+};
diff --git a/apps/readest-app/src/services/transformers/types.ts b/apps/readest-app/src/services/transformers/types.ts
index c48109ef..9d7bffd4 100644
--- a/apps/readest-app/src/services/transformers/types.ts
+++ b/apps/readest-app/src/services/transformers/types.ts
@@ -4,6 +4,8 @@ export type TransformContext = {
   bookKey: string;
   viewSettings: ViewSettings;
   primaryLanguage?: string;
+  width?: number;
+  height?: number;
   content: string;
   transformers: string[];
   reversePunctuationTransform?: boolean;
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index 002ea5bc..8677892f 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -428,6 +428,10 @@ foliate-view {
   color: theme('colors.base-content') !important;
 }
 
+[data-eink="true"] [class*="text-bold-in-eink"] {
+  font-weight: bold;
+}
+
 .no-transitions * {
   transition: none !important;
 }
\ No newline at end of file
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index d1538f3f..0409a42c 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -391,6 +391,10 @@ const getLayoutStyles = (
   div.center *, p.center * { text-align: center; }
   div.justify *, p.justify * { text-align: justify; }
 
+  .h5_mainbody {
+    overflow: unset !important;
+  }
+
   .nonindent, .noindent {
     text-indent: unset !important;
   }