Fix theming

blocks/theming/theming.js

@@ -1,22 +1,21 @@
 import ComponentBase from '../../scripts/component-base.js';
 import {
+  capitalizeCase,
   flat,
-  getBreakPoints,
   getMediaQuery,
   getMetaGroup,
   getMeta,
   metaTags,
   readValue,
   unFlat,
   getBaseUrl,
+  runTasks,
 } from '../../scripts/libs.js';
 import { externalConfig } from '../../scripts/libs/external-config.js';
 
 const k = Object.keys;
 
 export default class Theming extends ComponentBase {
-  elements = {};
-
   variations = {};
 
   setDefaults() {
@@ -67,17 +66,17 @@ export default class Theming extends ComponentBase {
     const breakpoints = Object.keys(obj);
     return breakpoints
       .map((bp) => {
-        const options = getBreakPoints();
+        const options = this.breakpoints;
         if (options.byName[bp]) {
           const { min, max } = options.byName[bp];
           const query = getMediaQuery(min, max);
           return `
 @media ${query} {
-    ${callback(obj[bp])}
+    ${callback(obj[bp], options.byName[bp])}
 }`;
         }
         // regular
-        return callback(obj[bp]);
+        return callback(obj[bp], 'all');
       })
       .join('\n');
   }
@@ -121,12 +120,12 @@ export default class Theming extends ComponentBase {
       const unflatted = unFlat(this.variations[name]);
       return (
         acc +
-        this.reduceViewports(unflatted, (actionData) => {
+        this.reduceViewports(unflatted, (actionData, breakpoint) => {
           const actions = k(actionData);
           return actions.reduce((b, action) => {
-            const actionName = `render${action.charAt(0).toUpperCase()}${action.slice(1)}`;
+            const actionName = `render${capitalizeCase(action)}`;
             if (this[actionName]) {
-              return b + this[actionName](actionData[action], name);
+              return b + this[actionName](actionData[action], name, breakpoint);
             }
             return b;
           }, '');
@@ -152,47 +151,56 @@ ${k(f)
   variablesScopes(data, name, prepend = '.') {
     const f = flat(data);
     return `${prepend}${name} {
-  ${k(f)
-    .map((key) => `${key}: var(--${name}-${key}, ${f[key]});`)
-    .join('\n')}
+${k(f)
+  .map((key) => `${key}: var(--${name}-${key}, ${f[key]});`)
+  .join('\n')}
   }`;
   }
 
-  renderFont(data, name) {
+  renderFont(data, name, breakpoint) {
     const elements = k(data);
-    const flattened = flat(data);
-    this.tags = elements.reduce((a, key) => {
-      const props = flat(data[key]);
-      return a + this.variablesScopes(props, key, '');
-    }, '');
+    const flattened = flat(data, '', '-');
+
+    if (!this.tags.length && breakpoint === 'all' && name === 'default') {
+      this.tags = elements.reduce((acc, key) => {
+        const props = data[key];
+
+        return `${acc}\n ${this.variablesScopes(props, key, '')}`;
+      }, '');
+    }
     return this.variablesValues(flattened, name, '.font-');
   }
 
   async loadFragment() {
     const { themeConfig } = metaTags;
-
     const themeConfigs = getMetaGroup(themeConfig.metaNamePrefix);
     const base = getBaseUrl();
-    await Promise.allSettled(
-      themeConfigs.map(async ({ name, content, nameWithPrefix }) => {
-        if (!content.includes(`${themeConfig.fallbackContent}`) && name !== 'fontface') {
-          // eslint-disable-next-line no-console
-          console.error(
-            `The configured "${nameWithPrefix}" config url is not containing a "${themeConfig.fallbackContent}" folder.`,
-          );
-          return {};
-        }
+    await runTasks.call(
+      this,
+      null,
+      function loadConfigs() {
+        return Promise.allSettled(
+          themeConfigs.map(async ({ name, content, nameWithPrefix }) => {
+            if (!content.includes(`${themeConfig.fallbackContent}`) && name !== 'fontface') {
+              // eslint-disable-next-line no-console
+              console.error(
+                `The configured "${nameWithPrefix}" config url is not containing a "${themeConfig.fallbackContent}" folder.`,
+              );
+              return {};
+            }
 
-        const response =
-          name === 'component'
-            ? externalConfig.loadConfig(true) // use the loader to prevent duplicated calls
-            : await fetch(`${name !== 'fontface' ? base : ''}${content}.json`);
-        return this.processFragment(response, name);
-      }),
+            const response =
+              name === 'component'
+                ? externalConfig.loadConfig(true) // use the loader to prevent duplicated calls
+                : await fetch(`${name !== 'fontface' ? base : ''}${content}.json`);
+            return this.processFragment(response, name);
+          }),
+        );
+      },
+      this.defineVariations,
+      this.styles,
     );
 
-    this.defineVariations();
-    this.styles();
     setTimeout(() => {
       document.body.style.display = 'block';
     });