From 43ede9dcbe5941cd45bce960155a73fd889377a9 Mon Sep 17 00:00:00 2001
From: Oleksandr Miroshnichenko <omiroshnichenko@magento.com>
Date: Thu, 10 Sep 2020 11:22:11 -0500
Subject: [PATCH 1/2] magento/magento2-page-builder#558: Developer can style
 content types output differently per viewport - convert style blocks to
 inline styles to prevent BIC changes

---
 packages/pagebuilder/lib/parseStorageHtml.js | 40 ++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/packages/pagebuilder/lib/parseStorageHtml.js b/packages/pagebuilder/lib/parseStorageHtml.js
index 29100dcd79..c496c5b1a1 100644
--- a/packages/pagebuilder/lib/parseStorageHtml.js
+++ b/packages/pagebuilder/lib/parseStorageHtml.js
@@ -74,6 +74,43 @@ const walk = (rootEl, contentTypeStructureObj) => {
     return contentTypeStructureObj;
 };
 
+const pbStyleAttribute = 'data-pb-style';
+const bodyId = 'html-body';
+
+/**
+ * Convert styles block to inline styles.
+ * @param {HTMLDocument} document
+ */
+const convertToInlineStyles = document => {
+    const styleBlocks = document.getElementsByTagName('style');
+    const styles = {};
+
+    if (styleBlocks.length > 0) {
+        Array.from(styleBlocks).forEach(styleBlock => {
+            const cssRules = styleBlock.sheet.cssRules;
+
+            Array.from(cssRules).forEach(rule => {
+                const selectors = rule.selectorText.split(',').map(selector => selector.trim());
+                selectors.forEach(selector => {
+                    if (!styles[selector]) {
+                        styles[selector] = [];
+                    }
+                    styles[selector].push(rule.style);
+                });
+            });
+        });
+    }
+
+    Object.keys(styles).map(selector => {
+        const element = document.querySelector(selector);
+
+        styles[selector].map(style => {
+            element.setAttribute('style', element.style.cssText + style.cssText);
+        });
+        element.removeAttribute(pbStyleAttribute);
+    });
+}
+
 /**
  * Parse the master format storage HTML
  *
@@ -85,6 +122,9 @@ const parseStorageHtml = htmlStr => {
 
     const stageContentType = createContentTypeObject('root-container');
 
+    container.body.id = bodyId;
+    convertToInlineStyles(container);
+
     return walk(container.body, stageContentType);
 };
 

From 6e295a731e3da5b52012d418f1fc8dfea228f9a5 Mon Sep 17 00:00:00 2001
From: Oleksandr Miroshnichenko <omiroshnichenko@magento.com>
Date: Thu, 10 Sep 2020 12:11:28 -0500
Subject: [PATCH 2/2] magento/magento2-page-builder#558: Developer can style
 content types output differently per viewport - fix code style

---
 packages/pagebuilder/lib/parseStorageHtml.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/pagebuilder/lib/parseStorageHtml.js b/packages/pagebuilder/lib/parseStorageHtml.js
index c496c5b1a1..9669351557 100644
--- a/packages/pagebuilder/lib/parseStorageHtml.js
+++ b/packages/pagebuilder/lib/parseStorageHtml.js
@@ -90,7 +90,9 @@ const convertToInlineStyles = document => {
             const cssRules = styleBlock.sheet.cssRules;
 
             Array.from(cssRules).forEach(rule => {
-                const selectors = rule.selectorText.split(',').map(selector => selector.trim());
+                const selectors = rule.selectorText
+                    .split(',')
+                    .map(selector => selector.trim());
                 selectors.forEach(selector => {
                     if (!styles[selector]) {
                         styles[selector] = [];
@@ -105,11 +107,14 @@ const convertToInlineStyles = document => {
         const element = document.querySelector(selector);
 
         styles[selector].map(style => {
-            element.setAttribute('style', element.style.cssText + style.cssText);
+            element.setAttribute(
+                'style',
+                element.style.cssText + style.cssText
+            );
         });
         element.removeAttribute(pbStyleAttribute);
     });
-}
+};
 
 /**
  * Parse the master format storage HTML