Update compTypeProp.getStyleFromProps

src/style_manager/model/PropertyComposite.js

@@ -93,22 +93,29 @@ export default Property.extend({
       values = this.getValues({ byName: true });
 
       if (this.isDetached()) {
-        style = { [name]: '', ...values };
+        style = values;
       } else {
         const value = this.getProperties()
           .map(p => p.__getFullValue({ withDefault: 1 }))
           .filter(Boolean)
           .join(join);
-        style = {
-          [name]: value,
-          ...Object.keys(values).reduce((acc, prop) => {
-            acc[prop] = '';
-            return acc;
-          }, {}),
-        };
+        style = { [name]: value };
       }
     }
 
+    if (this.isDetached()) {
+      style[name] = '';
+    } else {
+      style[name] = style[name] || '';
+      style = {
+        ...style,
+        ...this.getProperties().reduce((acc, prop) => {
+          acc[prop.getName()] = '';
+          return acc;
+        }, {}),
+      };
+    }
+
     return opts.camelCase
       ? Object.keys(style).reduce((res, key) => {
           res[camelCase(key)] = style[key];

test/specs/style_manager/model/Properties.js

@@ -172,6 +172,24 @@ describe('StyleManager properties logic', () => {
       });
     });
 
+    test('getStyleFromProps with custom toStyle', () => {
+      rule1.setStyle({ padding: '1px 2px 3px 4px' });
+      obj.__upSel();
+      compTypeProp.set('toStyle', values => {
+        return {
+          [propTest]: `rgba(${values[propATest]}, ${values[propBTest]}, ${values[propDTest]})`,
+        };
+      });
+      compTypeProp.set('detached', false);
+      expect(compTypeProp.getStyleFromProps()).toEqual({
+        [propTest]: 'rgba(1px, 2px, 4px)',
+        [propATest]: '',
+        [propBTest]: '',
+        [propCTest]: '',
+        [propDTest]: '',
+      });
+    });
+
     test('Update on properties reflects to the rule correctly', () => {
       compTypeProp.set('detached', false);
       rule1.setStyle({ padding: '1px 2px 3px 4px' });