From b6b4325776a18c48adaddef0c717e01ae0514bf9 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 2 Jun 2022 14:52:52 +0200
Subject: [PATCH] Fix style image preview from parsed CSS. Closes #4362

---
 src/style_manager/model/Property.js        |  2 +-
 src/style_manager/model/PropertyFactory.js | 10 +++++-----
 src/style_manager/model/PropertyStack.js   |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js
index 58e4850d8..56258b7b6 100644
--- a/src/style_manager/model/Property.js
+++ b/src/style_manager/model/Property.js
@@ -373,7 +373,7 @@ export default class Property extends Model {
     }
 
     if (fn && hasValue) {
-      const fnParameter = fn === 'url' ? `'${value.replace(/'/g, '')}'` : value;
+      const fnParameter = fn === 'url' ? `'${value.replace(/'|"/g, '')}'` : value;
       value = `${fn}(${fnParameter})`;
     }
 
diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js
index 458f3ae2e..724d57dd9 100644
--- a/src/style_manager/model/PropertyFactory.js
+++ b/src/style_manager/model/PropertyFactory.js
@@ -357,11 +357,11 @@ export default class PropertyFactory {
         {
           detached: true,
           layerLabel: (l, { values }) => {
-            const repeat = values['background-repeat-sub'];
-            const pos = values['background-position-sub'];
-            const att = values['background-attachment-sub'];
-            const size = values['background-size-sub'];
-            return `${repeat} ${pos} ${att} ${size}`;
+            const repeat = values['background-repeat-sub'] || '';
+            const pos = values['background-position-sub'] || '';
+            const att = values['background-attachment-sub'] || '';
+            const size = values['background-size-sub'] || '';
+            return [repeat, pos, att, size].join(' ');
           },
           properties: this.__sub([
             { extend: 'background-image', id: 'background-image-sub' },
diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js
index 11c6a9d0c..5f2882915 100644
--- a/src/style_manager/model/PropertyStack.js
+++ b/src/style_manager/model/PropertyStack.js
@@ -320,7 +320,7 @@ export default class PropertyStack extends PropertyComposite {
     // Update properties by layer value
     values &&
       this.getProperties().forEach(prop => {
-        const value = values[prop.getId()];
+        const value = values[prop.getId()] ?? '';
         prop.__getFullValue() !== value && prop.upValue(value, { ...opts, __up: true });
       });