[feat] css full support

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",

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

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}

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}

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

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