@akinon/pz-theme 2.0.35-rc.0 → 2.0.35

package/src/theme-section.tsx

@@ -14,6 +14,8 @@ import {
 import { devWarn } from './utils/dev-warn';
 import { safeDeepClone } from './utils/safe-clone';
 
+import { isTrustedEditorEvent, postToEditor } from './editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 export interface Section {
   id: string;
   type: string;
@@ -119,6 +121,7 @@ export default function ThemeSection({
     if (!isDesigner) return;
 
     const handleMessage = (event: MessageEvent) => {
+      if (!isTrustedEditorEvent(event)) return;
       if (
         event.data?.type === 'SCROLL_TO_SECTION' &&
         event.data?.data?.sectionId === effectiveSection.id
@@ -140,16 +143,13 @@ export default function ThemeSection({
       onSelect(effectiveSection.id);
 
       if (window.parent) {
-        window.parent.postMessage(
-          {
-            type: 'SELECT_SECTION',
-            data: {
-              placeholderId,
-              sectionId: effectiveSection.id
-            }
-          },
-          '*'
-        );
+        postToEditor({
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId,
+            sectionId: effectiveSection.id
+          }
+        });
       }
     }
   };
@@ -825,9 +825,7 @@ export default function ThemeSection({
           properties: target.properties
             ? { ...target.properties }
             : target.properties,
-          styles: target.styles
-            ? safeDeepClone(target.styles)
-            : target.styles,
+          styles: target.styles ? safeDeepClone(target.styles) : target.styles,
           blocks: target.blocks
             ? target.blocks.map((child, childIndex) =>
                 cloneWithIndex(child, `${suffix}-${childIndex}`)
@@ -998,36 +996,31 @@ export default function ThemeSection({
                   isDesigner
                 })
               : resolvedBlock;
-            const createActionHandler = (actionType: string) => () => {
-              if (window.parent) {
-                window.parent.postMessage(
-                  {
+            const createActionHandler =
+              (actionType: PreviewToEditorMessageType) => () => {
+                if (window.parent) {
+                  postToEditor({
                     type: actionType,
                     data: {
                       placeholderId,
                       sectionId: effectiveSection.id,
                       blockId: block.id
                     }
-                  },
-                  '*'
-                );
-              }
-            };
+                  });
+                }
+              };
 
             const handleRename = (newLabel: string) => {
               if (window.parent) {
-                window.parent.postMessage(
-                  {
-                    type: 'RENAME_BLOCK',
-                    data: {
-                      placeholderId,
-                      sectionId: effectiveSection.id,
-                      blockId: block.id,
-                      label: newLabel
-                    }
-                  },
-                  '*'
-                );
+                postToEditor({
+                  type: 'RENAME_BLOCK',
+                  data: {
+                    placeholderId,
+                    sectionId: effectiveSection.id,
+                    blockId: block.id,
+                    label: newLabel
+                  }
+                });
               }
             };
             const renderBlockWithActions = (renderedBlock: Block) => (

package/src/utils/__tests__/transform-styles.test.ts

@@ -0,0 +1,97 @@
+import { generateThemeCSS, getCSSStyles } from '../index';
+
+// Minimal Section factory — generateThemeCSS only reads id/styles/blocks.
+const sectionWith = (
+  styles: Record<string, unknown>,
+  blocks: Record<string, unknown>[] = []
+) =>
+  [
+    {
+      id: 'sec',
+      type: 'default',
+      name: 'sec',
+      label: 'sec',
+      properties: {},
+      styles,
+      blocks,
+      order: 0,
+      hidden: false
+    }
+  ] as never;
+
+// Minimal block factory — collectBlockCSS only reads id/styleSourceId/styles/blocks.
+const blockWith = (styles: Record<string, unknown>) => ({
+  id: 'blk',
+  type: 'text',
+  styles,
+  blocks: []
+});
+
+const transformStyles = {
+  scale: { desktop: '1.1' },
+  rotate: { desktop: '45deg' },
+  translate: { desktop: '10px 20px', mobile: '5px 0px' }
+};
+
+describe('generateThemeCSS — independent transform properties (scale/rotate/translate)', () => {
+  it('emits scale, rotate and translate verbatim in the base section rule and the mobile value in the media query', () => {
+    const css = generateThemeCSS(sectionWith(transformStyles));
+
+    const [baseCss, mobileCss] = css.split('@media (max-width: 1023px)');
+
+    expect(baseCss).toContain('[data-section-id="sec"]');
+    expect(baseCss).toContain('scale: 1.1');
+    expect(baseCss).toContain('rotate: 45deg');
+    expect(baseCss).toContain('translate: 10px 20px');
+
+    expect(mobileCss).toBeDefined();
+    expect(mobileCss).toContain('[data-section-id="sec"]');
+    expect(mobileCss).toContain('translate: 5px 0px');
+  });
+
+  it('emits scale, rotate and translate under the [data-block-id] selector for a block', () => {
+    const css = generateThemeCSS(sectionWith({}, [blockWith(transformStyles)]));
+
+    const [baseCss, mobileCss] = css.split('@media (max-width: 1023px)');
+
+    expect(baseCss).toContain('[data-block-id="blk"]');
+    expect(baseCss).toContain('scale: 1.1');
+    expect(baseCss).toContain('rotate: 45deg');
+    expect(baseCss).toContain('translate: 10px 20px');
+
+    expect(mobileCss).toBeDefined();
+    expect(mobileCss).toContain('[data-block-id="blk"]');
+    expect(mobileCss).toContain('translate: 5px 0px');
+  });
+
+  it('designer mobile mode emits mobile values with desktop fallback and no media query', () => {
+    const css = generateThemeCSS(sectionWith(transformStyles), 'mobile');
+
+    expect(css).toContain('[data-section-id="sec"]');
+    // Mobile value wins for translate; scale/rotate fall back to desktop.
+    expect(css).toContain('translate: 5px 0px');
+    expect(css).toContain('scale: 1.1');
+    expect(css).toContain('rotate: 45deg');
+    expect(css).not.toContain('translate: 10px 20px');
+    expect(css).not.toContain('@media');
+  });
+});
+
+describe('getCSSStyles — inline skip for scale/rotate/translate', () => {
+  it('skips scale, rotate and translate but keeps raw transform and other properties', () => {
+    const inline = getCSSStyles({
+      scale: { desktop: '1.1' },
+      rotate: { desktop: '45deg' },
+      translate: { desktop: '10px 20px' },
+      transform: { desktop: 'rotate(180deg)' },
+      color: { desktop: '#fff' }
+    });
+
+    expect(inline).not.toHaveProperty('scale');
+    expect(inline).not.toHaveProperty('rotate');
+    expect(inline).not.toHaveProperty('translate');
+    expect(inline).toHaveProperty('transform', 'rotate(180deg)');
+    // Default text-opacity (100) converts hex colors to rgba in the inline path.
+    expect(inline).toHaveProperty('color', 'rgba(255, 255, 255, 1)');
+  });
+});

package/src/utils/index.ts

@@ -316,6 +316,15 @@ export const getCSSStyles = (
       return;
     }
 
+    // `scale`/`rotate`/`translate` are rendered once via the generated [data-block-id]/[data-section-id] stylesheet; skipping them inline prevents double application on inner elements.
+    if (
+      normalizedKey === 'scale' ||
+      normalizedKey === 'rotate' ||
+      normalizedKey === 'translate'
+    ) {
+      return;
+    }
+
     const camelKey = kebabToCamel(key);
 
     if (