Add files via upload

main.js

@@ -0,0 +1,111 @@
+const el = {
+	create(tag, attrs) {
+		const el = Object.assign(document.createElement(tag), attrs);
+		document.querySelector('head').appendChild(el);
+	},
+	remove(selector) {
+		document.querySelectorAll(selector)?.forEach(el => el.remove());
+	}
+}
+
+let {href} = window.location;
+let url = new URL(href);
+let file = url.searchParams.get('file');
+
+const checkFile = async(file) => {
+	try {
+		const req = await fetch(file);
+		console.log(req);
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+if (file) {
+	const files = file.split('|');
+
+	checkFile(file);
+
+	files.forEach(file => {
+		const link = document.createElement('link');
+		link.setAttribute('rel', 'stylesheet');
+		link.setAttribute('href', file);
+		document.querySelector('head').appendChild(link);
+	});
+}
+
+if (url.searchParams.get('lightTheme') === "true") {
+	document.querySelector('html').classList.remove('theme-dark');
+	document.querySelector('html').classList.add('theme-light');
+}
+
+window.addEventListener('message', event => {
+	const data = JSON.parse(event.data);
+
+	const actions = {
+		setPreview() {
+			document.querySelector('#preview').textContent = data.text;
+		},
+		reset() {
+			const props = document.documentElement.getAttribute('style').split(';').slice(0, 2).map(e => e += ';').join(' ');
+			document.documentElement.setAttribute('style', props);
+		},
+		setProp() {
+			document.documentElement.style.setProperty(`--${data.variable}`, data.value);
+		},
+		removeProp() {
+			document.documentElement.style.removeProperty(`--${data.variable}`);
+		},
+		addFont() {
+			const tag = document.querySelector(`#font-${data.index}`)
+			if (!tag) {
+				el.create('style', {
+					id: `font-${data.index}`,
+					className: 'customfont',
+					innerText: data.text
+				})
+			} else {
+				tag.innerHTML = data.text;
+			}
+		},
+		removeFont() {
+			el.remove(`#font-${data.index}`)
+		},
+		addAddon() {
+			if (!document.querySelector(`.${data.class}`)) {
+				el.create('style', {
+					className: data.class,
+					textContent: `@import url('${data.text}')`
+				});
+			}
+		},
+		removeAddon() {
+			el.remove(`.${data.class}`);
+		},
+		toggleModal() {
+			if (data.visible) {
+				document.querySelector('#modal').classList.remove('HIDDEN');
+				document.querySelector('#popout').classList.add('HIDDEN');
+			} else {
+				document.querySelector('#modal').classList.add('HIDDEN');
+				document.querySelector('#popout').classList.remove('HIDDEN');
+			}
+		},
+		toggleTheme() {
+			if (document.documentElement.classList.contains('theme-dark')) {
+				document.querySelectorAll('.theme-dark')?.forEach(el => {
+					el.classList.add('theme-light');
+					el.classList.remove('theme-dark');
+				});
+			} else {
+				document.querySelectorAll('.theme-light')?.forEach(el => {
+					el.classList.add('theme-dark');
+					el.classList.remove('theme-light');
+				});
+			}
+
+		}
+	}
+
+	actions[data.action]?.();
+})

minify.js

@@ -0,0 +1,13 @@
+import { transform } from 'lightningcss';
+import {readFileSync, writeFileSync} from 'fs'
+
+const css = readFileSync('./styles.css');
+
+let { code } = transform({
+  filename: 'styles.css',
+  code: Buffer.from(css),
+  minify: true,
+  sourceMap: false
+});
+
+writeFileSync('./styles.css', code)

package.json

@@ -0,0 +1,11 @@
+{
+  "type": "module",
+  "scripts": {
+    "purge": "node purge.js",
+    "mini": "node minify.js"
+  },
+  "devDependencies": {
+    "lightningcss": "^1.24.1",
+    "purgecss": "^5.0.0"
+  }
+}

purge.js

@@ -0,0 +1,10 @@
+import { PurgeCSS } from 'purgecss';
+import { unlinkSync, writeFileSync } from 'fs';
+
+const purgeResult = await new PurgeCSS().purge({
+	content: ['./index.html'],
+	css: ['./discord.css']
+});
+
+writeFileSync('./styles.css', purgeResult[0].css);
+unlinkSync('./discord.css');