Improve style updates on stack types

src/style_manager/model/PropertyStack.js

@@ -36,6 +36,16 @@ export default Property.extend({
     return this.get('detached') ? '' : this.get('layers').getFullValue();
   },
 
+  getValueFromStyle(styles = {}) {
+    const layers = this.getLayers().getLayersFromStyle(styles);
+    return new Layers(layers).getFullValue();
+  },
+
+  clearValue() {
+    this.getLayers().reset();
+    return Property.prototype.clearValue.apply(this, arguments);
+  },
+
   /**
    * This method allows to customize layers returned from the target
    * @param  {Object} target

src/style_manager/view/PropertyStackView.js

@@ -1,3 +1,4 @@
+import { isUndefined } from 'underscore';
 import PropertyCompositeView from './PropertyCompositeView';
 import LayersView from './LayersView';
 
@@ -23,13 +24,6 @@ export default PropertyCompositeView.extend({
     this.delegateEvents();
   },
 
-  clear(e) {
-    e && e.stopPropagation();
-    this.model.get('layers').reset();
-    this.model.clearValue();
-    this.targetUpdated();
-  },
-
   /**
    * Fired when the target is updated.
    * With detached mode the component will be always empty as its value
@@ -138,6 +132,21 @@ export default PropertyCompositeView.extend({
     model.set({ stackIndex: null }, { silent: true });
   },
 
+  getTargetValue(opts = {}) {
+    let result = PropertyCompositeView.prototype.getTargetValue.call(
+      this,
+      opts
+    );
+    const { detached } = this.model.attributes;
+
+    // It might happen that the browser split properties on CSSOM parse
+    if (isUndefined(result) && !detached) {
+      result = this.model.getValueFromStyle(this.getTarget().getStyle());
+    }
+
+    return result;
+  },
+
   onRender() {
     const self = this;
     const model = this.model;
@@ -159,7 +168,10 @@ export default PropertyCompositeView.extend({
           // Update only if there is an actual update (to avoid changes for computed styles)
           // ps: status is calculated in `targetUpdated` method
           if (model.get('status') == 'updated') {
-            model.set('value', model.getFullValue(), opt);
+            const value = model.getFullValue();
+            model.set('value', value, opt);
+            // Try to remove detached properties
+            !value && view.updateTargetStyle(value, null, opt);
           }
         }
       }
@@ -179,8 +191,7 @@ export default PropertyCompositeView.extend({
       stackModel: model,
       config: this.config,
       onChange: propsConfig.onChange,
-      propTarget: propsConfig.propTarget,
-      customValue: propsConfig.customValue
+      propTarget: propsConfig.propTarget
     }).render();
 
     //model.get('properties')

src/style_manager/view/PropertyView.js

@@ -200,7 +200,7 @@ export default Backbone.View.extend({
   setStatus(value) {
     this.model.set('status', value);
     const parent = this.model.parent;
-    parent && value && parent.set('status', value);
+    parent && value == 'updated' && parent.set('status', value);
   },
 
   emitUpdateTarget: debounce(function() {
@@ -249,18 +249,8 @@ export default Backbone.View.extend({
       status = '';
     }
 
-    if (property == 'box-shadow' || property == 'transition') {
-      console.log({
-        property,
-        status,
-        targetValue,
-        computedValue,
-        defaultValue
-      });
-    }
-
-    model.setValue(value, 0, { fromTarget: 1 });
     this.setStatus(status);
+    model.setValue(value, 0, { fromTarget: 1 });
 
     if (em) {
       em.trigger('styleManager:change', this, property, value);
@@ -297,10 +287,10 @@ export default Backbone.View.extend({
    * @private
    */
   getTargetValue(opts = {}) {
-    var result;
-    var model = this.model;
-    var target = this.getTargetModel();
-    var customFetchValue = this.customValue;
+    let result;
+    const { model } = this;
+    const target = this.getTargetModel();
+    const customFetchValue = this.customValue;
 
     if (!target) {
       return result;
@@ -314,7 +304,7 @@ export default Backbone.View.extend({
 
     if (typeof customFetchValue == 'function' && !opts.ignoreCustomValue) {
       let index = model.collection.indexOf(model);
-      let customValue = customFetchValue(this, index);
+      let customValue = customFetchValue(this, index, result);
 
       if (customValue) {
         result = customValue;