Merge branch 'origin-main' into reduced-motion

argyleink · Aug 3, 2023 · 0da174c · 0da174c
2 parents 7369ab4 + 0fff7d9
commit 0da174c
Showing 1 changed file with 23 additions and 28 deletions.
diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
@@ -1,6 +1,21 @@
 import fs from 'fs'
 
-export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
+/**
+ * Wraps a set of definitions inside of a media query 
+ * @param {*} queryValue The media value to query for
+ * @param {*} definitions The definitions that need to be wrapped
+ * @returns Media query string
+ */
+const wrapInQuery = (queryValue, definitions) => {
+  return definitions ? `
+@media (${queryValue}) {
+  ${definitions.reduce((acc, [_, val], i) => (
+    `${acc} ${i ? `\n` : ''} ${val}`
+  ), '')}
+}` : '';
+}
+
+export const buildPropsStylesheet = ({ filename, props }, { selector, prefix }) => {
   const file = fs.createWriteStream("../src/" + filename)
 
   let appendedMeta = ''
@@ -17,12 +32,12 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
 
     dark_props.forEach(([prop, val], index) => {
       let v = props[prop]
-      let extract = prop.slice(2, prop.length-('-@media:dark'.length))
+      let extract = prop.slice(2, prop.length - ('-@media:dark'.length))
       let p = prefix && prefix !== "''"
         ? `--${prefix}-` + extract
         : `--${extract}`
 
-      dark_propsMeta += `    ${p}: ${val};${index !== dark_props.length-1 ? '\n' : ''}`
+      dark_propsMeta += `    ${p}: ${val};${index !== dark_props.length - 1 ? '\n' : ''}`
     })
     appendedMeta += `
 @media (--OSdark) {
@@ -45,10 +60,10 @@ ${dark_propsMeta}
 
     if (prefix && prefix !== "''") {
       prop = `--${prefix}-` + prop.slice(2)
-      if (typeof(val) == "string" &&  val.includes("var(--"))
+      if (typeof (val) == "string" && val.includes("var(--"))
         val = val.replace(/var\(--/g, `var(--${prefix}-`)
     }
-    
+
     file.write(`  ${prop}: ${val};\n`)
   })
 
@@ -67,30 +82,10 @@ ${dark_propsMeta}
       }
 
       return acc;
-    }, [[], []])
-
-
-    dark_props.forEach(([_, val]) => {
-      appendedMeta += `
-@media (--OSdark) {
-  ${val};
-}
-      `
-    })
-
-    if (reduced_props.length) {
-      appendedMeta += `
-@media (--motionNotOK) {`
+    }, [[], []]);
 
-      reduced_props.forEach(([_, val]) => {
-        appendedMeta += `
-  ${val}
-        `
-      })
-
-      appendedMeta += `
-}`
-    }
+    appendedMeta += wrapInQuery('--OSdark', dark_props)
+    appendedMeta += wrapInQuery('--motionNotOK', reduced_props)
   }
 
   file.write('}\n')