steam-theming-utils 1.3.1 → 1.5.0

package/README.md

@@ -0,0 +1,23 @@
+# steam-theming-utils
+
+A collection of scripts for easier Steam theming.
+
+## Usage
+
+```sh
+$ npm i
+$ npx steam-theming-utils <script>
+```
+
+Note that running any script requires Steam running with `-cef-enable-debugging`.
+
+## Script list
+
+| Name                  | Description                                                                       |
+| --------------------- | --------------------------------------------------------------------------------- |
+| build_class_modules   | Generates a `class_map.json` file for usage with other scripts.                   |
+| build_theme           | Builds the theme. Requires a [specific directory structure][template].            |
+| make_readable_classes | Adds readable versions of classes to the focused window.                          |
+| replace_old_classes   | Replaces old classes with new ones for themes not using the [template][template]. |
+
+[template]: https://github.com/ricewind012/more-advanced-theme-template

package/lib/build_theme.js

@@ -1,20 +1,12 @@
 import fs from "node:fs";
 import path from "node:path";
-import postcss from "postcss";
-import { CLASS_MAP_FILE, readFile, readScript } from "../shared.js";
+import { CLASS_MAP_FILE, readFile, readScript, usePostcss } from "../shared.js";
 
 const cwd = process.cwd();
 const DIST_DIR = path.join(cwd, "dist");
 const EXTENSION = ".css";
 const SRC_DIR = path.join(cwd, "src");
 
-const selectorReplacerPlugin = (opts) => (css) => {
-	css.walkRules((rule) => {
-		rule.selector = rule.selector.replace(opts.match, opts.replace);
-	});
-};
-selectorReplacerPlugin.postcss = true;
-
 export async function execute() {
 	if (!fs.existsSync(path.join(cwd, CLASS_MAP_FILE))) {
 		const script = await readScript("build_class_modules");
@@ -25,15 +17,27 @@ export async function execute() {
 	const parsedCss = fs
 		.readdirSync(SRC_DIR, { recursive: true })
 		.filter((e) => e.endsWith(EXTENSION))
-		.map((e) => [
+		.map((e) => [e, path.basename(e, EXTENSION)])
+		.map(([e, name]) => [
 			e,
-			postcss(
-				selectorReplacerPlugin({
-					match: /#(\w+)/g,
-					replace: (_, s) =>
-						`.${classes[path.basename(e, EXTENSION)][s]} /* ${s} */`,
-				}),
-			).process(readFile(path.join(SRC_DIR, e)), {
+			usePostcss({
+				match: /#(\w+)/g,
+				replace: (_, s) => {
+					const mod = classes[name];
+					if (!mod) {
+						console.log("[%s] no such module", name);
+						return;
+					}
+
+					const id = mod[s];
+					if (!id) {
+						console.log("[%s] %o is undefined", name, `#${s}`);
+						return;
+					}
+
+					return `.${id} /* ${s} */`;
+				},
+			}).process(readFile(path.join(SRC_DIR, e)), {
 				from: path.join(SRC_DIR, e),
 			}),
 		]);
@@ -42,7 +46,5 @@ export async function execute() {
 	for (const [file, result] of parsedCss) {
 		fs.mkdirSync(path.join(DIST_DIR, path.dirname(file)), { recursive: true });
 		fs.writeFileSync(path.join(DIST_DIR, file), (await result).css);
-
-		console.log("Compiled %o", file);
 	}
 }

package/lib/replace_old_classes.js

@@ -0,0 +1,69 @@
+import fs from "node:fs";
+import { CLASS_MAP_FILE, readFile, usePostcss } from "../shared.js";
+
+const OLD_CLASS_MAP_FILE = `old_${CLASS_MAP_FILE}`;
+
+if ([CLASS_MAP_FILE, OLD_CLASS_MAP_FILE].some((e) => !fs.existsSync(e))) {
+	console.log("Usage:");
+	console.log(
+		"1. Run %o on stable Steam.",
+		"npx steam-theming-utils build_class_modules",
+	);
+	console.log("2. Move %o to %o.", CLASS_MAP_FILE, OLD_CLASS_MAP_FILE);
+	console.log("3. Run the same command on beta Steam.");
+	process.exit(1);
+}
+
+const selectorReplacerPlugin = (opts) => (css) => {
+	css.walkRules((rule) => {
+		rule.selector = rule.selector.replace(opts.match, opts.replace);
+	});
+};
+selectorReplacerPlugin.postcss = true;
+
+const cwd = process.cwd();
+const oldClasses = JSON.parse(fs.readFileSync(OLD_CLASS_MAP_FILE));
+const newClasses = JSON.parse(fs.readFileSync(CLASS_MAP_FILE));
+const modules = Object.keys(oldClasses);
+const keys = modules
+	.map((e) => ({ [e]: Object.keys(oldClasses[e]) }))
+	.reduce((a, b) => Object.assign(a, b));
+
+function findNewClassFromOld(oldName) {
+	for (const mod of modules) {
+		const className = keys[mod].find((e) => oldClasses[mod][e] === oldName);
+		const newName = newClasses[mod]?.[className];
+		if (!newName) {
+			continue;
+		}
+
+		if (oldName !== newName) {
+			console.log("Changed %o to %o", oldName, newName);
+		}
+
+		return `.${newName}`;
+	}
+
+	return `.${oldName}`;
+}
+
+export async function execute() {
+	const parsedCss = fs
+		.readdirSync(cwd, { recursive: true })
+		.filter((e) => e.endsWith(".css"))
+		.map((e) => [
+			e,
+			usePostcss({
+				match: /\.([\w-]+)/g,
+				replace: (_, s) => findNewClassFromOld(s),
+			}).process(readFile(e), {
+				from: e,
+			}),
+		]);
+
+	for (const [file, result] of parsedCss) {
+		fs.writeFileSync(file, (await result).css);
+
+		console.log("[%s] done", file);
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "steam-theming-utils",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "A collection of scripts for easier Steam theming",
   "repository": {
     "type": "git",

package/shared.js

@@ -1,8 +1,16 @@
 import cdp from "chrome-remote-interface";
 import fs from "node:fs";
 import path from "node:path";
+import postcss from "postcss";
 import { fileURLToPath } from "node:url";
 
+const selectorReplacerPlugin = (opts) => (css) => {
+	css.walkRules((rule) => {
+		rule.selector = rule.selector.replace(opts.match, opts.replace);
+	});
+};
+selectorReplacerPlugin.postcss = true;
+
 export const connection = await cdp({
 	host: "127.0.0.1",
 	port: 8080,
@@ -24,7 +32,7 @@ export const SCRIPT_PATH = path.join(packagePath, "lib");
 
 export const readFile = (file) => fs.readFileSync(file).toString();
 export const readScript = async (name) =>
-	await import(path.join(SCRIPT_PATH, `${name}.js`));
+	await import(`file://${path.join(SCRIPT_PATH, `${name}.js`)}`);
 export const run = async (expression) =>
 	await connection.Runtime.evaluate({
 		expression,
@@ -36,3 +44,4 @@ export const runCdpFile = async (file) =>
 export const runWithResult = async (expression) =>
 	(await run(expression)).result.value;
 export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+export const usePostcss = (opts) => postcss(selectorReplacerPlugin(opts));