Fix style image preview from parsed CSS. Closes #4362

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})`;
     }
 

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' },

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 });
       });