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

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;

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={{

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

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;
+  },
+};

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;

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;
 }

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;
   }