@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/components/theme-editor/utils/index.ts

@@ -0,0 +1,792 @@
+import React from 'react';
+export * from './publish-window';
+
+type ThemeSettings = Record<string, unknown> | null;
+
+const THEME_CSS_VARIABLE_MAP: Record<string, string> = {
+  '--theme-primary': 'primaryColor',
+  '--theme-secondary': 'secondaryColor',
+  '--theme-color3': 'color3',
+  '--theme-color4': 'color4',
+  '--theme-background': 'backgroundColor'
+};
+
+const CSS_VAR_REGEX = /var\((--[\w-]+)(?:,\s*([^)]+))?\)/g;
+
+const stripQuotes = (value: string) => value.replace(/^['"]|['"]$/g, '').trim();
+
+const getComputedCssVariable = (variableName: string): string | null => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const computedValue = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue(variableName);
+  return computedValue ? computedValue.trim() : null;
+};
+
+export const clampAlpha = (
+  value: unknown,
+  fallbackPercent = 100
+): number | null => {
+  const numeric = Number(
+    value === undefined || value === null || value === ''
+      ? fallbackPercent
+      : value
+  );
+  if (Number.isNaN(numeric)) return null;
+  return Math.max(0, Math.min(1, numeric / 100));
+};
+
+export const colorToRgba = (color: string, alpha: number): string | null => {
+  let normalized = color.trim();
+  // Some theme settings may provide hex without a leading '#'
+  if (
+    !normalized.startsWith('#') &&
+    /^[0-9a-f]{3}([0-9a-f]{3})?$/i.test(normalized)
+  ) {
+    normalized = `#${normalized}`;
+  }
+  const short = normalized.match(/^#([0-9a-f]{3})$/i);
+  const long = normalized.match(/^#([0-9a-f]{6})$/i);
+
+  if (short) {
+    const h = short[1];
+    const r = parseInt(h[0] + h[0], 16);
+    const g = parseInt(h[1] + h[1], 16);
+    const b = parseInt(h[2] + h[2], 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  if (long) {
+    const h = long[1];
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  // rgb(12, 34, 56) or rgba(12, 34, 56, 0.5)
+  const commaRgb = normalized.match(
+    /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([0-9.]+))?\s*\)$/i
+  );
+  if (commaRgb) {
+    const r = Number(commaRgb[1]);
+    const g = Number(commaRgb[2]);
+    const b = Number(commaRgb[3]);
+    if ([r, g, b].some((v) => Number.isNaN(v))) return null;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  // rgb(12 34 56) or rgb(12 34 56 / 0.5)
+  const spaceRgb = normalized.match(
+    /^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})(?:\s*\/\s*([0-9.]+%?))?\s*\)$/i
+  );
+  if (spaceRgb) {
+    const r = Number(spaceRgb[1]);
+    const g = Number(spaceRgb[2]);
+    const b = Number(spaceRgb[3]);
+    if ([r, g, b].some((v) => Number.isNaN(v))) return null;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  return null;
+};
+
+export const applyAlphaToColor = (color: string, alpha: number): string => {
+  if (alpha <= 0) return 'transparent';
+  if (alpha >= 1) return color;
+
+  const rgba = colorToRgba(color, alpha);
+  if (rgba) return rgba;
+
+  // Fallback for values like `var(--theme-secondary)` or named colors.
+  // Modern browsers support `color-mix` which lets us blend with transparent.
+  const percent = Math.round(alpha * 100);
+  return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+};
+
+export const resolveThemeCssVariables = (
+  value: string,
+  themeSettings?: ThemeSettings
+): string => {
+  if (typeof value !== 'string' || !value.includes('var(')) {
+    return value;
+  }
+
+  return value.replace(
+    CSS_VAR_REGEX,
+    (_match, variableName: string, fallbackValue?: string) => {
+      const mappedKey = THEME_CSS_VARIABLE_MAP[variableName];
+      const themeColor = mappedKey
+        ? (themeSettings?.[mappedKey] as string | undefined)
+        : undefined;
+      const computedValue = getComputedCssVariable(variableName);
+      const fallback = fallbackValue ? stripQuotes(fallbackValue) : undefined;
+
+      return themeColor || computedValue || fallback || `var(${variableName})`;
+    }
+  );
+};
+
+export const resolveThemeStyleObject = (
+  styles: React.CSSProperties,
+  themeSettings?: ThemeSettings
+): React.CSSProperties => {
+  const resolvedEntries = Object.entries(styles).map(([key, val]) => {
+    if (typeof val === 'string') {
+      return [key, resolveThemeCssVariables(val, themeSettings)];
+    }
+    return [key, val];
+  });
+
+  return Object.fromEntries(resolvedEntries) as React.CSSProperties;
+};
+
+export const getResponsiveValue = (
+  value: unknown,
+  breakpoint = 'desktop',
+  fallback: unknown = ''
+) => {
+  if (value === undefined || value === null || value === '') return fallback;
+  if (typeof value === 'object') {
+    const responsiveValue = value as Record<string, unknown>;
+    const matched = responsiveValue[breakpoint];
+    if (matched !== undefined) return matched;
+    if (responsiveValue.desktop !== undefined) return responsiveValue.desktop;
+    return fallback;
+  }
+  return value;
+};
+
+const kebabToCamel = (str: string): string => {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+};
+
+export const getCSSStyles = (
+  styles?: Record<string, unknown>,
+  themeSettings?: ThemeSettings,
+  breakpoint: string = 'desktop'
+): React.CSSProperties => {
+  if (!styles) return {};
+
+  const cssStyles: Record<string, string | number> = {};
+
+  const normalizeKey = (key: string): string => {
+    if (key.includes('-')) return key;
+    return key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  };
+
+  const getStyleEntry = (kebabKey: string): unknown => {
+    // Some sources may serialize keys in camelCase.
+    // Prefer kebab-case but fall back to camelCase.
+    const camelKey = kebabToCamel(kebabKey);
+    return styles[kebabKey] ?? styles[camelKey];
+  };
+
+  const textOpacityEntry = getStyleEntry('text-opacity');
+  const textOpacityValue = textOpacityEntry
+    ? getResponsiveValue(textOpacityEntry, breakpoint, '100')
+    : '100';
+  const textOpacity = Number(textOpacityValue);
+  const textAlpha = !Number.isNaN(textOpacity)
+    ? Math.max(0, Math.min(1, textOpacity / 100))
+    : null;
+
+  const backgroundOpacityEntry = getStyleEntry('background-opacity');
+  const backgroundOpacityValue = backgroundOpacityEntry
+    ? getResponsiveValue(backgroundOpacityEntry, breakpoint, '100')
+    : '100';
+  const backgroundOpacity = Number(backgroundOpacityValue);
+  const backgroundAlpha = !Number.isNaN(backgroundOpacity)
+    ? Math.max(0, Math.min(1, backgroundOpacity / 100))
+    : null;
+
+  Object.keys(styles).forEach((key) => {
+    const value = getResponsiveValue(styles[key], breakpoint);
+    if (value === undefined || value === null) return;
+
+    const normalizedKey = normalizeKey(key);
+
+    // `text-opacity` is not a real CSS property; it should influence `color`.
+    if (normalizedKey === 'text-opacity') {
+      return;
+    }
+
+    // `background-opacity` is not a real CSS property; it should influence `background-color`.
+    if (normalizedKey === 'background-opacity') {
+      return;
+    }
+
+    // `hover-opacity` is not a real CSS property; it should influence hover state.
+    if (normalizedKey === 'hover-opacity') {
+      return;
+    }
+
+    // Skip generic `opacity` from button defaults to prevent element-wide transparency.
+    if (normalizedKey === 'opacity') {
+      return;
+    }
+
+    const camelKey = kebabToCamel(key);
+
+    if (
+      (key.startsWith('padding-') || key.startsWith('margin-')) &&
+      typeof value === 'number'
+    ) {
+      cssStyles[camelKey] = `${value}px`;
+    } else if (key === 'width' && value === 'fill') {
+      cssStyles[camelKey] = '100%';
+    } else if (key === 'width' && value === 'fit') {
+      cssStyles[camelKey] = 'fit-content';
+    } else if (key === 'height' && value === 'fill') {
+      cssStyles[camelKey] = '100%';
+    } else if (key === 'height' && value === 'fit') {
+      cssStyles[camelKey] = 'fit-content';
+    } else if (typeof value === 'string') {
+      const resolved = resolveThemeCssVariables(value, themeSettings);
+
+      if (normalizedKey === 'color' && textAlpha !== null) {
+        const rgba = colorToRgba(resolved, textAlpha);
+        if (rgba) {
+          cssStyles[camelKey] = rgba;
+          return;
+        }
+      }
+
+      if (normalizedKey === 'background-color' && backgroundAlpha !== null) {
+        if (backgroundAlpha === 0) {
+          cssStyles[camelKey] = 'transparent';
+          return;
+        }
+
+        const rgba = colorToRgba(resolved, backgroundAlpha);
+        if (rgba) {
+          cssStyles[camelKey] = rgba;
+          return;
+        }
+      }
+
+      cssStyles[camelKey] = resolved;
+    } else {
+      cssStyles[camelKey] = value as number;
+    }
+  });
+
+  return cssStyles as React.CSSProperties;
+};
+
+interface ResponsiveStyles {
+  [key: string]:
+    | {
+        desktop?: string | number;
+        mobile?: string | number;
+      }
+    | string
+    | number;
+}
+
+interface Block {
+  id: string;
+  styles?: ResponsiveStyles;
+  blocks?: Block[];
+}
+
+interface Section {
+  id: string;
+  styles?: ResponsiveStyles;
+  blocks?: Block[];
+}
+
+const camelToKebab = (str: string): string => {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+};
+
+const formatCSSValue = (property: string, value: string | number): string => {
+  if (value === undefined || value === null || value === '') return '';
+
+  const kebabProperty = camelToKebab(property);
+
+  if (kebabProperty === 'width' || kebabProperty === 'height') {
+    if (value === 'fill') return '100%';
+    if (value === 'fit') return 'fit-content';
+  }
+
+  const needsUnit = [
+    'width',
+    'height',
+    'max-width',
+    'max-height',
+    'min-width',
+    'min-height',
+    'padding',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'margin',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'gap',
+    'row-gap',
+    'column-gap',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'font-size',
+    'line-height',
+    'letter-spacing',
+    'border-width',
+    'border-radius',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-bottom-left-radius',
+    'border-bottom-right-radius'
+  ];
+
+  if (typeof value === 'number' && needsUnit.includes(kebabProperty)) {
+    return `${value}px`;
+  }
+
+  return String(value);
+};
+
+const generateElementCSS = (
+  selector: string,
+  styles: ResponsiveStyles,
+  targetBreakpoint?: string
+): string => {
+  if (!styles || Object.keys(styles).length === 0) return '';
+
+  const getStyleEntry = (kebabKey: string): unknown => {
+    const camelKey = kebabToCamel(kebabKey);
+    return styles[kebabKey] ?? styles[camelKey];
+  };
+
+  const getBackgroundAlpha = (breakpoint: string): number | null => {
+    const entry = getStyleEntry('background-opacity');
+    const value = entry ? getResponsiveValue(entry, breakpoint, '100') : '100';
+    return clampAlpha(value, 100);
+  };
+
+  const getHoverAlpha = (breakpoint: string): number | null => {
+    const entry = getStyleEntry('hover-opacity');
+    const value = entry ? getResponsiveValue(entry, breakpoint, '100') : '100';
+    return clampAlpha(value, 100);
+  };
+
+  const getHoverColor = (breakpoint: string): string | null => {
+    const entry = getStyleEntry('hover-color');
+    const value = entry
+      ? getResponsiveValue(entry, breakpoint, 'var(--theme-secondary)')
+      : undefined;
+    if (value === undefined || value === null || value === '') return null;
+    return String(value);
+  };
+
+  const getHoverFlex = (breakpoint: string): string | null => {
+    const entry = getStyleEntry('hover-flex');
+    const value = entry
+      ? getResponsiveValue(entry, breakpoint, undefined)
+      : undefined;
+    if (value === undefined || value === null || value === '') return null;
+    return String(value);
+  };
+
+  const getHoverChildFlex = (breakpoint: string): string | null => {
+    const entry = getStyleEntry('hover-child-flex');
+    const value = entry
+      ? getResponsiveValue(entry, breakpoint, undefined)
+      : undefined;
+    if (value === undefined || value === null || value === '') return null;
+    return String(value);
+  };
+
+  const buildHoverDeclarations = (breakpoint: string): string[] => {
+    const declarations: string[] = [];
+
+    const hoverColor = getHoverColor(breakpoint);
+    if (hoverColor) {
+      const alpha = getHoverAlpha(breakpoint);
+      if (alpha === null) {
+        declarations.push(`  background-color: ${hoverColor}`);
+        declarations.push(`  border-color: ${hoverColor}`);
+      } else {
+        const resolved = applyAlphaToColor(hoverColor, alpha);
+        declarations.push(`  background-color: ${resolved}`);
+        declarations.push(`  border-color: ${resolved}`);
+      }
+    }
+
+    const hoverFlex = getHoverFlex(breakpoint);
+    if (hoverFlex) {
+      declarations.push(`  flex: ${hoverFlex}`);
+    }
+
+    return declarations;
+  };
+
+  const buildHoverCss = (breakpoint: string, indent = ''): string => {
+    let css = '';
+
+    const hoverChildFlex = getHoverChildFlex(breakpoint);
+    if (hoverChildFlex) {
+      css += `${indent}${selector}:hover > [data-block-id] {\n${indent}  flex: ${hoverChildFlex} !important;\n${indent}}\n`;
+    }
+
+    const hoverDecls = buildHoverDeclarations(breakpoint);
+    if (hoverDecls.length === 0) return css;
+
+    const joined = hoverDecls
+      .map((line) => `${indent}${line.trimStart()}`)
+      .join(`;\n${indent}`);
+
+    const importantJoined = hoverDecls
+      .map((line) => {
+        const trimmed = line.trimStart();
+        return `${indent}${trimmed.replace(/:\s*(.+)$/, ': $1 !important')}`;
+      })
+      .join(`;\n${indent}`);
+
+    const wrapperRule = `${indent}${selector}:hover {\n${importantJoined};\n${indent}}\n`;
+    // Scope to the last child wrapper (button block content) so designer overlay controls aren't affected.
+    const childRule = `${indent}${selector}:hover > div:last-child a,\n${indent}${selector}:hover > div:last-child button {\n${importantJoined};\n${indent}}\n`;
+
+    css += `${wrapperRule}${childRule}`;
+    return css;
+  };
+
+  const cssStyles: string[] = [];
+
+  Object.entries(styles).forEach(([property, value]) => {
+    if (value === undefined || value === null) return;
+
+    const cssProperty = camelToKebab(property);
+
+    // Skip non-CSS helper keys.
+    if (
+      cssProperty === 'text-opacity' ||
+      cssProperty === 'background-opacity' ||
+      cssProperty === 'hover-opacity' ||
+      cssProperty === 'hover-color' ||
+      cssProperty === 'hover-flex' ||
+      cssProperty === 'hover-child-flex' ||
+      cssProperty === 'opacity'
+    ) {
+      return;
+    }
+
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      const responsiveValue = value as {
+        desktop?: string | number;
+        mobile?: string | number;
+      };
+
+      if (targetBreakpoint) {
+        const breakpointValue =
+          responsiveValue[targetBreakpoint as keyof typeof responsiveValue] ??
+          responsiveValue.desktop;
+        if (
+          breakpointValue !== undefined &&
+          breakpointValue !== null &&
+          breakpointValue !== ''
+        ) {
+          if (
+            cssProperty === 'background-color' &&
+            typeof breakpointValue === 'string'
+          ) {
+            const backgroundAlpha = getBackgroundAlpha(
+              targetBreakpoint === 'mobile' ? 'mobile' : 'desktop'
+            );
+            if (backgroundAlpha !== null) {
+              if (backgroundAlpha === 0) {
+                cssStyles.push(`  ${cssProperty}: transparent`);
+                return;
+              }
+              const rgba = colorToRgba(breakpointValue, backgroundAlpha);
+              if (rgba) {
+                cssStyles.push(`  ${cssProperty}: ${rgba}`);
+                return;
+              }
+            }
+          }
+
+          const formattedValue = formatCSSValue(property, breakpointValue);
+          if (formattedValue) {
+            cssStyles.push(`  ${cssProperty}: ${formattedValue}`);
+          }
+        }
+      } else {
+        if (
+          responsiveValue.desktop !== undefined &&
+          responsiveValue.desktop !== null &&
+          responsiveValue.desktop !== ''
+        ) {
+          if (
+            cssProperty === 'background-color' &&
+            typeof responsiveValue.desktop === 'string'
+          ) {
+            const backgroundAlpha = getBackgroundAlpha('desktop');
+            if (backgroundAlpha !== null) {
+              if (backgroundAlpha === 0) {
+                cssStyles.push(`  ${cssProperty}: transparent`);
+                return;
+              }
+              const rgba = colorToRgba(
+                responsiveValue.desktop,
+                backgroundAlpha
+              );
+              if (rgba) {
+                cssStyles.push(`  ${cssProperty}: ${rgba}`);
+                return;
+              }
+            }
+          }
+
+          const formattedValue = formatCSSValue(
+            property,
+            responsiveValue.desktop
+          );
+          if (formattedValue) {
+            cssStyles.push(`  ${cssProperty}: ${formattedValue}`);
+          }
+        }
+      }
+    } else {
+      if (cssProperty === 'background-color' && typeof value === 'string') {
+        const backgroundAlpha = getBackgroundAlpha('desktop');
+        if (backgroundAlpha !== null) {
+          if (backgroundAlpha === 0) {
+            cssStyles.push(`  ${cssProperty}: transparent`);
+            return;
+          }
+          const rgba = colorToRgba(value, backgroundAlpha);
+          if (rgba) {
+            cssStyles.push(`  ${cssProperty}: ${rgba}`);
+            return;
+          }
+        }
+      }
+
+      const formattedValue = formatCSSValue(property, value as string | number);
+      if (formattedValue) {
+        cssStyles.push(`  ${cssProperty}: ${formattedValue}`);
+      }
+    }
+  });
+
+  if (targetBreakpoint) {
+    const breakpointKey = targetBreakpoint === 'mobile' ? 'mobile' : 'desktop';
+    const hoverCss = buildHoverCss(breakpointKey);
+
+    if (cssStyles.length > 0) {
+      return `${selector} {\n${cssStyles.join(';\n')};\n}\n${hoverCss}`;
+    }
+
+    if (hoverCss) {
+      return hoverCss;
+    }
+
+    return '';
+  }
+
+  const desktopStyles: string[] = [];
+  const mobileStyles: string[] = [];
+
+  Object.entries(styles).forEach(([property, value]) => {
+    if (value === undefined || value === null) return;
+
+    const cssProperty = camelToKebab(property);
+
+    // Skip non-CSS helper keys.
+    if (
+      cssProperty === 'text-opacity' ||
+      cssProperty === 'background-opacity' ||
+      cssProperty === 'hover-opacity' ||
+      cssProperty === 'hover-color' ||
+      cssProperty === 'hover-flex' ||
+      cssProperty === 'hover-child-flex' ||
+      cssProperty === 'opacity'
+    ) {
+      return;
+    }
+
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      const responsiveValue = value as {
+        desktop?: string | number;
+        mobile?: string | number;
+      };
+
+      if (
+        responsiveValue.desktop !== undefined &&
+        responsiveValue.desktop !== null &&
+        responsiveValue.desktop !== ''
+      ) {
+        if (
+          cssProperty === 'background-color' &&
+          typeof responsiveValue.desktop === 'string'
+        ) {
+          const backgroundAlpha = getBackgroundAlpha('desktop');
+          if (backgroundAlpha !== null) {
+            if (backgroundAlpha === 0) {
+              desktopStyles.push(`  ${cssProperty}: transparent`);
+            } else {
+              const rgba = colorToRgba(
+                responsiveValue.desktop,
+                backgroundAlpha
+              );
+              desktopStyles.push(
+                `  ${cssProperty}: ${rgba || responsiveValue.desktop}`
+              );
+            }
+          } else {
+            const formattedValue = formatCSSValue(
+              property,
+              responsiveValue.desktop
+            );
+            if (formattedValue) {
+              desktopStyles.push(`  ${cssProperty}: ${formattedValue}`);
+            }
+          }
+        } else {
+          const formattedValue = formatCSSValue(
+            property,
+            responsiveValue.desktop
+          );
+          if (formattedValue) {
+            desktopStyles.push(`  ${cssProperty}: ${formattedValue}`);
+          }
+        }
+      }
+
+      if (
+        responsiveValue.mobile !== undefined &&
+        responsiveValue.mobile !== null &&
+        responsiveValue.mobile !== ''
+      ) {
+        if (
+          cssProperty === 'background-color' &&
+          typeof responsiveValue.mobile === 'string'
+        ) {
+          const backgroundAlpha = getBackgroundAlpha('mobile');
+          if (backgroundAlpha !== null) {
+            if (backgroundAlpha === 0) {
+              mobileStyles.push(`  ${cssProperty}: transparent`);
+            } else {
+              const rgba = colorToRgba(responsiveValue.mobile, backgroundAlpha);
+              mobileStyles.push(
+                `  ${cssProperty}: ${rgba || responsiveValue.mobile}`
+              );
+            }
+          } else {
+            const formattedMobile = formatCSSValue(
+              property,
+              responsiveValue.mobile
+            );
+            const formattedDesktop =
+              responsiveValue.desktop !== undefined
+                ? formatCSSValue(property, responsiveValue.desktop)
+                : '';
+
+            if (formattedMobile && formattedMobile !== formattedDesktop) {
+              mobileStyles.push(`  ${cssProperty}: ${formattedMobile}`);
+            }
+          }
+        } else {
+          const formattedMobile = formatCSSValue(
+            property,
+            responsiveValue.mobile
+          );
+          const formattedDesktop =
+            responsiveValue.desktop !== undefined
+              ? formatCSSValue(property, responsiveValue.desktop)
+              : '';
+
+          if (formattedMobile && formattedMobile !== formattedDesktop) {
+            mobileStyles.push(`  ${cssProperty}: ${formattedMobile}`);
+          }
+        }
+      }
+    } else {
+      if (cssProperty === 'background-color' && typeof value === 'string') {
+        const backgroundAlpha = getBackgroundAlpha('desktop');
+        if (backgroundAlpha !== null) {
+          if (backgroundAlpha === 0) {
+            desktopStyles.push(`  ${cssProperty}: transparent`);
+          } else {
+            const rgba = colorToRgba(value, backgroundAlpha);
+            desktopStyles.push(`  ${cssProperty}: ${rgba || value}`);
+          }
+          return;
+        }
+      }
+
+      const formattedValue = formatCSSValue(property, value as string | number);
+      if (formattedValue) {
+        desktopStyles.push(`  ${cssProperty}: ${formattedValue}`);
+      }
+    }
+  });
+
+  let css = '';
+
+  if (desktopStyles.length > 0) {
+    css += `${selector} {\n${desktopStyles.join(';\n')};\n}\n`;
+  }
+
+  css += buildHoverCss('desktop');
+
+  if (mobileStyles.length > 0) {
+    const mobileHoverCss = buildHoverCss('mobile', '  ');
+
+    css += `@media (max-width: 1023px) {\n  ${selector} {\n  ${mobileStyles.join(
+      ';\n  '
+    )};\n  }\n${mobileHoverCss}}\n`;
+  }
+
+  return css;
+};
+
+const collectBlockCSS = (
+  blocks: Block[],
+  targetBreakpoint?: string
+): string => {
+  let css = '';
+
+  blocks.forEach((block) => {
+    if (block.styles && Object.keys(block.styles).length > 0) {
+      const selector = `[data-block-id="${block.id}"]`;
+      css += generateElementCSS(selector, block.styles, targetBreakpoint);
+    }
+
+    if (block.blocks && block.blocks.length > 0) {
+      css += collectBlockCSS(block.blocks, targetBreakpoint);
+    }
+  });
+
+  return css;
+};
+
+export const generateThemeCSS = (
+  sections: Section[],
+  targetBreakpoint?: string
+): string => {
+  let css = '';
+
+  sections.forEach((section) => {
+    if (section.styles && Object.keys(section.styles).length > 0) {
+      const selector = `[data-section-id="${section.id}"]`;
+      css += generateElementCSS(selector, section.styles, targetBreakpoint);
+    }
+
+    if (section.blocks && section.blocks.length > 0) {
+      css += collectBlockCSS(section.blocks, targetBreakpoint);
+    }
+  });
+
+  return css;
+};