Implement inline styles conversion

- replace class with attribute
- add minified library
- fix style adding in preview style binding

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/master-style.js

@@ -6,7 +6,7 @@
 import ko from "knockout";
 import utils from "mageUtils";
 import _ from "underscore";
-import {getStyleRegistry} from "../content-type/style-registry";
+import {getStyleRegistry, pbStyleAttribute} from "../content-type/style-registry";
 
 ko.bindingHandlers.style = {
     update: (element: HTMLElement, valueAccessor, allBindings, viewModel, bindingContext) => {
@@ -26,11 +26,12 @@ ko.bindingHandlers.style = {
         });
 
         if (!_.isEmpty(styles)) {
-            const className = "style-" + utils.uniqueid();
+            const id = utils.uniqueid();
+            const selector = `[${pbStyleAttribute}="${id}"]`;
             const registry = getStyleRegistry(bindingContext.$root.id);
 
-            registry.setStyles(className, styles);
-            element.classList.add(className);
+            registry.setStyles(selector, styles);
+            element.setAttribute(pbStyleAttribute, id);
         }
 
     },

app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/style.js

@@ -6,7 +6,7 @@
 import ko from "knockout";
 import utils from "mageUtils";
 import _ from "underscore";
-import {generateCssBlock} from "../content-type/style-registry";
+import {generateCssBlock, pbStyleAttribute, styleDataAttribute} from "../content-type/style-registry";
 
 const originalStyle: KnockoutBindingHandler = ko.bindingHandlers.style;
 
@@ -17,15 +17,15 @@ function isPageBuilderContext(context: {[key: string]: any}): boolean {
 ko.bindingHandlers.style = {
     init: (element, valueAccessor, allBindings, viewModel, bindingContext) => {
         if (isPageBuilderContext(bindingContext)) {
-            element.setAttribute("data-style-id", utils.uniqueid());
+            element.setAttribute(pbStyleAttribute, utils.uniqueid());
         }
     },
     update: (element: HTMLElement, valueAccessor, allBindings, viewModel, bindingContext) => {
         if (isPageBuilderContext(bindingContext)) {
             const value = ko.utils.unwrapObservable(valueAccessor() || {});
             const styles: { [key: string]: any; } = {};
-            const className = "style-" + element.getAttribute("data-style-id");
-            const existedStyleBlock = document.querySelector(`[data-selector="${className}"]`);
+            const styleId = element.getAttribute(pbStyleAttribute);
+            const existedStyleBlock = document.querySelector(`style[${styleDataAttribute}="${styleId}"]`);
 
             ko.utils.objectForEach(value, (styleName, styleValue) => {
                 styleValue = ko.utils.unwrapObservable(styleValue);
@@ -44,10 +44,9 @@ ko.bindingHandlers.style = {
             if (!_.isEmpty(styles)) {
                 const styleElement: HTMLStyleElement = document.createElement("style");
 
-                styleElement.setAttribute("data-selector", className);
-                styleElement.innerHTML = generateCssBlock(className, styles);
-                element.classList.add(className);
-                element.append(styleElement);
+                styleElement.setAttribute(styleDataAttribute, styleId);
+                styleElement.innerHTML = generateCssBlock(`[${pbStyleAttribute}="${styleId}"]`, styles);
+                element.parentElement.append(styleElement);
             }
         } else {
             originalStyle.update(element, valueAccessor, allBindings, viewModel, bindingContext);

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/style-registry.js

@@ -4,12 +4,14 @@
  */
 
 import _ from "underscore";
-import { fromCamelCaseToSnake } from "../utils/string";
+import { fromCamelCaseToDash } from "../utils/string";
 
 const styleRegistries: Record<string, StyleRegistry> = {};
 
 export type Styles = Record<string, Style>;
 export type Style = Record<string, any>;
+export const pbStyleAttribute: string = "data-pb-style";
+export const styleDataAttribute: string = "data-style-id";
 
 export default class StyleRegistry {
     private styles: Record<string, Style> = {};
@@ -21,23 +23,23 @@ export default class StyleRegistry {
     }
 
     /**
-     * Update styles for className
+     * Update styles for selector
      *
-     * @param className
+     * @param selector
      * @param styles
      */
-    public setStyles(className: string, styles: Style): void {
-        this.styles[className] = styles;
+    public setStyles(selector: string, styles: Style): void {
+        this.styles[selector] = styles;
     }
 
     /**
-     * Retrieve styles for a class name
+     * Retrieve styles for a selector
      *
-     * @param className
+     * @param selector
      */
-    public getStyles(className: string): Style {
-        if (this.styles[className]) {
-            return this.styles[className];
+    public getStyles(selector: string): Style {
+        if (this.styles[selector]) {
+            return this.styles[selector];
         }
 
         return {};
@@ -78,9 +80,9 @@ export function deleteStyleRegistry(id: string): void {
  */
 export function generateCss(styles: Styles) {
     let generatedCss = "";
-    Object.keys(styles).forEach((className: string) => {
-        if (!_.isEmpty(styles[className])) {
-            generatedCss += generateCssBlock(className, styles[className]);
+    Object.keys(styles).forEach((selector: string) => {
+        if (!_.isEmpty(styles[selector])) {
+            generatedCss += generateCssBlock(selector, styles[selector]);
         }
     });
     return generatedCss;
@@ -89,15 +91,17 @@ export function generateCss(styles: Styles) {
 /**
  * Generate styles from an object
  *
- * @param className
+ * @param selector
  * @param styles
  */
-export function generateCssBlock(className: string, styles: Style) {
+export function generateCssBlock(selector: string, styles: Style) {
     let generatedStyles = "";
+
     Object.keys(styles).forEach((key: string) => {
         if (!_.isEmpty(styles[key])) {
-            generatedStyles += `${fromCamelCaseToSnake(key)}: ${styles[key]}; `;
+            generatedStyles += `${fromCamelCaseToDash(key)}: ${styles[key]}; `;
         }
     });
-    return `.${className} { ${generatedStyles} }`;
+
+    return `${selector} { ${generatedStyles} }`;
 }