Add __getFromStyle

src/style_manager/index.js

@@ -570,16 +570,11 @@ export default () => {
           const props = prop.getProperties?.();
 
           if (props) {
-            const fromStyle = prop.get('fromStyle');
-            let newStyle = style;
-            let newParentStyles = parentStyles;
-            if (fromStyle) {
-              newStyle = fromStyle(style);
-              newParentStyles = parentStyles.map(p => ({
-                ...p,
-                style: fromStyle(p.style),
-              }));
-            }
+            const newStyle = prop.__getFromStyle(style);
+            const newParentStyles = parentStyles.map(p => ({
+              ...p,
+              style: prop.__getFromStyle(p.style),
+            }));
             props.forEach(prop => this.__upProp(prop, newStyle, newParentStyles, opts));
           }
         });

src/style_manager/model/PropertyComposite.js

@@ -85,6 +85,33 @@ export default Property.extend({
     return isString(join) ? join : this.get('separator');
   },
 
+  __getFromStyle(style = {}) {
+    let result = {};
+    const fromStyle = this.get('fromStyle');
+
+    if (fromStyle) {
+      result = fromStyle(style);
+    } else if (!this.isDetached()) {
+      const name = this.getName();
+      const value = style[name];
+      if (value) {
+        const values = value.split(this.getSplitSeparator());
+        this.getProperties().forEach((prop, i) => {
+          const len = values.length;
+          // Try to get value from a shorthand:
+          // 11px -> 11px 11px 11px 11xp
+          // 11px 22px -> 11px 22px 11px 22xp
+          const value = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)];
+          result[prop.getId()] = value || '';
+        });
+      }
+    } else {
+      result = style;
+    }
+
+    return result;
+  },
+
   clear() {
     this.getProperties().map(p => p.clear({ __clearIn: true }));
     return Property.prototype.clear.call(this);