@spicemod/creator 0.0.29 → 0.0.30

package/dist/bin.mjs

@@ -144,7 +144,7 @@ const customAppEntryFilePath = dist("templates/customAppEntry.js", import.meta.u
 //#endregion
 //#region package.json
 var name = "@spicemod/creator";
-var version = "0.0.29";
+var version = "0.0.30";
 
 //#endregion
 //#region src/utils/common.ts
@@ -358,6 +358,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({
@@ -830,17 +831,44 @@ 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((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 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 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);
+					}
+				}
+			});
+		}
+	};
+}
+
 //#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 +889,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 +1135,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 +1243,8 @@ const getCommonPlugins = (opts) => {
 	const p = [
 		...plugins.css({
 			minify,
-			inline
+			inline,
+			styleId: template === "extension" && opts.cssId ? opts.cssId : null
 		}),
 		plugins.clean(cache),
 		plugins.externalGlobal({

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/package.json

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