From 43e1e49eb017d0ca199e1b94f7016c6a6e396e2c Mon Sep 17 00:00:00 2001
From: nonameShijian <2954700422@qq.com>
Date: Tue, 19 Mar 2024 20:48:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0import=20css=E7=9A=84?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81(=E6=B2=A1=E6=9C=89=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=80=BC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 service-worker.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/service-worker.js b/service-worker.js
index 1bfd5f86d..2fb569bab 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -60,9 +60,9 @@ self.addEventListener('fetch', event => {
 		event.respondWith(rep);
 		return;
 	}
-	if (!['.ts', '.json', '.vue'].some(ext => request.url.endsWith(ext))) return;
+	if (!['.ts', '.json', '.vue', 'css'].some(ext => request.url.endsWith(ext))) return;
 	if (request.url.endsWith('.d.ts')) return;
-	if (request.url.endsWith('.json')) {
+	if (request.url.endsWith('.json') || request.url.endsWith('css')) {
 		// @ts-ignore
 		if (!event.request.headers.get('origin')) return;
 	}
@@ -82,7 +82,7 @@ self.addEventListener('fetch', event => {
 			return res.text().then(text => {
 				let js;
 				if (request.url.endsWith('.json')) {
-					js = `export default ${text}`;
+					js = `export default ${ text }`;
 				} else if (request.url.endsWith('.ts')) {
 					js = ts.transpile(text, {
 						module: ts.ModuleKind.ES2015,
@@ -93,7 +93,7 @@ self.addEventListener('fetch', event => {
 					}, request.url);
 				} else if (request.url.endsWith('.vue')) {
 					const id = Date.now().toString();
-					const scopeId = `data-v-${id}`;
+					const scopeId = `data-v-${ id }`;
 					// 后续处理sourceMap合并
 					const { descriptor } = sfc.parse(text, { filename: request.url, sourceMap: true });
 					// console.log({ descriptor });
@@ -126,8 +126,8 @@ self.addEventListener('fetch', event => {
 							.replaceAll(`from "vue"`, `from "/game/vue.esm-browser.js"`)
 							.replaceAll(`from 'vue'`, `from '/game/vue.esm-browser.js'`)
 					);
-					codeList.push(`import { __sfc_main__ } from '${request.url}?type=script'`);
-					codeList.push(`__sfc_main__.__scopeId = '${scopeId}'`);
+					codeList.push(`import { __sfc_main__ } from '${ request.url }?type=script'`);
+					codeList.push(`__sfc_main__.__scopeId = '${ scopeId }'`);
 
 					// 编译模板，转换成 render 函数
 					const template = sfc.compileTemplate({
@@ -146,7 +146,7 @@ self.addEventListener('fetch', event => {
 						.replaceAll(`from 'vue'`, `from '/game/vue.esm-browser.js'`)
 					);
 					
-					codeList.push(`import { render } from '${request.url}?type=template'`);
+					codeList.push(`import { render } from '${ request.url }?type=template'`);
 					codeList.push(`__sfc_main__.render = render;`);
 					codeList.push(`export default __sfc_main__;`);
 					// 一个 Vue 文件，可能有多个 style 标签
@@ -159,11 +159,19 @@ self.addEventListener('fetch', event => {
 							scoped: styleBlock.scoped,
 						});
 						const varName = `el${ styleIndex }`;
-						const styleDOM = `let ${ varName } = document.createElement('style');\n${ varName }.innerHTML =  \`${styleCode.code}\`;\ndocument.body.append(${ varName });`;
+						const styleDOM = `let ${ varName } = document.createElement('style');\n${ varName }.innerHTML =  \`${ styleCode.code }\`;\ndocument.body.append(${ varName });`;
 						codeList.push(styleDOM);
 					}
 					js = codeList.join('\n');
 					// console.log(js);
+				} else if (request.url.endsWith('css')) {
+					const id = Date.now().toString();
+					const scopeId = `data-v-${ id }`;
+					js = `const style = document.createElement('style');
+					style.setAttribute('type', 'text/css');
+					style.setAttribute('data-vue-dev-id', \`${ scopeId }\`);
+					style.textContent = ${ JSON.stringify(text) };
+					document.head.appendChild(style);`;
 				}
 				const rep = new Response(new Blob([js], { type: "text/javascript" }), {
 					status: 200,