content: generateColorStyleVariables

2 files changed, 47 insertions, 28 deletions

diff --git a/src/content/dependencies/generateColorStyleRules.js b/src/content/dependencies/generateColorStyleRules.js
index 44600935..fbc32599 100644
--- a/src/content/dependencies/generateColorStyleRules.js
+++ b/src/content/dependencies/generateColorStyleRules.js
@@ -1,40 +1,26 @@
 export default {
-  extraDependencies: [
-    'getColors',
+  contentDependencies: [
+    'generateColorStyleVariables',
   ],
 
-  data(color) {
-    return {color};
-  },
+  relations(relation, color) {
+    const relations = {};
 
-  generate(data, {
-    getColors,
-  }) {
-    if (!data.color) return '';
+    if (color) {
+      relations.variables =
+        relation('generateColorStyleVariables', color);
+    }
 
-    const {
-      primary,
-      dark,
-      dim,
-      dimGhost,
-      bg,
-      bgBlack,
-      shadow,
-    } = getColors(data.color);
+    return relations;
+  },
 
-    const variables = [
-      `--primary-color: ${primary}`,
-      `--dark-color: ${dark}`,
-      `--dim-color: ${dim}`,
-      `--dim-ghost-color: ${dimGhost}`,
-      `--bg-color: ${bg}`,
-      `--bg-black-color: ${bgBlack}`,
-      `--shadow-color: ${shadow}`,
-    ];
+  generate(relations) {
+    if (!relations.variables) return '';
 
     return [
       `:root {`,
-      ...variables.map((line) => `    ${line};`),
+      // This is pretty hilariously hacky.
+      ...relations.variables.split(';').map(line => line + ';'),
       `}`,
     ].join('\n');
   },
diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js
new file mode 100644
index 00000000..90346d8d
--- /dev/null
+++ b/src/content/dependencies/generateColorStyleVariables.js
@@ -0,0 +1,33 @@
+export default {
+  extraDependencies: [
+    'getColors',
+  ],
+
+  data(color) {
+    return {color};
+  },
+
+  generate(data, {getColors}) {
+    if (!data.color) return [];
+
+    const {
+      primary,
+      dark,
+      dim,
+      dimGhost,
+      bg,
+      bgBlack,
+      shadow,
+    } = getColors(data.color);
+
+    return [
+      `--primary-color: ${primary}`,
+      `--dark-color: ${dark}`,
+      `--dim-color: ${dim}`,
+      `--dim-ghost-color: ${dimGhost}`,
+      `--bg-color: ${bg}`,
+      `--bg-black-color: ${bgBlack}`,
+      `--shadow-color: ${shadow}`,
+    ].join('; ');
+  },
+};