@spicemod/creator 0.0.29 → 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.29";
+var version = "0.0.31";
 
 //#endregion
 //#region src/utils/common.ts
@@ -358,6 +359,7 @@ const LocaleNameSchema = v.intersect([v.object({ en: v.string() }), v.record(v.p
 const ExtensionTemplateSchema = v.object({
 	name: v.string(),
 	template: v.literal("extension"),
+	cssId: v.optional(v.string()),
 	entry: EntryFileSchema
 });
 const ThemeTemplateSchema = v.object({
@@ -624,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)
@@ -830,17 +833,51 @@ const clean = (cache, logger = createLogger("plugin:clean")) => ({
 	}
 });
 
+//#endregion
+//#region src/esbuild/plugins/inlineBundledCss.ts
+function inlineBundledCss(styleId) {
+	return {
+		name: "inline-bundled-css",
+		setup(build) {
+			build.onEnd(async (result) => {
+				if (result.errors.length > 0 || !result.outputFiles) return;
+				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 { 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 = outputFiles.indexOf(cssFile);
+						if (cssIndex > -1) outputFiles.splice(cssIndex, 1);
+					}
+				}));
+			});
+		}
+	};
+}
+
 //#endregion
 //#region src/esbuild/plugins/css.ts
-function css({ minify = false, inline = false, logger = createLogger("plugin:css") } = {}) {
+function css({ minify = false, inline = false, logger = createLogger("plugin:css"), styleId = null } = {}) {
 	const postCssPlugins = [
 		postcssImport({ path: [resolve(process.cwd(), "src")] }),
 		autoprefixer,
 		postcssPresetEnv({ stage: 0 }),
 		...minify ? [postcssMinify()] : []
 	];
-	const type = inline ? "style" : "css";
-	return [sassPlugin({
+	const type = inline ? styleId ? "css" : "style" : "css";
+	const plugins = [sassPlugin({
 		filter: /\.module\.(s[ac]ss|css)$/,
 		type,
 		transform: postcssModules({
@@ -861,6 +898,8 @@ function css({ minify = false, inline = false, logger = createLogger("plugin:css
 			return result.css;
 		}
 	})];
+	if (inline && styleId) plugins.push(inlineBundledCss(styleId));
+	return plugins;
 }
 
 //#endregion
@@ -1105,7 +1144,7 @@ function wrapWithLoader({ config, cache, outFiles, server, dev = false, logger =
 							target: build$3.initialOptions.target || "es2020",
 							loader: "jsx",
 							define: {
-								__ESBUILD__HAS_CSS: JSON.stringify(type !== "theme"),
+								__ESBUILD__HAS_CSS: JSON.stringify(type !== "theme" && bundledCss.length !== 0),
 								__ESBUILD__INJECTED_CSS: JSON.stringify(bundledCss),
 								__ESBUILD__APP_SLUG: JSON.stringify(slug),
 								__ESBUILD__APP_TYPE: JSON.stringify(type),
@@ -1213,7 +1252,8 @@ const getCommonPlugins = (opts) => {
 	const p = [
 		...plugins.css({
 			minify,
-			inline
+			inline,
+			styleId: template === "extension" && opts.cssId ? opts.cssId : null
 		}),
 		plugins.clean(cache),
 		plugins.externalGlobal({
@@ -2085,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 = () => {
@@ -2117,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);
@@ -2232,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/index.d.mts

@@ -171,36 +171,43 @@ declare const FileOptionsSchema: v.IntersectSchema<[Omit<v.ObjectSchema<{
 }, undefined>, v.VariantSchema<"template", [Omit<v.ObjectSchema<{
   readonly name: v.StringSchema<undefined>;
   readonly template: v.LiteralSchema<"extension", undefined>;
+  readonly cssId: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
   readonly entry: v.StringSchema<undefined>;
 }, undefined>, "~types" | "~run" | "~standard" | "entries"> & {
   readonly entries: {
     readonly name: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
     readonly template: v.OptionalSchema<v.LiteralSchema<"extension", undefined>, undefined>;
+    readonly cssId: v.OptionalSchema<v.OptionalSchema<v.StringSchema<undefined>, undefined>, undefined>;
     readonly entry: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
   };
   readonly "~standard": v.StandardProps<{
     name?: string | undefined;
     template?: "extension" | undefined;
+    cssId?: string | undefined;
     entry?: string | undefined;
   }, {
     name?: string | undefined;
     template?: "extension" | undefined;
+    cssId?: string | undefined;
     entry?: string | undefined;
   }>;
   readonly "~run": (dataset: v.UnknownDataset, config: v.Config<v.BaseIssue<unknown>>) => v.OutputDataset<{
     name?: string | undefined;
     template?: "extension" | undefined;
+    cssId?: string | undefined;
     entry?: string | undefined;
   }, v.StringIssue | v.ObjectIssue | v.LiteralIssue>;
   readonly "~types"?: {
     readonly input: {
       name?: string | undefined;
       template?: "extension" | undefined;
+      cssId?: string | undefined;
       entry?: string | undefined;
     };
     readonly output: {
       name?: string | undefined;
       template?: "extension" | undefined;
+      cssId?: string | undefined;
       entry?: string | undefined;
     };
     readonly issue: v.StringIssue | v.ObjectIssue | v.LiteralIssue;

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.29",
+  "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",
   };