Fix clear on detached stack properties

src/style_manager/model/PropertyStack.js

@@ -275,7 +275,7 @@ export default Property.extend({
         const value = isUndefined(val) ? prop.getDefaultValue() : val;
         return { name, value };
       });
-      style = this.get('detached')
+      style = this.isDetached()
         ? result.reduce((acc, item) => {
             acc[item.name] = item.value;
             return acc;
@@ -301,6 +301,7 @@ export default Property.extend({
     let result = {};
     const name = this.getName();
     const layers = this.getLayers();
+    const props = this.getProperties();
     const styles = layers.map(l => this.getStyleFromLayer(l));
     styles.forEach(style => {
       keys(style).map(key => {
@@ -314,8 +315,12 @@ export default Property.extend({
 
     if (this.isDetached()) {
       result[name] = '';
+      !layers.length &&
+        props.map(prop => {
+          result[prop.getName()] = '';
+        });
     } else {
-      const style = this.getProperties().reduce((acc, prop) => {
+      const style = props.reduce((acc, prop) => {
         acc[prop.getName()] = '';
         return acc;
       }, {});

test/specs/style_manager/model/Properties.js

@@ -585,6 +585,20 @@ describe('StyleManager properties logic', () => {
       });
     });
 
+    test('On clear removes all values (detached)', () => {
+      compTypeProp.set('detached', true);
+      compTypeProp.clear();
+      expect(compTypeProp.hasValue()).toBe(false);
+      expect(compTypeProp.getLayers().length).toBe(0);
+      expect(rule1.getStyle()).toEqual({
+        __p: false,
+        [propTest]: '',
+        [propATest]: '',
+        [propBTest]: '',
+        [propCTest]: '',
+      });
+    });
+
     test('Get the values from parent style', () => {
       const rule2 = cssc.addRules(`
         @media (max-width: 992px) {