steam-theming-utils 2.0.1 → 3.0.0

package/README.md

@@ -1,23 +1,51 @@
 # steam-theming-utils
 
-A collection of scripts for easier (and futureproof) Steam theming.
+A collection of scripts for easier (and future-proof) Steam theming.
 
 ## Usage
 
 ```sh
 $ npm i steam-theming-utils
-$ npx steam-theming-utils <script>
+$ npx steam-theming-utils <script> <page>
 ```
 
 Note that running any script requires Steam running with `-cef-enable-debugging`.
 
-## Script list
+## Scripts
 
-| 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. ![Preview](./img/readable_classes.png) |
-| replace_old_classes   | Replaces old classes with new ones for themes not using the [template][template].               |
+| Name                  | Description                                                                               |
+| --------------------- | ----------------------------------------------------------------------------------------- |
+| build_class_modules   | Generates a class map file for usage with other scripts.                                  |
+| make_readable_classes | Adds readable versions of classes to the focused window/page. ![Preview][classes-preview] |
+| replace_old_classes   | Replaces old classes with new ones for themes not using the [template][template].         |
 
+## Pages
+
+| Name               | Description                                                                  |
+| ------------------ | ---------------------------------------------------------------------------- |
+| apppage            | Related items & controller info in https://store.steampowered.com/app/666220 |
+| accountpreferences | https://store.steampowered.com/account                                       |
+| client             | The Steam client. The default.                                               |
+| gameslist          | https://steamcommunity.com/my/games                                          |
+| notificationspage  | https://steamcommunity.com/my/notifications                                  |
+| profileedit        | https://steamcommunity.com/my/edit                                           |
+| shoppingcart       | https://store.steampowered.com/cart                                          |
+
+## Errors
+
+| Name                      | Description                                                                                       |
+| ------------------------- | ------------------------------------------------------------------------------------------------- |
+| #ClassName is undefined   | Typo or that class either got renamed or removed, and so you will have to update it yourself.     |
+| [mod_name] no such module | Typo or that module either got renamed or removed, see diffs [here][diffs] depending on the page. |
+| [map_name] no such map    | Use `npx steam-theming-utils build_class_modules map_name` to create it.                          |
+
+## Config
+
+Configured through a `steam-theming-utils.config.js` (or the one from [here][config-files]) file that must `export default` an [object][config-docs]. It's optional and has defaults listed [here][config-defaults].
+
+[classes-preview]: ./img/readable_classes.png
+[config-defaults]: https://github.com/ricewind012/steam-theming-utils/blob/master/src/constants.js#L7-L11
+[config-docs]: https://github.com/ricewind012/steam-theming-utils/blob/master/src/api.d.ts#L4-L16
+[config-files]: https://github.com/cosmiconfig/cosmiconfig#usage-for-end-users
+[diffs]: https://github.com/ricewind012/steam-theming-utils/tree/master/cdp/db
 [template]: https://github.com/ricewind012/more-advanced-theme-template

package/cdp/class_modules.js

@@ -1,8 +1,8 @@
 classModules = {
-	...specialModules,
-	...parsedModules
-		.map((e) => ({ [e[0]]: e[1] }))
-		.reduce((a, b) => Object.assign(a, b)),
+	...(window.specialModules || {}),
+	...(window.parsedModules
+		?.map((e) => ({ [e[0]]: e[1] }))
+		.reduce((a, b) => Object.assign(a, b)) || {}),
 	...exportedModules
 		.flatMap((a) => {
 			const mod = findFirstModule(a[1], a[0]);

package/cdp/class_modules_webpack.js

@@ -1,6 +1,7 @@
 let initReq;
 const webpackCache = {};
-window.webpackChunksteamui.push([
+const webpackGlobal = Object.keys(window).find((e) => e.startsWith("webpack"));
+window[webpackGlobal].push([
 	[Math.random()],
 	{},
 	(r) => {

package/cdp/db/accountpreferences.js

@@ -0,0 +1,11 @@
+// Note that every module is only available on the "family management" page.
+exportedModules = [
+	["authorizeddevices", (e) => e.AuthorizedDeviceGroup],
+	["cookies", (e) => e.CookieSection],
+	["familymanagement", (e) => e.FamilySettingsContainer],
+	["familymanagementtabs", (e) => e.GraphicalAssetsTabs],
+	// TODO: shared with steam settings notif page
+	["notifications", (e) => e.NotificationSection],
+	// TODO: gamepaddialog
+	["toggle", (e) => e.Field],
+];

package/cdp/db/apppage.js

@@ -0,0 +1,12 @@
+exportedModules = [
+	["storeitemscarousel", (e) => e.StoreItemsCarousel],
+	["capsule", (e) => e.MainCapsuleImageContainer],
+	["capsulecontainer", (e) => e.ItemCount1],
+	["carousel", (e) => e.pipScrollerContainer],
+	["creatorhome", (e) => e.FollowBtnText],
+	["creatorhomecarousel", (e) => e.CreatorHomeWithItems],
+	["focusring", (e) => e.FocusRingRoot],
+	["gamehover", (e) => e.GameHoverCapsuleCtn],
+	["scrollsnapcarousel", (e) => e.ScrollSnapCarousel],
+	["sidebarcontrollerinfo", (e) => e.StoreSidebarContainer],
+];

package/cdp/{class_modules_db.js → db/client.js}

@@ -44,14 +44,9 @@ specialModules = {
 	window.parsedModules = [
 		...(
 			await Promise.all(
-				[
-					"awardicon",
-					"broadcast",
-					"chunk~1a96cdf59", // Also broadcast
-					"gamenotes",
-					"gamerecording",
-				].map(async (e) =>
-					(await fetch(`https://steamloopback.host/${e}.js`)).text(),
+				["awardicon", "broadcast", "gamenotes", "gamerecording"].map(
+					async (e) =>
+						(await fetch(`https://steamloopback.host/${e}.js`)).text(),
 				),
 			)
 		)
@@ -67,8 +62,6 @@ specialModules = {
 					return "awardicon";
 				case exists("PopOutVideoTitleBar"):
 					return "broadcastembeddable";
-				case exists("BroadcastPlayerLite"):
-					return "broadcastplayer";
 				case exists("StoreSaleImage_mini"):
 					return "broadcastwidgets";
 				case exists("ClipUploadStatus"):
@@ -78,7 +71,7 @@ specialModules = {
 				case exists("GameNotesPopup"):
 					return "gamenotespopups";
 				case exists("ClipSavedHint"):
-					return "gamerecording";
+					return "gamerecordingclip";
 				case exists("LinkHelp"):
 					return "pmhover";
 				case exists("CommandButton"):
@@ -124,7 +117,8 @@ exportedModules = [
 	["appdetailsfriendssection", (e) => e.FriendsOverflow],
 	["appdetailsgameinfocontainer", (e) => e.GameInfoShadow],
 	["appdetailsgameinfopanel", (e) => e.GameDescription],
-	["appdetailsheader", (e) => e.AppDetailsHeader],
+	["appdetailsheader", (e) => e.AppDetailsOverviewPanel],
+	["appdetailsheaderinfo", (e) => e.HeaderFriendsInGameBadge],
 	["appdetailshover", (e) => e.AppDetailsHover],
 	["appdetailsinvalidostype", (e) => e.InvalidOSTypeBody],
 	["appdetailsmastersubincluded", (e) => e.IncludedBanner],
@@ -175,10 +169,13 @@ exportedModules = [
 	["bluetoothsettings", (e) => e.NotConnectedLabel && e.Header],
 	["borrowgamedialog", (e) => e.BorrowGameDialog],
 	["bottombar", (e) => e.BottomBarContainer],
+	["bottombarprogressbar", (e) => e.loadingBarAnim],
 	["boxcarousel", (e) => e.BoxCarousel],
+	["bpmfriendsuicontainer", (e) => e.FriendsChatsContainer],
 	["broadcastchat", (e) => e.BroadcastChat],
 	["broadcastchatannouncement", (e) => e.GiveawayWinnerBox],
 	["broadcastfirsttime", (e) => e.BroadcastFirstTimeDialog],
+	["broadcastplayer", (e) => e.BroadcastPlayerLite],
 	["broadcastsettings", (e) => e.ConfigureMic],
 	["broadcaststatus", (e) => e.BroadcastStatusBody],
 	["browserviewfindinpage", (e) => e.ControlButton],
@@ -199,39 +196,39 @@ exportedModules = [
 	["clanimagechooser", (e) => e.ImagesOuterContainer],
 	["clanimagepickandresize", (e) => e.Image && Object.keys(e).length === 1],
 	["clipdecorator", (e) => e.ClipDecorator],
-	["clipgolive", (e) => e.GoLiveButton],
 	["clipmanager", (e) => e.ClipActions],
 	["clipplayback", (e) => e.PlaybackControlsCtn],
-	["clipplayheadghost", (e) => e.GhostPlayheadCtn],
+	["clipplaybackscrollbar", (e) => e.ScrollBarCtn],
+	["clipplayheadseekscrubber", (e) => e.GhostPlayheadCtn],
 	["clipplaybackskip", (e) => e.SkipperCtn],
-	["clipplaybacktimeline", (e) => e.ScrollBarCtn],
 	["clipplayhead", (e) => e.PlayHeadContainer && !e.FullMask],
-	["clippostgame", (e) => e.PostGameSummaryClip],
+	["clippostgame", (e) => e.PostGameSummaryHighlightGroup],
 	["clipsbutton", (e) => e.ClipsButtonContainer],
 	["cliptimeline", (e) => e.GamepadTimelineContainer],
-	["cliptimelinebuffer", (e) => e.LiveRecordingBuffer],
+	["cliptimelinebackgroundticks", (e) => e.TimeTick],
 	["cliptimelinecontextmenu", (e) => e.TimelineContextMenuItem],
-	["cliptimelinegamemode", (e) => e.GameModeMarker],
+	["cliptimelinedatedecorator", (e) => e.TimelineRelativeDate],
+	["cliptimelinegamemodes", (e) => e.GameModeMarker],
 	["cliptimelinemarker", (e) => e.MarkerBacking],
 	["cliptimelinemarkercontainer", (e) => e.TimelineMarkerCtn],
-	["cliptimelinerelativedate", (e) => e.TimelineRelativeDate],
-	["cliptimelinetick", (e) => e.TimeTick],
+	["cliptimelinerangeselector", (e) => e.TrackRangeControls && !e.ActiveCtn],
+	["cliptimelinerecordingdecorator", (e) => e.LiveRecordingBuffer],
 	["cloudconflict", (e) => e.ConflictChoiceText],
 	["cloudfileuploadprogress", (e) => e.UploadPreviewContainer],
 	["collapseicon", (e) => e.CollapseIconParent],
 	["collectionbanner", (e) => e.CollectionShelfBanner],
 	["collectionview", (e) => e.DynamicCollectionLabelAndButton],
 	["colorsettings", (e) => e.FloatingControls],
-	["comment_thread", (e) => e.ActivityCommentThread],
+	["commentthread", (e) => e.ActivityCommentThread],
 	["console", (e) => e.Console],
 	["contentmanagement", (e) => e.ContentManagement],
-	["contextmenu", (e) => e.ContextMenuFocusContainer],
+	["contextmenu", (e) => e.ContextMenuMouseOverlay],
 	["controllerconfigurator", (e) => e.ControllerConfiguratorActionSetSelector],
 	[
-		"controllerconfigurator_interstitial",
+		"controllerconfiguratorinterstitial",
 		(e) => e.ConfiguratorInterstitialContainer,
 	],
-	["controllerconfigurator_mouseposition", (e) => e.BackgroundScreenshot],
+	["controllerconfiguratormouseposition", (e) => e.BackgroundScreenshot],
 	[
 		"controllerconfiguratoractionsetselector",
 		(e) => e.ActionSetNameOverIndicators,
@@ -243,11 +240,11 @@ exportedModules = [
 	["controllerconfiguratorsummary", (e) => e.StandardControl],
 	["controllerconfiguratorvirtualmenus", (e) => e.VirtualMenus],
 	[
-		"controllerconfiguratorvisualizer_deadzones",
+		"controllerconfiguratorvisualizerdeadzones",
 		(e) => e.VisualizerCenterXOffset,
 	],
 	["controllersettings", (e) => e.ControllerName],
-	["controllersettings_devicecalibration", (e) => e.CalibrationButton],
+	["controllersettingsdevicecalibration", (e) => e.CalibrationButton],
 	["creatorhomeembed", (e) => e.DevSummaryCtn],
 	["cropmodal", (e) => e.CropImage],
 	["cssgrid", (e) => e.CSSGrid],
@@ -263,12 +260,12 @@ exportedModules = [
 	["desktopsecuritysettings", (e) => e.SteamGuardIcon],
 	["desktoptoasts", (e) => e.DesktopToastPopup],
 	["dialogs", (e) => e.DialogTitle && e.DialogContent],
-	["discoveryqueuewidget", (e) => e.DiscoveryQueueCarousel],
+	["discoveryqueuewidget", (e) => e.DiscoveryQueueApp],
 	["discoveryqueuewizard", (e) => e.DeckVerifiedLogo],
 	["discussionwidget", (e) => e.DiscussContainer],
 	["displayscaledialog", (e) => e.YouCanChangeThisLater],
 	["displaysettings", (e) => e.TimeRangeControls && !e.BandwidthInput],
-	["downloadgraph", (e) => e.DownloadGraph],
+	["downloadgraph", (e) => e.DownloadGraphStats],
 	["downloads", (e) => e.InProgress],
 	["downloadsettings", (e) => e.BandwidthLimit],
 	["draganddrop", (e) => e.GhostContainer],
@@ -294,7 +291,7 @@ exportedModules = [
 	["familysettings", (e) => e.AuthorizeUserField],
 	["familysharedcomponents", (e) => e.FamilyMemberRowTop],
 	["fastscrolloverlay", (e) => e.FastScrollOverlay],
-	["focusring", (e) => e.FocusRing],
+	["focusring", (e) => e.FocusRingRoot],
 	["footer", (e) => e.BasicFooter],
 	["footericons", (e) => e.Knockout],
 	["friendinvites", (e) => e.IncomingInvites],
@@ -332,17 +329,19 @@ exportedModules = [
 	["gamepadtabbedpage", (e) => e.CanBeHeaderBackground],
 	["gamepadtoasts", (e) => e.GamepadToastPlaceholder],
 	["gamepadui", (e) => e.GamepadUIPopupWindowBody],
-	["gamepadui_svg_library", (e) => e.WifiBar1],
+	["gamepaduisvglibrary", (e) => e.WifiBar1],
 	["gamepaduiappoverlay", (e) => e.OverlayPosition],
 	["gamepaduiappoverlayvirtualmenucontainer", (e) => e.VirtualMenuContainer],
 	["gamerecordingaudiosessionfield", (e) => e.VU],
+	["gamerecordingbitrate", (e) => e.BitrateButton],
 	["gamerecordingdesktopdialog", (e) => e.GameRecordingDesktopDialog],
 	["gamerecordingplayer", (e) => e.GameRecordingPlayer],
-	["gamerecordingplayermouselistener", (e) => e.MouseListenerContainer],
 	["gamerecordingquickaccess", (e) => e.BackgroundRecordingQuickSettingRow],
 	["gamerecordingsettings", (e) => e.RecordingMode],
 	["gamerecordingshare", (e) => e.ExportProgressContainer],
 	["gamerecordingtour", (e) => e.TourBox],
+	["gamerecordingwarning", (e) => e.WarningBox && !e.VU],
+	["golivebutton", (e) => e.GoLiveButton],
 	["guidedtour", (e) => e.PageIndicator],
 	["gyroscopenoisebar", (e) => e.RotateChilden],
 	["hardwaresurveydialog", (e) => e.HardwareSurveySections],
@@ -397,7 +396,9 @@ exportedModules = [
 	["messages", (e) => e.MsgWithAddons],
 	["miniprofile", (e) => e.playerContent],
 	["modals", (e) => e.BodyNoScroll],
+	["mouselistenercontainer", (e) => e.MouseListenerContainer],
 	["moveappsdialog", (e) => e.MoveAppsDialog],
+	["multiselectactions", (e) => e.MultiSelectActionDialogContainer],
 	["mustupdateclientdialog", (e) => e.MustUpdateClientModalContent],
 	["networkconnectiondialog", (e) => e.ConnectionStatus],
 	["networkdiagnosticsdialog", (e) => e.ColumnDisplayName],
@@ -419,7 +420,8 @@ exportedModules = [
 	["overlaydialogs", (e) => e.Invited],
 	["overlayguides", (e) => e.GuidesHomeHeaderDesc],
 	["overlaytimeline", (e) => e.KeyboardCapture],
-	["overlaytimelinecontainer", (e) => e.OverlayPopup && !e.BackgroundRecording],
+	["overlaytimelinecontainer", (e) => e.OverlayPopup && e.BackgroundRecording],
+	["overlaytimelinepreview", (e) => e.ThumbnailHitBoxPadding],
 	["overlaytimer", (e) => e.OverlayClock],
 	["pageablecontainer", (e) => e.HeaderPageControls],
 	["pagedcontent", (e) => e.NavTitle],
@@ -462,11 +464,11 @@ exportedModules = [
 	["reactions", (e) => e.ReactorName],
 	["recentchatssteamdeck", (e) => e.RecentChatsList],
 	["recentlycompleted", (e) => e.RecentlyCompleted],
-	["recordingicon", (e) => e.RecordingIconContainer],
 	["reloadingdialog", (e) => e.Popup && Object.keys(e).length === 1],
 	["remainderlist", (e) => e.ItemWrapper],
 	["remoteplay", (e) => e.ContentForm],
 	["remoteplaydialog", (e) => e.SegmentedInput && Object.keys(e).length === 3],
+	["remoteplayexplainerdialog", (e) => e.AppStoreContainer],
 	["remoteplaysettings", (e) => e.SubSetting],
 	["removefreeappdialog", (e) => e.RemovingText],
 	["removegamehover", (e) => e.RemoveBoxTransition],
@@ -493,8 +495,9 @@ exportedModules = [
 	["segmentedinputs", (e) => e.SegmentedCharacterInput && !e.Text],
 	["serverbrowserdialog", (e) => e.ServerBrowserDialog],
 	["settings", (e) => e.SettingsDialogSubHeader],
-	["shared_common", (e) => e.v6 && e.AvatarImage],
-	["shared_svg_library", (e) => e.SteamDeckCompatLogo],
+	["sharedcommon", (e) => e.v6 && e.AvatarImage],
+	["sharedsvggamerecordings", (e) => e.RecordingIconContainer],
+	["sharedsvglibrary", (e) => e.SteamDeckCompatLogo],
 	["sharedappdetailsheader", (e) => e.BoxSizerDelete],
 	["sharedialog", (e) => e.ShareButton && e.ShareIcon],
 	["sharescreenshotupload", (e) => e.ShareScreenshotDialog],

package/cdp/db/gameslist.js

@@ -0,0 +1,10 @@
+exportedModules = [
+	// shared
+	["gamehover", (e) => e.ItemHoverSource],
+	["gameslist", (e) => e.Gameslistapp],
+	["entry", (e) => e.GamesListItemContainer],
+	["search", (e) => e.SearchIcon],
+	["rareachievementglow", (e) => e.RareAchievementIconGlowContainerRoot],
+	["remote", (e) => e.RemoteDownloadHeader],
+	["tabs", (e) => e.TabBaseline],
+];

package/cdp/db/notificationspage.js

@@ -0,0 +1,12 @@
+exportedModules = [
+	["notificationspage", (e) => e.NotificationPageCtn],
+	[
+		"notification",
+		(e) =>
+			e.StandardTemplateContainer &&
+			!e.AllNotificationsCommentPlus &&
+			!e.ShortTemplate,
+	],
+	// TODO: has DesktopToastTemplate, BottomBar, etc., wtf?
+	["notificationcontainer", (e) => e.SteamNotificationWrapper],
+];

package/cdp/db/profileedit.js

@@ -0,0 +1,21 @@
+exportedModules = [
+	["avatar", (e) => e.AvatarDialogUploadArea],
+	["avatarcollection", (e) => e.AvatarCollection],
+	["avatarcrop", (e) => e.AvatarCrop],
+	["body", (e) => e.ProfileEditRoot],
+	["favoritebadge", (e) => e.Badge],
+	["favoritegroup", (e) => e.FavoriteGroup],
+	["friendsnooze", (e) => e.SnoozeContainer],
+	["miniprofile", (e) => e.miniProfile],
+	["miniprofilepreview", (e) => e.MiniProfilePreview],
+	["personastatusicons", (e) => e.PersonaStatusIcon],
+	["profilebackground", (e) => e.ProfileBackgroundEquipOption],
+	["profileedit", (e) => e.ProfileEditRoot],
+	["profilemodifier", (e) => e.ProfileModifierPreview],
+	["profilepreview", (e) => e.ProfilePreviewCtn],
+	["profiletheme", (e) => e.ProfileThemePicker],
+	["profilethemecolors", (e) => e.SteamDeckTheme],
+	["shell", (e) => e.ProfileEditStoreLink],
+	["steamavatar", (e) => e.avatarFrame],
+	["summary", (e) => e.summaryTextArea],
+];

package/cdp/db/shoppingcart.js

@@ -0,0 +1,9 @@
+exportedModules = [
+	["shoppingcart", (e) => e.ShoppingCartModal],
+	["shoppingcartcount", (e) => e.ShoppingCartCountCtn],
+	["shoppingcartitem", (e) => e.DropDownThin],
+	["giftrecipient", (e) => e.GiftRecipientPickerFormCtn],
+	["storesalewidget", (e) => e.StoreSalePriceWidget],
+	["tradingcart", (e) => e.TradingCardContainer],
+	["upsell", (e) => e.CartUpsellArea],
+];

package/cdp/make_readable_classes.js

@@ -9,6 +9,8 @@ function getNormalClass(className) {
 
 		return [key, name].join("_");
 	}
+
+	notInDb.push(className);
 }
 
 function normalizeElement(el) {
@@ -21,21 +23,38 @@ function normalizeElement(el) {
 		return;
 	}
 
-	el.setAttribute("data-readableclass", `\n${readableClasses}\n`);
+	el.dataset.readableClass = `\n${readableClasses}\n`;
 }
 
-function onFocus({ target }) {
+function main({ target }) {
 	const elements = target.document.querySelectorAll("[class]");
 	for (const el of elements) {
 		normalizeElement(el);
 	}
 
-	for (const popup of popups) {
-		popup.removeEventListener("focus", onFocus);
+	if (inClient) {
+		for (const popup of popups) {
+			popup.removeEventListener("focus", main);
+		}
+	}
+
+	if (notInDb.length > 0) {
+		const classes = [...new Set(notInDb)];
+		console.error(
+			"%s classes are not in the classes db: %o",
+			classes.length,
+			classes.sort(),
+		);
 	}
 }
 
-popups = [...g_PopupManager.GetPopups()].map((e) => e.m_popup);
-for (const popup of popups) {
-	popup.addEventListener("focus", onFocus);
+inClient = !!SteamClient.User;
+notInDb = [];
+if (inClient) {
+	window.popups = [...g_PopupManager.GetPopups()].map((e) => e.m_popup);
+	for (const popup of popups) {
+		popup.addEventListener("focus", main);
+	}
+} else {
+	main({ target: window });
 }

package/cdp/preload/profileedit.js

@@ -0,0 +1,6 @@
+const elements = document.getElementsByClassName(
+	classModules.profileedit.NavLink,
+);
+for (const btn in elements) {
+	btn.click();
+}

package/lib/build_class_modules.js

@@ -1,26 +1,125 @@
 import fs from "node:fs";
-import cp from "node:child_process";
 import path from "node:path";
-import { runCdpFile, runWithResult, sleep } from "../src/api.js";
-import { CLASS_MAP_FILE } from "../src/constants.js";
+import prettier from "prettier";
+import {
+	connection,
+	config,
+	run,
+	runCdpFile,
+	runWithResult,
+	sleep,
+} from "../src/api.js";
+import { createWebConnection, getPageUrl } from "../src/shared.js";
 
-export async function execute() {
-	const webpackRan = await runWithResult("!!webpackCache");
-	const forceWebpackRerun = await runWithResult("forceDflRerun");
+/**
+ * BrowserView event to listen for on page load.
+ */
+const BROWSER_EVENT = "finished-request";
+
+/**
+ * @type {Record<import("../src/api").Page, string>}
+ */
+const SELECTORS = {
+	accountpreferences: "[data-featuretarget]",
+	gameslist: "[data-featuretarget='gameslist-root']",
+	notificationspage: "#react_root",
+	profileedit: "#react_root",
+	shoppingcart: "[data-featuretarget='react-root']",
+	storeitemscarousel: "[data-featuretarget$='-carousel']",
+};
+
+async function sleepUntilResult(...args) {
+	while (!(await runWithResult(...args))) {
+		await sleep(10);
+	}
+}
+
+/**
+ * Gets a CDP web connection, accounting for the needed React part to load.
+ * @param {import("../src/api").Page | "client"} page
+ */
+async function getWebConn(page) {
+	if (page === "client") {
+		return null;
+	}
+
+	const openedConn = await createWebConnection(page).catch(() => {});
+	if (openedConn) {
+		return openedConn;
+	}
+
+	const { url } = await getPageUrl(page);
+	await run(`
+		function onFinishedRequest() {
+			window._finished = true;
+			browser.off("${BROWSER_EVENT}", onFinishedRequest);
+		}
+
+		browser = SteamClient.BrowserView.Create();
+		browser.LoadURL("${url}");
+		browser.on("${BROWSER_EVENT}", onFinishedRequest);
+	`);
+
+	console.log("Waiting for page load...");
+	await sleepUntilResult("window._finished");
+	const conn = await createWebConnection(page).catch((e) => {
+		console.log("%s\nNo page whose URL is %o has been found.", e.message, url);
+		process.exit(1);
+	});
+
+	const selector = `${SELECTORS[page]}:not(:empty)`;
+	const expression = `!!document.querySelector("${selector}")`;
+	console.log("Waiting for %o selector...", selector);
+	await sleepUntilResult(expression, conn);
+
+	return conn;
+}
+
+/**
+ * @param {import("../src/api").Page} page
+ * @param {import("chrome-remote-interface").Client} conn
+ */
+async function doTheThing(page, conn) {
+	const webpackRan = await runWithResult("!!webpackCache", conn);
+	const forceWebpackRerun = await runWithResult("forceWebpackRerun", conn);
+	const preloadFile = path.join("preload", `${page}.js`);
 	if (!webpackRan || forceWebpackRerun) {
-		await runCdpFile("class_modules_webpack.js");
+		await runCdpFile("class_modules_webpack.js", conn);
+	}
+	if (fs.existsSync(preloadFile)) {
+		await runCdpFile(preloadFile, conn);
 	}
-	await runCdpFile("class_modules_db.js");
+	await runCdpFile(path.join("db", `${page}.js`), conn);
+
+	const dirPath = path.join(process.cwd(), config.classMaps);
+	const filePath = path.join(dirPath, `${page}.json`);
 
-	const filePath = path.join(process.cwd(), CLASS_MAP_FILE);
-	// Sleep for a bit to not error on first launch.
-	await sleep(10);
-	const output = await runCdpFile("class_modules.js");
+	const output = await runCdpFile("class_modules.js", conn);
 	const [classModules, allModules] = await runWithResult(
 		"[Object.keys(classModules).length, allModules.length]",
+		conn,
 	);
 
-	fs.writeFileSync(filePath, JSON.stringify(output));
-	cp.spawnSync("npx", ["@biomejs/biome", "format", "--write", filePath]);
+	const content = await prettier.format(JSON.stringify(output), {
+		parser: "json-stringify",
+	});
+	fs.mkdirSync(dirPath, { recursive: true });
+	fs.writeFileSync(filePath, content);
 	console.log("Wrote %s/%s modules to %o", classModules, allModules, filePath);
 }
+
+export async function execute(page = "client") {
+	const isClient = page === "client";
+	const webConn = await getWebConn(page);
+
+	const conn = isClient ? connection : webConn;
+	await doTheThing(page, conn);
+
+	webConn?.close();
+	if (!isClient) {
+		await run(`
+			window._finished = false;
+			SteamClient.BrowserView.Destroy(browser);
+		`);
+	}
+}

package/lib/make_readable_classes.js

@@ -1,9 +1,16 @@
-import { readScript, runCdpFile } from "../src/api.js";
+import { connection, readScript, runCdpFile } from "../src/api.js";
+import { createWebConnection } from "../src/shared.js";
+
+export async function execute(page = "client") {
+	const isClient = page === "client";
+	const webConn = isClient ? null : await createWebConnection(page);
+	const conn = isClient ? connection : webConn;
 
-export async function execute() {
 	const script = await readScript("build_class_modules");
-	await script.execute();
+	await script.execute(page);
 
-	console.log("Waiting for focus...");
-	await runCdpFile("make_readable_classes.js");
+	if (isClient) {
+		console.log("Waiting for focus...");
+	}
+	await runCdpFile("make_readable_classes.js", conn);
 }

package/lib/replace_old_classes.js

@@ -1,9 +1,11 @@
 import fs from "node:fs";
 import postcss from "postcss";
-import { CLASS_MAP_FILE } from "../src/constants.js";
+import { config } from "../src/api.js";
 import { readFile, selectorReplacerPlugin } from "../src/shared.js";
 
-const OLD_CLASS_MAP_FILE = `old_${CLASS_MAP_FILE}`;
+const CLASS_MAP_FILE = path.join(config.classMaps, "client.json");
+const OLD_CLASS_MAP_FILE = path.join(config.classMaps, "client_old.json");
+const SELECTOR = /\.([\w-]+)/g;
 
 if ([CLASS_MAP_FILE, OLD_CLASS_MAP_FILE].some((e) => !fs.existsSync(e))) {
 	console.log("Usage:");
@@ -43,24 +45,22 @@ function findNewClassFromOld(oldName) {
 }
 
 export async function execute() {
-	const parsedCss = fs
+	const files = fs
 		.readdirSync(cwd, { recursive: true })
-		.filter((e) => e.endsWith(".css"))
-		.map((e) => [
-			e,
-			postcss([
-				selectorReplacerPlugin({
-					match: /\.([\w-]+)/g,
-					replace: (_, s) => findNewClassFromOld(s),
-				}),
-			]).process(readFile(e), {
-				from: e,
+		.filter((e) => e.endsWith(".css"));
+	for (const file of files) {
+		postcss([
+			selectorReplacerPlugin({
+				match: SELECTOR,
+				replace: (_, s) => findNewClassFromOld(s),
 			}),
-		]);
-
-	for (const [file, result] of parsedCss) {
-		fs.writeFileSync(file, (await result).css);
-
-		console.log("[%s] done", file);
+		])
+			.process(readFile(file), {
+				from: file,
+			})
+			.then(({ css }) => {
+				fs.writeFileSync(file, css);
+				console.log("[%s] done", file);
+			});
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "steam-theming-utils",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "A collection of scripts for easier Steam theming",
   "repository": {
     "type": "git",
@@ -12,12 +12,13 @@
   },
   "types": "./src/api.d.ts",
   "exports": {
-    ".": "./src/api.js"
+    ".": "./src/api.js",
+    "./postcss-plugin": "./src/postcss_plugin.js"
   },
   "dependencies": {
-    "@biomejs/biome": "^1.9.0",
     "chrome-remote-interface": "^0.33.2",
-    "postcss": "^8.4.39",
-    "postcss-load-config": "^6.0.1"
+    "lilconfig": "^3.1.2",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.1"
   }
 }

package/src/api.d.ts

@@ -1,7 +1,23 @@
+import type CDP from "chrome-remote-interface";
 import type Protocol from "devtools-protocol";
 
+export interface Config {
+	/**
+	 * Path of built class maps.
+	 */
+	classMaps: string;
+
+	/**
+	 * Directories for the postcss plugin to ignore.
+	 *
+	 * For example: `["client/shared", "web/vars"]` will ignore
+	 * `src/client/shared` and `src/web/vars`, assuming the base dir is `src`.
+	 */
+	ignore: string[];
+}
+
 interface Script {
-	execute(): Promise<void>;
+	execute(arg?: string): Promise<void>;
 }
 
 /**
@@ -9,10 +25,22 @@ interface Script {
  */
 type ScriptFile =
 	| "build_class_modules"
-	| "build_theme"
 	| "make_readable_classes"
 	| "replace_old_classes";
 
+/**
+ * Pages that have an existing class map, excluding `client`.
+ */
+export type Page =
+	| "accountpreferences"
+	| "apppage"
+	| "gameslist"
+	| "notificationspage"
+	| "profileedit"
+	| "shoppingcart";
+
+export declare const config: Config;
+
 /**
  * @param file The script to read.
  */
@@ -23,6 +51,7 @@ export function readScript(name: ScriptFile): Promise<Script>;
  */
 export function run(
 	expression: string,
+	conn?: CDP.Client,
 ): Promise<Protocol.Runtime.EvaluateResponse>;
 
 /**
@@ -30,6 +59,7 @@ export function run(
  */
 export function runCdpFile(
 	file: ScriptFile,
+	conn?: CDP.Client,
 ): Promise<Protocol.Runtime.EvaluateResponse>;
 
 /**
@@ -38,6 +68,9 @@ export function runCdpFile(
  *
  * @param expression JS to run.
  */
-export function runWithResult(expression: string): Promise<any>;
+export function runWithResult(
+	expression: string,
+	conn?: CDP.Client,
+): Promise<any>;
 
 export function sleep(ms: number): Promise<void>;

package/src/api.js

@@ -1,33 +1,39 @@
-import cdp from "chrome-remote-interface";
 import path from "node:path";
-import { CDP_FILES_PATH, SCRIPT_PATH } from "./constants.js";
-import { readFile } from "./shared.js";
+import { lilconfig } from "lilconfig";
+import { CDP_FILES_PATH, DEFAULT_CONFIG, SCRIPT_PATH } from "./constants.js";
+import { createConnection, readFile } from "./shared.js";
 
-export const connection = await cdp({
-	host: "127.0.0.1",
-	port: 8080,
-	target: (e) => e.find((e) => e.title === "SharedJSContext"),
-}).catch((e) => {
-	console.log(
-		"%s\n%s %o",
-		e.message,
-		"Try running Steam with",
-		"-cef-enable-debugging",
-	);
-	process.exit(1);
-});
+// postcss-cli hangs because of cdp
+export const connection =
+	path.basename(process.argv[1]) !== "postcss" &&
+	(await createConnection((e) =>
+		e.find((e) => e.title === "SharedJSContext"),
+	).catch((e) => {
+		console.log(
+			"%s\nTry running Steam with %o",
+			e.message,
+			"-cef-enable-debugging",
+		);
+		process.exit(1);
+	}));
 
-export const readScript = async (name) =>
-	await import(`file://${path.join(SCRIPT_PATH, `${name}.js`)}`);
-export const run = async (expression) =>
-	await connection.Runtime.evaluate({
+export const config = Object.assign(
+	DEFAULT_CONFIG,
+	(await lilconfig("steam-theming-utils").search())?.config || {},
+);
+
+export const readScript = (name) =>
+	import(`file://${path.join(SCRIPT_PATH, `${name}.js`)}`);
+
+export const run = (expression, conn = connection) =>
+	conn.Runtime.evaluate({
 		expression,
 		awaitPromise: true,
 		returnByValue: true,
 	});
-export const runCdpFile = async (file) =>
-	await runWithResult(readFile(path.join(CDP_FILES_PATH, file)));
-export const runWithResult = async (expression) =>
-	(await run(expression)).result.value;
+export const runCdpFile = (file, conn = connection) =>
+	runWithResult(readFile(path.join(CDP_FILES_PATH, file)), conn);
+export const runWithResult = async (expression, conn = connection) =>
+	(await run(expression, conn)).result.value;
 
 export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

package/src/constants.js

@@ -1,12 +1,13 @@
 import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const packagePath = path
-	.dirname(fileURLToPath(import.meta.url))
-	.split(path.sep)
-	.slice(0, -1)
-	.join(path.sep);
+import { packagePath } from "./shared.js";
 
 export const CDP_FILES_PATH = path.join(packagePath, "cdp");
-export const CLASS_MAP_FILE = "class_map.json";
 export const SCRIPT_PATH = path.join(packagePath, "lib");
+
+/** @type {import("./api").Config} */
+export const DEFAULT_CONFIG = {
+	classMaps: "class_maps",
+	ignore: [],
+};
+
+export const STORE_BASE_URL = "https://store.steampowered.com";

package/src/index.js

@@ -13,15 +13,6 @@ if (!files.some((e) => process.argv[2] === e)) {
 	process.exit(2);
 }
 
-await connection.Runtime.enable();
-connection.Runtime.on("consoleAPICalled", (ev) => {
-	if (ev.type !== "error") {
-		return;
-	}
-
-	console.error(...ev.args.map((e) => e.description || e.value));
-});
-
 const script = await readScript(process.argv[2]);
-await script.execute();
+await script.execute(process.argv[3]);
 connection.close();

package/src/postcss_plugin.js

@@ -0,0 +1,77 @@
+import fs from "node:fs";
+import path from "node:path";
+// Not a dependency because postcss already depends on it.
+import yargs from "yargs";
+import { config } from "./api.js";
+
+const PAGES = [
+	"accountpreferences",
+	"apppage",
+	"client",
+	"gameslist",
+	"notificationspage",
+	"profileedit",
+	"shoppingcart",
+];
+const SELECTOR = /#(\w+)/g;
+
+const { argv } = yargs(process.argv);
+const cwd = process.cwd();
+const classMap = {};
+
+/**
+ * Gets a class map on demand rather than reading all files at once.
+ * @param {string} page
+ */
+function getClassMap(page) {
+	if (classMap[page]) {
+		return classMap[page];
+	}
+
+	const pagePath = path.join(config.classMaps, `${page}.json`);
+	if (!fs.existsSync(pagePath)) {
+		return;
+	}
+
+	classMap[page] = JSON.parse(fs.readFileSync(pagePath));
+	return classMap[page];
+}
+
+export const selectorReplacerPlugin = () => (css) => {
+	const { file } = css.source.input;
+	const name = path.basename(file, ".scss");
+
+	const splitPath = file.split(path.sep);
+	const page = PAGES.find((e) => splitPath.includes(e));
+	if (!page) {
+		return;
+	}
+
+	const map = getClassMap(page);
+	if (!map) {
+		console.error("[%s] no such map", page);
+		return;
+	}
+
+	const mod = map?.[name];
+	const ignoredPaths = config.ignore || [];
+	const src = path.join(cwd, argv.base);
+	const skipFile = ignoredPaths.some((e) => file.startsWith(path.join(src, e)));
+	if (!mod && !skipFile) {
+		console.error("[%s] no such module", name);
+		return;
+	}
+
+	css.walkRules((rule) => {
+		rule.selector = rule.selector.replace(SELECTOR, (_, s) => {
+			const id = mod[s];
+			if (!id) {
+				console.error("[%s] %o is undefined", name, `#${s}`);
+				return;
+			}
+
+			return `.${id}`;
+		});
+	});
+};
+selectorReplacerPlugin.postcss = true;

package/src/shared.js

@@ -1,4 +1,15 @@
 import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import cdp from "chrome-remote-interface";
+import { runWithResult } from "./api.js";
+import { STORE_BASE_URL } from "./constants.js";
+
+export const packagePath = path
+	.dirname(fileURLToPath(import.meta.url))
+	.split(path.sep)
+	.slice(0, -1)
+	.join(path.sep);
 
 export const readFile = (file) => fs.readFileSync(file).toString();
 
@@ -8,3 +19,84 @@ export const selectorReplacerPlugin = (opts) => (css) => {
 	});
 };
 selectorReplacerPlugin.postcss = true;
+
+/**
+ * @typedef {object} SteamPage
+ *
+ * @property {string} url
+ *   The URL to open if not open already.
+ * @property {RegExp} match
+ *   URL regex to match if there is an open page.
+ */
+
+/**
+ * Gets a page URL for a given page name.
+ * @param {import("./api").Page} page
+ * @returns {Promise<SteamPage>}
+ */
+export async function getPageUrl(page) {
+	const resolve = (name) => runWithResult(`urlStore.ResolveURL("${name}")`);
+	/** @returns {SteamPage} */
+	const pageObj = (url) => ({
+		url,
+		match: new RegExp(`^${url.replace(/\/+$/, "")}`),
+	});
+
+	const profileUrl = await resolve("SteamIDMyProfile");
+	switch (page) {
+		case "accountpreferences":
+			return {
+				url: await resolve("FamilyManagement"),
+				match: new RegExp(`^${STORE_BASE_URL}/account`),
+			};
+		case "apppage":
+			return {
+				url: `${STORE_BASE_URL}/app/666220`,
+				match: new RegExp(`^${STORE_BASE_URL}/app/\\d+`),
+			};
+		case "gameslist":
+			return pageObj(`${profileUrl}games`);
+		case "notificationspage":
+			return pageObj(`${profileUrl}notifications`);
+		case "profileedit":
+			return pageObj(await resolve("SteamIDEditPage"));
+		case "shoppingcart":
+			return pageObj(await resolve("StoreCart"));
+	}
+}
+
+/**
+ * Creates a CDP connection for a given target.
+ * @param {(targets: cdp.Target[]) => cdp.Target} target
+ */
+export async function createConnection(target) {
+	const connection = await cdp({
+		host: "127.0.0.1",
+		port: 8080,
+		target,
+	});
+
+	await connection.Runtime.enable();
+	connection.Runtime.on("consoleAPICalled", (ev) => {
+		if (ev.type !== "error") {
+			return;
+		}
+
+		console.error(...ev.args.map((e) => e.description || e.value));
+	});
+
+	return connection;
+}
+
+/**
+ * Creates a CDP connection for a given page name.
+ * @param {import("./api").Page} page
+ */
+export async function createWebConnection(page) {
+	const { match } = await getPageUrl(page);
+	const connection = await createConnection((e) =>
+		e.find((e) => e.url.match(match)),
+	);
+
+	return connection;
+}

package/lib/build_theme.js

@@ -1,69 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import postcss from "postcss";
-import postcssrc from "postcss-load-config";
-import { readScript } from "../src/api.js";
-import { CLASS_MAP_FILE } from "../src/constants.js";
-import { readFile, selectorReplacerPlugin } from "../src/shared.js";
-
-const cwd = process.cwd();
-const DIST_DIR = path.join(cwd, "dist");
-const EXTENSION = ".css";
-const SRC_DIR = path.join(cwd, "src");
-
-export async function execute() {
-	if (!fs.existsSync(path.join(cwd, CLASS_MAP_FILE))) {
-		const script = await readScript("build_class_modules");
-		await script.execute();
-	}
-
-	const classes = JSON.parse(fs.readFileSync(CLASS_MAP_FILE));
-	// TODO:
-	// Can't use SASS here - screams at me with "Please check the validity
-	// of the block starting from line #1" with a completely valid SCSS syntax.
-	const { plugins, options } = await postcssrc();
-	const parsedCss = fs
-		.readdirSync(SRC_DIR, { recursive: true })
-		.filter((e) => e.endsWith(EXTENSION))
-		.map((e) => [e, path.basename(e, EXTENSION)])
-		.map(([e, name]) => [
-			e,
-			postcss([
-				selectorReplacerPlugin({
-					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} */`;
-					},
-				}),
-				...plugins,
-			]).process(readFile(path.join(SRC_DIR, e)), {
-				...options,
-				from: path.join(SRC_DIR, e),
-				to: path.join(DIST_DIR, e),
-			}),
-		]);
-
-	fs.rmSync(DIST_DIR, { force: true, recursive: true });
-	for (const [file, result] of parsedCss) {
-		const { css, map } = await result;
-		const distFile = path.join(DIST_DIR, file);
-
-		fs.mkdirSync(path.dirname(distFile), { recursive: true });
-		fs.writeFileSync(distFile, css);
-		if (map) {
-			fs.writeFileSync(`${distFile}.map`, map.toString());
-		}
-	}
-}