content: generateColorStyleTag: use generateStyleTag

also change property-list -> declarations

2 files changed, 30 insertions, 26 deletions

diff --git a/src/content/dependencies/generateColorStyleTag.js b/src/content/dependencies/generateColorStyleTag.js
index 3b24fdfa..2b1a21dd 100644
--- a/src/content/dependencies/generateColorStyleTag.js
+++ b/src/content/dependencies/generateColorStyleTag.js
@@ -1,8 +1,11 @@
 export default {
-  contentDependencies: ['generateColorStyleVariables'],
+  contentDependencies: ['generateColorStyleVariables', 'generateStyleTag'],
   extraDependencies: ['html'],
 
   relations: (relation) => ({
+    styleTag:
+      relation('generateStyleTag'),
+
     variables:
       relation('generateColorStyleVariables'),
   }),
@@ -26,22 +29,23 @@ export default {
       return html.blank();
     }
 
-    const style =
-      html.tag('style', {class: 'color-style'},
+    return relations.styleTag.slots({
+      attributes: [
+        {class: 'color-style'},
         {'data-color': color},
-
-        `:root {\n` +
-        relations.variables
-          .slots({
-            color,
-            context: 'page-root',
-            mode: 'property-list',
-          })
-          .content
-          .map(line => '    ' + line + ';\n')
-          .join('') +
-        `}`);
-
-    return style;
+      ],
+
+      rules: [
+        {
+          select: ':root',
+          declare:
+            relations.variables.slots({
+              color,
+              context: 'page-root',
+              mode: 'declarations',
+            }).content,
+        },
+      ],
+    });
   },
 };
diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js
index 5270dbe4..c872d0b6 100644
--- a/src/content/dependencies/generateColorStyleVariables.js
+++ b/src/content/dependencies/generateColorStyleVariables.js
@@ -18,7 +18,7 @@ export default {
     },
 
     mode: {
-      validate: v => v.is('style', 'property-list'),
+      validate: v => v.is('style', 'declarations'),
       default: 'style',
     },
   },
@@ -50,15 +50,15 @@ export default {
       `--shadow-color: ${shadow}`,
     ];
 
-    let selectedProperties;
+    let selectedDeclarations;
 
     switch (slots.context) {
       case 'any-content':
-        selectedProperties = anyContent;
+        selectedDeclarations = anyContent;
         break;
 
       case 'image-box':
-        selectedProperties = [
+        selectedDeclarations = [
           `--primary-color: ${primary}`,
           `--dim-color: ${dim}`,
           `--deep-color: ${deep}`,
@@ -67,14 +67,14 @@ export default {
         break;
 
       case 'page-root':
-        selectedProperties = [
+        selectedDeclarations = [
           ...anyContent,
           `--page-primary-color: ${primary}`,
         ];
         break;
 
       case 'primary-only':
-        selectedProperties = [
+        selectedDeclarations = [
           `--primary-color: ${primary}`,
         ];
         break;
@@ -82,10 +82,10 @@ export default {
 
     switch (slots.mode) {
       case 'style':
-        return selectedProperties.join('; ');
+        return selectedDeclarations.join('; ');
 
-      case 'property-list':
-        return selectedProperties;
+      case 'declarations':
+        return selectedDeclarations.map(declaration => declaration + ';');
     }
   },
 };