Fix update composite detached rules

src/style_manager/index.js

@@ -619,8 +619,20 @@ export default () => {
       prop.__getFullValue() !== newValue && prop.upValue(newValue, opt);
       isStack && prop.__setLayers(newLayers || []);
       if (isComposite) {
-        prop.__setProperties(newProps || {}, opt);
-        prop.getProperties().map(pr => pr.__setParentTarget(parentTarget));
+        const props = prop.getProperties();
+
+        // Detached has to be treathed as separate properties
+        if (prop.isDetached()) {
+          const newStyle = prop.__getPropsFromStyle(style) || {};
+          const newParentStyles = parentStyles.map(p => ({
+            ...p,
+            style: prop.__getPropsFromStyle(p.style) || {},
+          }));
+          props.map(pr => this.__upProp(pr, newStyle, newParentStyles, opts));
+        } else {
+          prop.__setProperties(newProps || {}, opt);
+          prop.getProperties().map(pr => pr.__setParentTarget(parentTarget));
+        }
       }
     },
 

src/style_manager/model/PropertyComposite.js

@@ -42,11 +42,18 @@ export default Property.extend({
 
   __upProperties(p, opts = {}) {
     if (!this.__hasCustom() || opts.__up || opts.__clearIn) return;
-    this.__upTargetsStyleProps(opts);
+    this.__upTargetsStyleProps(p, opts);
   },
 
-  __upTargetsStyleProps(opts = {}) {
-    this.__upTargetsStyle(this.getStyleFromProps(), opts);
+  __upTargetsStyleProps(prop, opts = {}) {
+    let style = this.getStyleFromProps();
+
+    if (this.isDetached()) {
+      const name = prop.getName();
+      style = { [name]: style[name] };
+    }
+
+    this.__upTargetsStyle(style, opts);
   },
 
   /**

test/specs/style_manager/model/Properties.js

@@ -270,6 +270,52 @@ describe('StyleManager properties logic', () => {
       });
     });
 
+    test("Changing one inner rule (detached property) doesn't affect others", () => {
+      rule1.setStyle({
+        padding: '1px 2px',
+        'padding-left': '4px',
+      });
+      const rule2 = cssc.addRules(`
+        @media (max-width: 992px) {
+          .cls { padding-left: 44px }
+        }
+      `)[0];
+      dv.select('tablet');
+      obj.__upSel();
+      [
+        [propATest, '1px'],
+        [propBTest, '2px'],
+        [propCTest, '1px'],
+      ].forEach(item => {
+        const prop = compTypeProp.getProperty(item[0]);
+        expect(prop.hasValue({ noParent: true })).toBe(false);
+        expect(prop.getFullValue()).toBe(item[1]);
+      });
+
+      const propD = compTypeProp.getProperty(propDTest);
+      expect(propD.hasValue({ noParent: true })).toBe(true);
+      expect(propD.getFullValue()).toBe('44px');
+
+      // By editing the last one, the rule should not take other values
+      propD.upValue('45px');
+      compTypeProp.getProperty(propATest).upValue('11px');
+      obj.__upSel();
+      expect(rule2.getStyle()).toEqual({
+        __p: false,
+        [propATest]: '11px',
+        [propDTest]: '45px',
+      });
+      // Other properties shouldn't change
+      [
+        [propBTest, '2px'],
+        [propCTest, '1px'],
+      ].forEach(item => {
+        const prop = compTypeProp.getProperty(item[0]);
+        expect(prop.hasValue({ noParent: true })).toBe(false);
+        expect(prop.getFullValue()).toBe(item[1]);
+      });
+    });
+
     test('getStyleFromProps with custom toStyle', () => {
       rule1.setStyle({ padding: '1px 2px 3px 4px' });
       obj.__upSel();