@spicemod/creator 0.0.30 → 0.0.31

package/dist/bin.mjs

@@ -140,11 +140,12 @@ const liveReloadFilePath = dist(`templates/liveReload.js`, import.meta.url);
 const hmrCustomAppFilePath = dist(`templates/hmrCustomApp.js`, import.meta.url);
 const templateWrapperFilePath = dist("templates/wrapper.js", import.meta.url);
 const customAppEntryFilePath = dist("templates/customAppEntry.js", import.meta.url);
+const injectCSSFilePath = dist("templates/injectCSS.js", import.meta.url);
 
 //#endregion
 //#region package.json
 var name = "@spicemod/creator";
-var version = "0.0.30";
+var version = "0.0.31";
 
 //#endregion
 //#region src/utils/common.ts
@@ -625,6 +626,7 @@ async function resolveContext(config) {
 	config.outDir = resolve(cwd, config.outDir || "./dist");
 	config.esbuildOptions ??= {};
 	config.serverConfig ??= {};
+	if (config.template === "extension") config.cssId ??= `${varSlugify(getEnName(config.name))}_styles`;
 	if (config.template === "custom-app") config.icon ??= {
 		default: resolveDefaultIcon(cwd),
 		active: resolveActiveIcon(cwd)
@@ -837,22 +839,29 @@ function inlineBundledCss(styleId) {
 	return {
 		name: "inline-bundled-css",
 		setup(build) {
-			build.onEnd((result) => {
+			build.onEnd(async (result) => {
 				if (result.errors.length > 0 || !result.outputFiles) return;
-				const cssFiles = result.outputFiles.filter((file) => file.path.endsWith(".css"));
-				const jsFiles = result.outputFiles.filter((file) => file.path.endsWith(".js"));
-				for (const cssFile of cssFiles) {
+				const outputFiles = result.outputFiles;
+				const cssFiles = outputFiles.filter((file) => file.path.endsWith(".css"));
+				const jsFiles = outputFiles.filter((file) => file.path.endsWith(".js"));
+				await Promise.all(cssFiles.map(async (cssFile) => {
 					const cssContent = cssFile.text;
-					const injectScript = `(function() {if (typeof document === 'undefined') return;var style = document.getElementById('${styleId}');if (!style) {style = document.createElement('style');style.id = '${styleId}';document.head.appendChild(style);}style.textContent = ${JSON.stringify(cssContent)};})();`;
+					const { code: injectScript } = await transform(readFileSync(injectCSSFilePath, "utf-8"), {
+						loader: "js",
+						define: {
+							__ESBUILD__STYLE_ID__: JSON.stringify(styleId),
+							__ESBUILD__CSS_CONTENT__: JSON.stringify(cssContent)
+						}
+					});
 					const jsPath = cssFile.path.replace(/\.css$/, ".js");
 					const jsFile = jsFiles.find((file) => file.path === jsPath);
 					if (jsFile) {
 						const updatedJsText = jsFile.text + injectScript;
 						jsFile.contents = new TextEncoder().encode(updatedJsText);
-						const cssIndex = result.outputFiles.indexOf(cssFile);
-						if (cssIndex > -1) result.outputFiles.splice(cssIndex, 1);
+						const cssIndex = outputFiles.indexOf(cssFile);
+						if (cssIndex > -1) outputFiles.splice(cssIndex, 1);
 					}
-				}
+				}));
 			});
 		}
 	};
@@ -2116,7 +2125,7 @@ async function createHmrServer(config, logger = createLogger("hmrServer")) {
 
 //#endregion
 //#region src/utils/hmr.ts
-const injectHMRExtension = async (rootLink, wsLink, outFiles) => {
+const injectHMRExtension = async (rootLink, wsLink, outFiles, config) => {
 	const extName = `sc-live-reload-helper.js`;
 	const spiceConfig = await getSpicetifyConfig();
 	const cleanup = () => {
@@ -2148,7 +2157,8 @@ const injectHMRExtension = async (rootLink, wsLink, outFiles) => {
 				_HOT_RELOAD_LINK: JSON.stringify(wsLink),
 				_JS_PATH: JSON.stringify(`/files/${outFiles.js}`),
 				_CSS_PATH: JSON.stringify(outFiles.css ? `/files/${outFiles.css}` : `/files/app.css`),
-				_REMOVE_CMD: JSON.stringify(`spicetify config extensions sc-live-reload-helper.js- && spicetify apply`)
+				_REMOVE_CMD: JSON.stringify(`spicetify config extensions sc-live-reload-helper.js- && spicetify apply`),
+				_CSS_ID: JSON.stringify(config.template === "extension" && config.cssId ? config.cssId : "sc-injected-css")
 			}
 		});
 		writeFileSync(outDir, code);
@@ -2263,7 +2273,7 @@ async function dev$1(options) {
 			await server.start();
 			const outFiles = getOutFiles(config, true);
 			if (config.template === "custom-app") await injectHMRCustomApp(server.link, server.wsLink, outFiles, config);
-			else await injectHMRExtension(server.link, server.wsLink, outFiles);
+			else await injectHMRExtension(server.link, server.wsLink, outFiles, config);
 			ctx = await context(getJSDevOptions(config, {
 				...options,
 				outFiles,

package/dist/templates/injectCSS.js

@@ -0,0 +1,9 @@
+(function () {
+  var style = document.getElementById(__ESBUILD__STYLE_ID__ || undefined);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = __ESBUILD__STYLE_ID__ || undefined;
+    document.head.appendChild(style);
+  }
+  style.textContent = __ESBUILD__CSS_CONTENT__;
+})();

package/dist/templates/liveReload.js

@@ -5,7 +5,7 @@
     cssPath: _CSS_PATH,
     jsPath: _JS_PATH,
     removeCmd: _REMOVE_CMD,
-    cssId: "sc-css-injected",
+    cssId: _CSS_ID || "sc-css-injected",
     jsId: "sc-js-injected",
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicemod/creator",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "Easily make Spicetify extensions and themes",
   "keywords": [
     "cli",

package/templates/injectCSS.js

@@ -0,0 +1,9 @@
+(function () {
+  var style = document.getElementById(__ESBUILD__STYLE_ID__ || undefined);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = __ESBUILD__STYLE_ID__ || undefined;
+    document.head.appendChild(style);
+  }
+  style.textContent = __ESBUILD__CSS_CONTENT__;
+})();

package/templates/liveReload.js

@@ -5,7 +5,7 @@
     cssPath: _CSS_PATH,
     jsPath: _JS_PATH,
     removeCmd: _REMOVE_CMD,
-    cssId: "sc-css-injected",
+    cssId: _CSS_ID || "sc-css-injected",
     jsId: "sc-js-injected",
   };