feat: start proxying css getpropertydeclaration

src/client/dom/css.ts

@@ -1,5 +1,5 @@
 import { ScramjetClient } from "../client";
-import { rewriteCss } from "../../shared";
+import { rewriteCss, unrewriteCss } from "../../shared";
 
 const cssProperties = [
 	"background",
@@ -21,4 +21,23 @@ export default function (client: ScramjetClient) {
 				ctx.args[1] = rewriteCss(ctx.args[1], client.meta);
 		},
 	});
+
+	client.Proxy("CSSStyleDeclaration.prototype.getPropertyValue", {
+		apply(ctx) {
+			if (cssProperties.includes(ctx.args[0])) {
+				const realProperty = ctx.call();
+
+				return ctx.return(unrewriteCss(realProperty));
+			}
+		},
+	});
+
+	client.Trap("CSSStyleDeclaration.prototype.cssText", {
+		set(ctx, value: string) {
+			ctx.set(rewriteCss(value, client.meta));
+		},
+		get(ctx) {
+			return unrewriteCss(ctx.get());
+		},
+	});
 }

src/shared.ts

@@ -3,6 +3,7 @@ export const {
 	url: { encodeUrl, decodeUrl },
 	rewrite: {
 		rewriteCss,
+		unrewriteCss,
 		rewriteHtml,
 		unrewriteHtml,
 		rewriteSrcset,

src/shared/index.ts

@@ -1,5 +1,5 @@
 import { encodeUrl, decodeUrl } from "./rewriters/url";
-import { rewriteCss } from "./rewriters/css";
+import { rewriteCss, unrewriteCss } from "./rewriters/css";
 import { rewriteHtml, rewriteSrcset } from "./rewriters/html";
 import { rewriteJs } from "./rewriters/js";
 import { rewriteHeaders } from "./rewriters/headers";
@@ -23,6 +23,7 @@ self.$scramjet.shared = {
 	},
 	rewrite: {
 		rewriteCss,
+		unrewriteCss,
 		rewriteHtml,
 		unrewriteHtml,
 		rewriteSrcset,

src/shared/rewriters/css.ts

@@ -1,7 +1,7 @@
 // This CSS rewriter uses code from Meteor
 // You can find the original source code at https://github.com/MeteorProxy/Meteor
 
-import { URLMeta, encodeUrl } from "./url";
+import { URLMeta, encodeUrl, decodeUrl } from "./url";
 
 export function rewriteCss(css: string, meta: URLMeta) {
 	const regex =
@@ -32,3 +32,33 @@ export function rewriteCss(css: string, meta: URLMeta) {
 		}
 	);
 }
+
+export function unrewriteCss(css: string) {
+	const regex =
+		/(@import\s+(?!url\())?\s*url\(\s*(['"]?)([^'")]+)\2\s*\)|@import\s+(['"])([^'"]+)\4/g;
+
+	return css.replace(
+		regex,
+		(
+			match,
+			importStatement,
+			urlQuote,
+			urlContent,
+			importQuote,
+			importContent
+		) => {
+			const url = urlContent || importContent;
+			const encodedUrl = decodeUrl(url.trim());
+
+			if (importStatement) {
+				return `@import url(${urlQuote}${encodedUrl}${urlQuote})`;
+			}
+
+			if (importQuote) {
+				return `@import ${importQuote}${encodedUrl}${importQuote}`;
+			}
+
+			return `url(${urlQuote}${encodedUrl}${urlQuote})`;
+		}
+	);
+}

src/shared/rewriters/html.ts

@@ -57,11 +57,6 @@ export function rewriteHtml(
 			script("data:application/javascript;base64," + btoa(injected)),
 			script(self.$scramjet.config["shared"]),
 			script(self.$scramjet.config["client"])
-			// script("/vc/browser.js"),
-			// new Element("link", {
-			// 	rel: "stylesheet",
-			// 	href: "/vc/browser.css",
-			// })
 		);
 	}
 

src/types.d.ts

@@ -1,6 +1,6 @@
 import { ScramjetController } from "./controller/index";
 import { encodeUrl, decodeUrl } from "./shared/rewriters/url";
-import { rewriteCss } from "./shared/rewriters/css";
+import { rewriteCss, unrewriteCss } from "./shared/rewriters/css";
 import {
 	htmlRules,
 	rewriteHtml,
@@ -59,6 +59,7 @@ declare global {
 				};
 				rewrite: {
 					rewriteCss: typeof rewriteCss;
+					unrewriteCss: typeof unrewriteCss;
 					rewriteHtml: typeof rewriteHtml;
 					unrewriteHtml: typeof unrewriteHtml;
 					rewriteSrcset: typeof rewriteSrcset;