[REF] web_editor, *: review how html properties are printed (scss)

*: website

Make sure strings are printed quoted and null values are not printed.

Part of https://github.com/odoo/odoo/pull/54065
task-2291398

4 files changed, 39 insertions, 24 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index 6bf55bb787a..5ed02d3a332 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -176,7 +176,7 @@ const ColorPaletteWidget = Widget.extend({
             },
         });
         this.style.getPropertyValue(`--custom-colors`).trim().split(' ').forEach(v => {
-            const color = this.style.getPropertyValue(`--${v}`).trim();
+            const color = this.style.getPropertyValue(`--${v.substring(1, v.length - 1)}`).trim();
             if (ColorpickerWidget.isCSSColor(color)) {
                 this._addCustomColor(existingColors, color);
             }
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 020ba4f5203..9bfb7cf025e 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -4,7 +4,7 @@
 
 :root {
     @each $color, $value in $grays {
-        --#{$color}: #{$value};
+        @include print-variable($color, $value);
     }
 
     // Most of the keys of the color combination color should be null. We have
@@ -19,45 +19,45 @@
         $-h6: color('o-cc#{$index}-h6') or $-h5;
 
         @if not color('o-cc#{$index}-text') {
-            --o-cc#{$index}-text: #{$-text};
+            @include print-variable('o-cc#{$index}-text', $-text);
         }
         @if not color('o-cc#{$index}-headings') {
-            --o-cc#{$index}-headings: #{$-headings};
+            @include print-variable('o-cc#{$index}-headings', $-headings);
         }
         @if not color('o-cc#{$index}-h2') {
-            --o-cc#{$index}-h2: #{$-h2};
+            @include print-variable('o-cc#{$index}-h2', $-h2);
         }
         @if not color('o-cc#{$index}-h3') {
-            --o-cc#{$index}-h3: #{$-h3};
+            @include print-variable('o-cc#{$index}-h3', $-h3);
         }
         @if not color('o-cc#{$index}-h4') {
-            --o-cc#{$index}-h4: #{$-h4};
+            @include print-variable('o-cc#{$index}-h4', $-h4);
         }
         @if not color('o-cc#{$index}-h5') {
-            --o-cc#{$index}-h5: #{$-h5};
+            @include print-variable('o-cc#{$index}-h5', $-h5);
         }
         @if not color('o-cc#{$index}-h6') {
-            --o-cc#{$index}-h6: #{$-h6};
+            @include print-variable('o-cc#{$index}-h6', $-h6);
         }
 
         @if not color('o-cc#{$index}-link') {
-            --o-cc#{$index}-link: #{theme-color('primary')};
+            @include print-variable('o-cc#{$index}-link', theme-color('primary'));
         }
 
         $-btn-primary: color('o-cc#{$index}-btn-primary');
         @if not $-btn-primary {
-            --o-cc#{$index}-btn-primary: #{theme-color('primary')};
+            @include print-variable('o-cc#{$index}-btn-primary', theme-color('primary'));
         }
         @if not color('o-cc#{$index}-btn-primary-border') {
-            --o-cc#{$index}-btn-primary-border: #{$-btn-primary or theme-color('primary')};
+            @include print-variable('o-cc#{$index}-btn-primary-border', $-btn-primary or theme-color('primary'));
         }
 
         $-btn-secondary: color('o-cc#{$index}-btn-secondary');
         @if not $-btn-secondary {
-            --o-cc#{$index}-btn-secondary: #{theme-color('secondary')};
+            @include print-variable('o-cc#{$index}-btn-secondary', theme-color('secondary'));
         }
         @if not color('o-cc#{$index}-btn-secondary-border') {
-            --o-cc#{$index}-btn-secondary-border: #{$-btn-secondary or theme-color('secondary')};
+            @include print-variable('o-cc#{$index}-btn-secondary-border', $-btn-secondary or theme-color('secondary'));
         }
     }
 }
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index fd89f662567..21ce8c9fe8d 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -440,3 +440,18 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
         @include o-bg-color(o-color($-related-color), $background: $background, $important: false);
     }
 }
+
+// Print a document property the right way (depending on the type of the printed
+// variable).
+@mixin print-variable($key, $value) {
+    @if $value != null {
+        $-type: type-of($value);
+        @if $-type == 'string' {
+            --#{$key}: '#{$value}';
+        } @else if $-type == 'list' {
+            --#{$key}: #{inspect($value)};
+        } @else {
+            --#{$key}: #{$value};
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 08dc16f8c7b..57252fd1d05 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -4,19 +4,19 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 // Use css variables to control the default style of the editor so that an
 // external assets bundle can influence it without duplicating the css.
 :root {
-    --o-we-toolbar-height: #{$o-we-toolbar-height};
+    @include print-variable('o-we-toolbar-height', $o-we-toolbar-height);
 
-    --o-we-bg-color: #{$o-we-bg-color};
-    --o-we-bg-color-dark: #{$o-we-bg-color-dark};
-    --o-we-color: #{$o-we-color};
-    --o-we-color-accent: #{$o-we-color};
+    @include print-variable('o-we-bg-color', $o-we-bg-color);
+    @include print-variable('o-we-bg-color-dark', $o-we-bg-color-dark);
+    @include print-variable('o-we-color', $o-we-color);
+    @include print-variable('o-we-color-accent', $o-we-color);
 
-    --o-we-dropdown-bg-color: #{$o-we-dropdown-bg-color};
-    --o-we-dropdown-color: #{$o-we-dropdown-color};
+    @include print-variable('o-we-dropdown-bg-color', $o-we-dropdown-bg-color);
+    @include print-variable('o-we-dropdown-color', $o-we-dropdown-color);
 
-    --o-we-snippets-bg-color: #{$o-we-bg-color};
-    --o-we-snippets-bg-info: #{$o-we-color-info};
-    --o-we-snippets-color: #{$o-we-color};
+    @include print-variable('o-we-snippets-bg-color', $o-we-bg-color);
+    @include print-variable('o-we-snippets-bg-info', $o-we-color-info);
+    @include print-variable('o-we-snippets-color', $o-we-color);
 }
 
 // EDITOR TOP BAR AND POPOVER