Update __upProp in order to support Stack with parent targets

src/style_manager/index.js

@@ -569,17 +569,13 @@ export default () => {
           this.__upProp(prop, style, parentStyles, opts);
           const props = prop.getProperties?.();
 
-          if (props) {
+          if (props && prop.getType() !== 'stack') {
-            if (prop.getType() === 'stack') {
+            const newStyle = prop.__getFromStyle(style);
-              prop.__setLayers(prop.__getLayersFromStyle(style));
+            const newParentStyles = parentStyles.map(p => ({
-            } else {
+              ...p,
-              const newStyle = prop.__getFromStyle(style);
+              style: prop.__getFromStyle(p.style),
-              const newParentStyles = parentStyles.map(p => ({
+            }));
-                ...p,
+            props.forEach(prop => this.__upProp(prop, newStyle, newParentStyles, opts));
-                style: prop.__getFromStyle(p.style),
-              }));
-              props.forEach(prop => this.__upProp(prop, newStyle, newParentStyles, opts));
-            }
           }
         });
       });
@@ -593,10 +589,20 @@ export default () => {
       const name = prop.getName();
       const value = style[name];
       const hasVal = propDef(value);
+      const isStack = prop.getType() === 'stack';
+      let newLayers = isStack ? prop.__getLayersFromStyle(style) : [];
       let newValue = hasVal ? value : null;
       let parentTarget = null;
 
-      if (!hasVal) {
+      if (isStack && newLayers === null) {
+        const parentItem = parentStyles.filter(p => prop.__getLayersFromStyle(p.style) !== null)[0];
+
+        if (parentItem) {
+          newValue = parentItem.style[name];
+          parentTarget = parentItem.target;
+          newLayers = prop.__getLayersFromStyle(parentItem.style);
+        }
+      } else if (!hasVal) {
         newValue = null;
         const parentItem = parentStyles.filter(p => propDef(p.style[name]))[0];
 
@@ -608,6 +614,7 @@ export default () => {
 
       prop.__setParentTarget(parentTarget);
       prop.__getFullValue() !== newValue && prop.upValue(newValue, { ...opts, __up: true });
+      isStack && prop.__setLayers(newLayers || []);
     },
 
     destroy() {

src/style_manager/model/PropertyStack.js

@@ -151,10 +151,10 @@ export default Property.extend({
     const props = this.getProperties();
     const nameProps = props.map(prop => prop.getName());
     const allNameProps = [name, ...nameProps];
-    const hasProps = allNameProps.some(prop => !isUndefined(style[prop]));
+    const hasProps = allNameProps.some(prop => !isUndefined(style[prop]) && style[prop] !== '');
 
     if (!hasProps) {
-      return [];
+      return null;
     } else {
       const sep = this.getLayerSeparator();
       const fromStyle = this.get('fromStyle');

test/specs/style_manager/model/Properties.js

@@ -163,6 +163,11 @@ describe('StyleManager properties logic', () => {
       ]);
     });
 
+    test('getLayersFromStyle with empty values', () => {
+      expect(compTypeProp.__getLayersFromStyle({ [propTest]: '' })).toBe(null);
+      expect(compTypeProp.__getLayersFromStyle({ color: 'red' })).toBe(null);
+    });
+
     test('Custom fromStyle', () => {
       compTypeProp.set('fromStyle', (style, { separatorLayers }) => {
         const layerValues = style[propTest].split(separatorLayers);
@@ -302,6 +307,22 @@ describe('StyleManager properties logic', () => {
       });
     });
 
+    test('Get the values from parent style', () => {
+      const rule2 = cssc.addRules(`
+        @media (max-width: 992px) {
+            .cls { color: red; }
+        }
+      `)[0];
+      dv.select('tablet');
+      obj.__upSel();
+      expect(obj.getLastSelected()).toBe(rule2);
+      expect(obj.getSelectedParents()).toEqual([rule1]);
+
+      expect(compTypeProp.hasValue()).toBe(true);
+      expect(compTypeProp.hasValue({ noParent: true })).toBe(false);
+      expect(compTypeProp.getLayers().length).toBe(2);
+    });
+
     test('Adding new layer, updates the rule', () => {
       compTypeProp.addLayer(
         {