From fb9bd8d342eb4362a8367c4bd9334d2b1e328ff0 Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Sun, 18 Jun 2023 21:11:42 +0900
Subject: [PATCH] [feat] css full support

---
 package.json                          |  1 +
 pnpm-lock.yaml                        |  7 +++++++
 src/lib/ChatScreens/ChatScreen.svelte |  2 +-
 src/lib/UI/MainMenu.svelte            |  1 -
 src/ts/characterCards.ts              |  3 ++-
 src/ts/parser.ts                      | 23 +++++++++++++++++++++++
 6 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 1bdba617..fcf73bab 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "runserver": "node server/node/server.cjs"
   },
   "dependencies": {
+    "@adobe/css-tools": "4.3.0-beta.2",
     "@dqbd/tiktoken": "^1.0.4",
     "@msgpack/msgpack": "3.0.0-beta2",
     "@tauri-apps/api": "1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e322b1e..670f657c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,9 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@adobe/css-tools':
+    specifier: 4.3.0-beta.2
+    version: 4.3.0-beta.2
   '@dqbd/tiktoken':
     specifier: ^1.0.4
     version: 1.0.4
@@ -171,6 +174,10 @@ devDependencies:
 
 packages:
 
+  /@adobe/css-tools@4.3.0-beta.2:
+    resolution: {integrity: sha512-VzekSqtYB+8XX8W1gNRIa1TbTXjVw64I5yLrbBP13JhwecixQzrpXWIszo7FghS9cm6FEFhzIivzwjns35DMlQ==}
+    dev: false
+
   /@dqbd/tiktoken@1.0.4:
     resolution: {integrity: sha512-C0HrJj2RNlsB3wslfNHGNH8xN7QQMki+y4JkUor/GE+oIfPvH7yVep9l1/2powam8AAH6+gdv5MggA5gsszweg==}
     dev: false
diff --git a/src/lib/ChatScreens/ChatScreen.svelte b/src/lib/ChatScreens/ChatScreen.svelte
index 24dd4149..c661e953 100644
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -55,7 +55,7 @@
 {:else if $DataBase.theme === 'waifuMobile'}
     <div class="flex-grow h-full relative" style={bgImg.length < 4 ? wallPaper : bgImg}>
         <BackgroundDom />
-        <div class="w-full absolute z-10 bottom-0 left-0" class:pre33={$selectedCharID >= 0}>
+        <div class="w-full absolute z-10 bottom-0 left-0" class:per33={$selectedCharID >= 0}>
             <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList/>
         </div>
         {#if $selectedCharID >= 0}
diff --git a/src/lib/UI/MainMenu.svelte b/src/lib/UI/MainMenu.svelte
index 002ab1d8..4460fd5b 100644
--- a/src/lib/UI/MainMenu.svelte
+++ b/src/lib/UI/MainMenu.svelte
@@ -66,7 +66,6 @@
           <button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>
             <ArrowLeft/>
           </button>
-          <h1 class="text-3xl font-bold">{language.hub} <Help key="experimental" /> </h1>
         </div>
         <Hub />
       {/if}
diff --git a/src/ts/characterCards.ts b/src/ts/characterCards.ts
index f97f51e8..bfdc14a9 100644
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -636,7 +636,8 @@ export async function shareRisuHub(char:character, arg:{
             body: JSON.stringify({
                 card: card,
                 img: Buffer.from(img).toString('base64'),
-                resources: resources
+                resources: resources,
+                token: get(DataBase)?.account?.token
             })
         })
 
diff --git a/src/ts/parser.ts b/src/ts/parser.ts
index 84d0a4d9..d9a9a34c 100644
--- a/src/ts/parser.ts
+++ b/src/ts/parser.ts
@@ -4,6 +4,7 @@ import { DataBase, type character, type groupChat } from './storage/database';
 import { getFileSrc } from './storage/globalApi';
 import { processScript } from './process/scripts';
 import { get } from 'svelte/store';
+import css from '@adobe/css-tools'
 
 const convertor = new showdown.Converter({
     simpleLineBreaks: true,
@@ -27,6 +28,28 @@ DOMPurify.addHook("uponSanitizeElement", (node: HTMLElement, data) => {
           return node.parentNode.removeChild(node);
        }
     }
+    if(data.tagName === 'style'){
+        try {
+            const ast = css.parse(node.innerHTML)
+            const rules = ast?.stylesheet?.rules
+            if(rules){
+                for(const rule of rules){
+                    if(rule.selectors){
+                        for(let i=0;i<rule.selectors.length;i++){
+                            rule.selectors[i] = ".chattext " + rule.selectors[i]
+                        }
+                    }
+                }
+            }
+            node.innerHTML = css.stringify(ast)
+       
+        } catch (error) {
+            const ErrorNode = document.createElement("div")
+            ErrorNode.innerText = `CSS ERROR: ${error}`
+            node.parentNode.appendChild(ErrorNode)
+            return node.parentNode.removeChild(node);
+        }
+    }
 });
 
 DOMPurify.addHook("uponSanitizeAttribute", (node, data) => {