1 files changed, 43 insertions, 30 deletions

diff --git a/src/content/dependencies/generateAlbumStyleRules.js b/src/content/dependencies/generateAlbumStyleRules.js
index 1acaea17..c5acf374 100644
--- a/src/content/dependencies/generateAlbumStyleRules.js
+++ b/src/content/dependencies/generateAlbumStyleRules.js
@@ -3,14 +3,13 @@ import {empty} from '#sugar';
 export default {
   extraDependencies: ['to'],
 
-  data(album) {
+  data(album, track) {
     const data = {};
 
     data.hasWallpaper = !empty(album.wallpaperArtistContribs);
     data.hasBanner = !empty(album.bannerArtistContribs);
 
     if (data.hasWallpaper) {
-      data.hasWallpaperStyle = !!album.wallpaperStyle;
       data.wallpaperPath = ['media.albumWallpaper', album.directory, album.wallpaperFileExtension];
       data.wallpaperStyle = album.wallpaperStyle;
     }
@@ -20,40 +19,54 @@ export default {
       data.bannerStyle = album.bannerStyle;
     }
 
+    data.albumDirectory = album.directory;
+
+    if (track) {
+      data.trackDirectory = track.directory;
+    }
+
     return data;
   },
 
   generate(data, {to}) {
-    const wallpaperPart =
-      (data.hasWallpaper
-        ? [
-            `body::before {`,
-            `    background-image: url("${to(...data.wallpaperPath)}");`,
-            ...(data.hasWallpaperStyle
-              ? data.wallpaperStyle
-                  .split('\n')
-                  .map(line => `    ${line}`)
-              : []),
-            `}`,
-          ]
-        : []);
+    const indent = parts =>
+      (parts ?? [])
+        .filter(Boolean)
+        .join('\n')
+        .split('\n')
+        .map(line => ' '.repeat(4) + line)
+        .join('\n');
 
-    const bannerPart =
-      (data.hasBannerStyle
-        ? [
-            `#banner img {`,
-            ...data.bannerStyle
-              .split('\n')
-              .map(line => `    ${line}`),
-            `}`,
-          ]
+    const rule = (selector, parts) =>
+      (!empty(parts.filter(Boolean))
+        ? [`${selector} {`, indent(parts), `}`]
         : []);
 
-    return [
-      ...wallpaperPart,
-      ...bannerPart,
-    ]
-      .filter(Boolean)
-      .join('\n');
+    const wallpaperRule =
+      data.hasWallpaper &&
+        rule(`body::before`, [
+          `background-image: url("${to(...data.wallpaperPath)}");`,
+          data.wallpaperStyle,
+        ]);
+
+    const bannerRule =
+      data.hasBanner &&
+        rule(`#banner img`, [
+          data.bannerStyle,
+        ]);
+
+    const dataRule =
+      rule(`:root`, [
+        data.albumDirectory &&
+          `--album-directory: ${data.albumDirectory};`,
+        data.trackDirectory &&
+          `--track-directory: ${data.trackDirectory};`,
+      ]);
+
+    return (
+      [wallpaperRule, bannerRule, dataRule]
+        .filter(Boolean)
+        .flat()
+        .join('\n'));
   },
 };