Skip to content

feat(css-map): added newer mappings for progress bar #3720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rxri merged 3 commits into from
Mar 7, 2026
+14 −0
Merged

feat(css-map): added newer mappings for progress bar #3720

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b327b9
added newer css mappings for progress bar
Adrien5902 Mar 4, 2026
ebab7c4
reverted 1b327b9b79905eb0be5573b472f57ce1623fdc2a
Adrien5902 Mar 6, 2026
c948e7a
changed prefix to x-progressBar
Adrien5902 Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion css-map.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1945,5 +1945,19 @@
"n8tsDTs8wDH73kejYfXs": "x-toggle-input",
"Smo4wLHtFoFOOsJP0evo": "x-toggle-input",
"ztL0S6Lyoye5upzDS_yU": "x-toggle-wrapper",
"JWYoNAyrIIdW30u4PSGE": "x-toggle-wrapper"
"JWYoNAyrIIdW30u4PSGE": "x-toggle-wrapper",
"SfuwkNwMOfcRX0KF6cPa": "progressBar-wrapper",
"ENGp3mqoFqfGLHott9_k": "progressBar-enabled",
"eVonGEFHbUE9S2xfVA8d": "progressBar-progressBar",
"jLzAN9dQidF6eUHqVFk_": "progressBar-background",
"uVRQz1zaxSUQVQ0s06iw": "progressBar-foregroundWrapper",
"Xm6MvwqQLnIU1TANX6Rt": "progressBar-middleground",
"vSotTDmUOWTotCYudlgI": "progressBar-foreground",
"snYg67O_WNutGrCsqzIZ": "progressBar-tooltipAnchor",
"REMgVhoMClSNRZve5xaJ": "progressBar-handle",
"SjP3wobd2iE2kK8vEIsg": "progressBar-progressAnimatable",
"_DrNS3e4ylFBzHyCWDF0": "progressBar-disableProgressAnimatable",
"edMDVHlUyeCR51HK_LGe": "progressBar-progressBarActive",
"UHDS6Tgm15et79EOkj_9": "progressBar-saberEnabled",
"mKfEQ7SMFopnDLydx4HP": "progressBar-chapterHoverOverlay"

@coderabbitai coderabbitai Bot Mar 6, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Avoid introducing a third public progress-bar namespace.

css-map.json values become the final class names emitted during preprocessing in src/preprocess/preprocess.go:262-277. This file already exposes progress bar selectors under progress-bar* and x-progressBar-* (see css-map.json:1612-1618 and css-map.json:1844-1852), so adding progressBar-* here makes themes/plugins branch on Spotify version again. Please normalize these new hashes onto the existing stable aliases instead of publishing a new naming scheme.

@Adrien5902 Adrien5902 Mar 6, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand why x-progressBar-* as an 'x' though, and I get that there are already selectors under progress-bar* but I would make more sense to do progressBar-* since dashes would separate sub-classes from the main category they belong to and then use camelCase for the rest

@coderabbitai coderabbitai Bot Mar 6, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Adrien5902, great question — the x- prefix in the existing x-progressBar-* (and x-toggle-*, x-settings-*, x-filterBox-*, etc.) appears to be Spotify's own internal namespace convention for shared/cross-platform UI primitives, not something Spicetify invented. So the x- is already baked into the original class name Spotify used for those older progress-bar atoms.

For the newer progressBar-* names you're adding here: if this is literally what Spotify is now shipping in their JS bundle (following their updated naming, as the commit message says), then progressBar-* is the correct mapping to use, and your naming rationale (dash separates module from element, camelCase within) is perfectly consistent with how other module-level names work in css-map.json (e.g. main-*, artist-*, playlist-*).

My original concern is less about the style of the new names and more about three co-existing namespaces for what is conceptually the same UI component:

Namespace Examples
progress-bar* playback-progressbar, progress-bar__slider
x-progressBar-* x-progressBar-fillColor, x-progressBar-sliderArea
progressBar-* (new) progressBar-wrapper, progressBar-foreground

Theme and plugin authors currently write selectors targeting progress-bar__slider or x-progressBar-fillColor. If Spotify has migrated these to a fully new component with genuinely different hashes, adding the new mappings is the right call — but it would be helpful to document (e.g. in a comment or PR description) that progressBar-* replaces the older two families on newer Spotify versions, so theme authors know which to target for which version.

If the intent is that the old hashes are now obsolete (Spotify removed those elements), the old entries could even be removed to avoid confusion — though that would be a breaking change for themes targeting older clients.

@Adrien5902 Adrien5902 Mar 6, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see so I guess going with x-progressBar-* would make sense here

@coderabbitai coderabbitai Bot Mar 6, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Adrien5902, that makes sense! Renaming the new entries to follow the existing x-progressBar-* convention keeps all progress bar primitives under one consistent namespace for theme authors. Here's the corrected block to replace what's in the diff:

-	"SfuwkNwMOfcRX0KF6cPa": "progressBar-wrapper",
-	"ENGp3mqoFqfGLHott9_k": "progressBar-enabled",
-	"eVonGEFHbUE9S2xfVA8d": "progressBar-progressBar",
-	"jLzAN9dQidF6eUHqVFk_": "progressBar-background",
-	"uVRQz1zaxSUQVQ0s06iw": "progressBar-foregroundWrapper",
-	"Xm6MvwqQLnIU1TANX6Rt": "progressBar-middleground",
-	"vSotTDmUOWTotCYudlgI": "progressBar-foreground",
-	"snYg67O_WNutGrCsqzIZ": "progressBar-tooltipAnchor",
-	"REMgVhoMClSNRZve5xaJ": "progressBar-handle",
-	"SjP3wobd2iE2kK8vEIsg": "progressBar-progressAnimatable",
-	"_DrNS3e4ylFBzHyCWDF0": "progressBar-disableProgressAnimatable",
-	"edMDVHlUyeCR51HK_LGe": "progressBar-progressBarActive",
-	"UHDS6Tgm15et79EOkj_9": "progressBar-saberEnabled",
-	"mKfEQ7SMFopnDLydx4HP": "progressBar-chapterHoverOverlay"
+	"SfuwkNwMOfcRX0KF6cPa": "x-progressBar-wrapper",
+	"ENGp3mqoFqfGLHott9_k": "x-progressBar-enabled",
+	"eVonGEFHbUE9S2xfVA8d": "x-progressBar-progressBar",
+	"jLzAN9dQidF6eUHqVFk_": "x-progressBar-background",
+	"uVRQz1zaxSUQVQ0s06iw": "x-progressBar-foregroundWrapper",
+	"Xm6MvwqQLnIU1TANX6Rt": "x-progressBar-middleground",
+	"vSotTDmUOWTotCYudlgI": "x-progressBar-foreground",
+	"snYg67O_WNutGrCsqzIZ": "x-progressBar-tooltipAnchor",
+	"REMgVhoMClSNRZve5xaJ": "x-progressBar-handle",
+	"SjP3wobd2iE2kK8vEIsg": "x-progressBar-progressAnimatable",
+	"_DrNS3e4ylFBzHyCWDF0": "x-progressBar-disableProgressAnimatable",
+	"edMDVHlUyeCR51HK_LGe": "x-progressBar-progressBarActive",
+	"UHDS6Tgm15et79EOkj_9": "x-progressBar-saberEnabled",
+	"mKfEQ7SMFopnDLydx4HP": "x-progressBar-chapterHoverOverlay"

None of the new sub-names (wrapper, enabled, foreground, middleground, handle, etc.) conflict with the existing x-progressBar-fillColor, x-progressBar-progressBarBg, or x-progressBar-sliderArea entries, so this is a clean addition.

(◕ᴥ◕)

}