Trigger `component:styleUpdate` on component style changes. Closes #4897

src/style_manager/index.ts

@@ -474,9 +474,12 @@ export default class StyleManager extends ItemManagerModule<
    */
   addStyleTargets(style: StyleProps, opts: any) {
     this.getSelectedAll().map(t => t.addStyle(style, opts));
+    const target = this.getSelected();
+
+    // Trigger style changes on selected components
+    target && this.__emitCmpStyleUpdate(style);
 
     // Update state rule
-    const target = this.getSelected();
     const targetState = this.__getStateTarget();
     target && targetState?.setStyle(target.getStyle(), opts);
   }
@@ -714,6 +717,26 @@ export default class StyleManager extends ItemManagerModule<
     em && em.logWarning(`'${sectorId}' sector not found`);
   }
 
+  __emitCmpStyleUpdate(style: StyleProps, opts: { components?: Component | Component[] } = {}) {
+    const { em } = this;
+    const event = 'component:styleUpdate';
+
+    // Ignore partial updates
+    if (!style.__p) {
+      const cmp = opts.components || em.getSelectedAll();
+      const cmps = Array.isArray(cmp) ? cmp : [cmp];
+      const newStyle = { ...style };
+      delete newStyle.__p;
+      const styleKeys = Object.keys(newStyle);
+      const optsToPass = { style: newStyle };
+
+      cmps.forEach(component => {
+        em.trigger(event, component, optsToPass);
+        styleKeys.forEach(key => em.trigger(`${event}:${key}`, component, optsToPass));
+      });
+    }
+  }
+
   __upProps(opts = {}) {
     const lastTarget = this.getSelected();
     if (!lastTarget) return;