@spicemod/creator 0.0.28 → 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.28";
+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({
@@ -409,7 +410,7 @@ const OptionsSchema$1 = v.intersect([
 //#region src/env.ts
 const isDev = process.env.IS_DEV === "true";
 const spicetifyBin = process.env.SPICETIFY_BIN || process.env.SPICE_BIN || "spicetify";
-const skipSpicetify = process.env.SPICETIFY_SKIP === "true" || process.env.CI === "true";
+const skipSpicetify = process.env.SPICETIFY_SKIP === "true" || !!process.env.CI;
 const env = {
 	isDev,
 	spicetifyBin,
@@ -509,6 +510,7 @@ const SpicetifyConfigSchema = v.object({
 //#endregion
 //#region src/utils/spicetify/index.ts
 function runSpice(args) {
+	if (env.skipSpicetify) throw new Error("Spicetify operations are disabled in CI");
 	validateSpicetify(env.spicetifyBin);
 	return spawnSync(env.spicetifyBin, args, { encoding: "utf-8" });
 }
@@ -516,6 +518,7 @@ const getCustomAppsDir = () => join(getSpiceDataPath(), "CustomApps");
 const getExtensionDir = () => join(getSpiceDataPath(), "Extensions");
 const getThemesDir = () => join(getSpiceDataPath(), "Themes");
 async function getSpicetifyConfig() {
+	if (env.skipSpicetify) throw new Error("Spicetify operations are disabled in CI");
 	const { stdout, stderr, error } = runSpice(["path", "-c"]);
 	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
 	const rawConfig = parse(await readFile(stdout.trim(), "utf-8"));
@@ -524,11 +527,13 @@ async function getSpicetifyConfig() {
 	else throw new Error("Spicetify Config Validation Failed:", v.flatten(result.issues).nested);
 }
 function getSpiceDataPath() {
+	if (env.skipSpicetify) throw new Error("Spicetify operations are disabled in CI");
 	const { stdout, stderr, error } = runSpice(["path", "userdata"]);
 	if (error || stderr) throw new Error(`Failed to locate Spicetify config: ${stderr || error?.message}`);
 	return stdout.trim();
 }
 function validateSpicetify(bin) {
+	if (env.skipSpicetify) return;
 	const result = spawnSync(bin, ["--version"], { encoding: "utf-8" });
 	if (result.error) throw result.error;
 	if (result.status !== 0) throw new Error(`Invalid spicetify binary "${bin}": ${result.stderr || "unknown error"}`);
@@ -826,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({
@@ -857,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
@@ -922,7 +956,7 @@ const spicetifyHandler = ({ config, options, cache, logger = createLogger("plugi
 		const identifier = isExtension ? `${urlSlugify(config.name)}.js` : urlSlugify(getEnName(config.name));
 		const getDestDirs = () => {
 			const dirs = [resolve(outDir)];
-			if (copy) dirs.push(isExtension ? getExtensionDir() : isCustomApp ? resolve(getCustomAppsDir(), identifier) : resolve(getThemesDir(), identifier));
+			if (copy && !env.skipSpicetify) dirs.push(isExtension ? getExtensionDir() : isCustomApp ? resolve(getCustomAppsDir(), identifier) : resolve(getThemesDir(), identifier));
 			return dirs;
 		};
 		if (env.skipSpicetify) logger.info(pc.yellow("Skipping Spicetify operations..."));
@@ -1101,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),
@@ -1209,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.28",
+  "version": "0.0.30",
   "description": "Easily make Spicetify extensions and themes",
   "keywords": [
     "cli",