Developer can style content types output differently per viewport (#2694

)

* magento/magento2-page-builder#558: Developer can style content types output differently per viewport
- convert style blocks to inline styles to prevent BIC changes

* magento/magento2-page-builder#558: Developer can style content types output differently per viewport
- fix code style

Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>

packages/pagebuilder/lib/parseStorageHtml.js

@@ -74,6 +74,48 @@ 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 +127,9 @@ const parseStorageHtml = htmlStr => {
 
     const stageContentType = createContentTypeObject('root-container');
 
+    container.body.id = bodyId;
+    convertToInlineStyles(container);
+
     return walk(container.body, stageContentType);
 };