From 5dcc5840fa41eb3f9deabf718178901b220f4391 Mon Sep 17 00:00:00 2001
From: Kaspar Naaber <kaspar.naaber@outlook.com>
Date: Fri, 15 Sep 2017 16:23:12 +0300
Subject: [PATCH] Interpolate CSS native variables in Design Editor files.

Fixes rebuilding Design Editor components with updated modules.
(closes #92)
---
 .../template-cs-button-content.scss           | 30 +++++-----
 .../template-cs-content-content.scss          | 60 +++++++++----------
 .../template-cs-content-front.scss            | 24 ++++----
 .../template-cs-footer-content.scss           | 12 ++--
 .../template-cs-form-content.scss             |  8 +--
 .../custom-styles/template-cs-form-front.scss |  6 +-
 .../template-cs-header-content.scss           | 54 ++++++++---------
 .../template-cs-headings-content.scss         | 48 +++++++--------
 .../template-cs-headings-front.scss           | 42 ++++++-------
 .../template-cs-main-styles-content.scss      |  6 +-
 .../template-cs-main-styles-front.scss        |  8 +--
 .../template-cs-table-content.scss            |  6 +-
 12 files changed, 152 insertions(+), 152 deletions(-)

diff --git a/sources/components/custom-styles/template-cs-button-content.scss b/sources/components/custom-styles/template-cs-button-content.scss
index 22cb5f2..12f8d3a 100644
--- a/sources/components/custom-styles/template-cs-button-content.scss
+++ b/sources/components/custom-styles/template-cs-button-content.scss
@@ -32,7 +32,7 @@
       "--content-button-hover-font-size"
     ]
   */
-  --content-button-font-size: 14px;
+  #{--content-button-font-size}: 14px;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -44,7 +44,7 @@
     "unit": "px",
     "scope": "global"
   */
-  --content-button-padding: 21px;
+  #{--content-button-padding}: 21px;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -57,7 +57,7 @@
       "--form-field-border-width"
     ]
   */
-  --content-button-border-width: 4px;
+  #{--content-button-border-width}: 4px;
 
   /* VoogStyle
     "pathI18n": ["button", "button", "normal"],
@@ -70,7 +70,7 @@
       "--content-button-hover-color"
     ]
   */
-  --content-button-color: rgba($color-white, 1);
+  #{--content-button-color}: rgba($color-white, 1);
 
       /* VoogStyle
         "pathI18n": ["button", "button", "hover"],
@@ -79,7 +79,7 @@
         "editor": "colorPicker",
         "scope": "global"
       */
-      --content-button-hover-color: rgba($color-white, 1);
+      #{--content-button-hover-color}: rgba($color-white, 1);
 
   /* VoogStyle
     "pathI18n": ["button", "button", "normal"],
@@ -92,7 +92,7 @@
       "--content-button-hover-background-color"
     ]
   */
-  --content-button-background-color: $blue-1;
+  #{--content-button-background-color}: $blue-1;
 
       /* VoogStyle
         "pathI18n": ["button", "button", "hover"],
@@ -101,7 +101,7 @@
         "editor": "colorPicker",
         "scope": "global"
       */
-      --content-button-hover-background-color: rgba($blue-1, .8);
+      #{--content-button-hover-background}-color: rgba($blue-1, .8);
 
 
   /* VoogStyle
@@ -119,7 +119,7 @@
       "--content-button-hover-font-weight"
     ]
   */
-  --content-button-font-weight: 400;
+  #{--content-button-font-weight}: 400;
 
       /* VoogStyle
         "pathI18n": ["button", "button", "hover"],
@@ -133,7 +133,7 @@
         "icon": "bold",
         "scope": "global"
       */
-      --content-button-hover-font-weight: 400;
+      #{--content-button-hover-font}-weight: 400;
 
   /* VoogStyle
     "pathI18n": ["button", "button", "normal"],
@@ -150,7 +150,7 @@
       "--content-button-hover-font-style"
     ]
   */
-  --content-button-font-style: normal;
+  #{--content-button-font-style}: normal;
 
       /* VoogStyle
         "pathI18n": ["button", "button", "hover"],
@@ -164,7 +164,7 @@
         "icon": "italic",
         "scope": "global"
       */
-      --content-button-hover-font-style: normal;
+      #{--content-button-hover-font}-style: normal;
 
   /* VoogStyle
     "pathI18n": ["button", "button", "normal"],
@@ -181,7 +181,7 @@
       "--content-button-hover-text-decoration"
     ]
   */
-  --content-button-text-decoration: none;
+  #{--content-button-text-decoration}: none;
 
       /* VoogStyle
         "pathI18n": ["button", "button", "hover"],
@@ -195,7 +195,7 @@
         "icon": "underline",
         "scope": "global"
       */
-      --content-button-hover-text-decoration: none;
+      #{--content-button-hover-text}-decoration: none;
 
   /* VoogStyle
     "pathI18n": ["button", "button", "normal"],
@@ -212,7 +212,7 @@
       "--content-button-hover-text-transform"
     ]
   */
-  --content-button-text-transform: none;
+  #{--content-button-text-transform}: none;
 
       /* VoogStyle
         "pathI18n": ["button", "button", "hover"],
@@ -226,7 +226,7 @@
         "icon": "uppercase",
         "scope": "global"
       */
-      --content-button-hover-text-transform: none;
+      #{--content-button-hover-text}-transform: none;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-content-content.scss b/sources/components/custom-styles/template-cs-content-content.scss
index 6294b52..6c739b6 100644
--- a/sources/components/custom-styles/template-cs-content-content.scss
+++ b/sources/components/custom-styles/template-cs-content-content.scss
@@ -25,7 +25,7 @@
     "editor": "colorPicker",
     "scope": "global"
   */
-  --content-background-color: $grey-4;
+  #{--content-background-color}: $grey-4;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -41,7 +41,7 @@
       "--menu-sub-active-font-size"
     ]
   */
-  --menu-sub-font-size: 14px;
+  #{--menu-sub-font-size}: 14px;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -59,7 +59,7 @@
       "--menu-sub-active-font-weight"
     ]
   */
-  --menu-sub-font-weight: 400;
+  #{--menu-sub-font-weight}: 400;
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "hover"],
@@ -76,7 +76,7 @@
           "--menu-sub-active-font-weight"
         ]
       */
-      --menu-sub-hover-font-weight: 400;
+      #{--menu-sub-hover-font}-weight: 400;
 
 
       /* VoogStyle
@@ -91,7 +91,7 @@
         "icon": "bold",
         "scope": "global"
       */
-      --menu-sub-active-font-weight: 400;
+      #{--menu-sub-active-font}-weight: 400;
 
 
   /* VoogStyle
@@ -110,7 +110,7 @@
       "--menu-sub-active-font-style"
     ]
   */
-  --menu-sub-font-style: normal;
+  #{--menu-sub-font-style}: normal;
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "hover"],
@@ -127,7 +127,7 @@
           "--menu-sub-active-font-style"
         ]
       */
-      --menu-sub-hover-font-style: normal;
+      #{--menu-sub-hover-font}-style: normal;
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "active"],
@@ -141,7 +141,7 @@
         "icon": "italic",
         "scope": "global"
       */
-      --menu-sub-active-font-style: normal;
+      #{--menu-sub-active-font}-style: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -159,7 +159,7 @@
       "--menu-sub-active-text-decoration"
     ]
   */
-  --menu-sub-text-decoration: none;
+  #{--menu-sub-text-decoration}: none;
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "hover"],
@@ -176,7 +176,7 @@
           "--menu-sub-active-text-decoration"
         ]
       */
-      --menu-sub-hover-text-decoration: none;
+      #{--menu-sub-hover-text}-decoration: none;
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "active"],
@@ -190,7 +190,7 @@
         "icon": "underline",
         "scope": "global"
       */
-      --menu-sub-active-text-decoration: none;
+      #{--menu-sub-active-text}-decoration: none;
 
 
   /* VoogStyle
@@ -209,7 +209,7 @@
       "--menu-sub-active-text-transform"
     ]
   */
-  --menu-sub-text-transform: none;
+  #{--menu-sub-text-transform}: none;
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "hover"],
@@ -226,7 +226,7 @@
           "--menu-sub-active-text-transform"
         ]
       */
-      --menu-sub-hover-text-transform: none;
+      #{--menu-sub-hover-text}-transform: none;
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "active"],
@@ -240,7 +240,7 @@
         "icon": "uppercase",
         "scope": "global"
       */
-      --menu-sub-active-text-transform: none;
+      #{--menu-sub-active-text}-transform: none;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -254,7 +254,7 @@
       "--menu-sub-active-color"
     ]
   */
-  --menu-sub-color: rgba($secondary-color, 1);
+  #{--menu-sub-color}: rgba($secondary-color, 1);
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "hover"],
@@ -265,7 +265,7 @@
         "boundVariables": [
         ]
       */
-      --menu-sub-hover-color: rgba($secondary-color, 1);
+      #{--menu-sub-hover-color}: rgba($secondary-color, 1);
 
       /* VoogStyle
         "pathI18n": ["content", "sub_menu", "active"],
@@ -274,7 +274,7 @@
         "editor": "colorPicker",
         "scope": "global"
       */
-      --menu-sub-active-color: rgba($secondary-color, 1);
+      #{--menu-sub-active-color}: rgba($secondary-color, 1);
 
   /* VoogStyle
     "pathI18n": ["content", "text"],
@@ -286,7 +286,7 @@
     "featured": true,
     "scope": "global"
   */
-  --content-body-font-size: $font-size-large;
+  #{--content-body-font-size}: $font-size-large;
 
   /* VoogStyle
     "pathI18n": ["content", "text"],
@@ -298,7 +298,7 @@
     "unit": "",
     "scope": "global"
   */
-  --content-body-line-height: 1.4;
+  #{--content-body-line-height}: 1.4;
 
   /* VoogStyle
     "pathI18n": ["content", "text"],
@@ -307,7 +307,7 @@
     "featured": true,
     "scope": "global"
   */
-  --content-body-text-color: rgba($primary-color, 1);
+  #{--content-body-text-color}: rgba($primary-color, 1);
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -324,7 +324,7 @@
       "--content-link-hover-font-weight"
     ]
   */
-  --content-link-font-weight: 400;
+  #{--content-link-font-weight}: 400;
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -338,7 +338,7 @@
         "icon": "bold",
         "scope": "global"
       */
-      --content-link-hover-font-weight: 400;
+      #{--content-link-hover-font}-weight: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -355,7 +355,7 @@
       "--content-link-hover-font-style"
     ]
   */
-  --content-link-font-style: normal;
+  #{--content-link-font-style}: normal;
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -369,7 +369,7 @@
         "icon": "italic",
         "scope": "global"
       */
-      --content-link-hover-font-style: normal;
+      #{--content-link-hover-font}-style: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -386,7 +386,7 @@
       "--content-link-hover-text-decoration"
     ]
   */
-  --content-link-text-decoration: none;
+  #{--content-link-text-decoration}: none;
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -400,7 +400,7 @@
         "icon": "underline",
         "scope": "global"
       */
-      --content-link-hover-text-decoration: none;
+      #{--content-link-hover-text}-decoration: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -417,7 +417,7 @@
       "--content-link-hover-text-transform"
     ]
   */
-  --content-link-text-transform: none;
+  #{--content-link-text-transform}: none;
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -431,7 +431,7 @@
         "icon": "uppercase",
         "scope": "global"
       */
-      --content-link-hover-text-transform: none;
+      #{--content-link-hover-text}-transform: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -441,7 +441,7 @@
     "featured": true,
     "scope": "global"
   */
-  --content-link-color: rgba($blue-1, 1);
+  #{--content-link-color}: rgba($blue-1, 1);
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -450,7 +450,7 @@
         "editor": "colorPicker",
         "scope": "global"
       */
-      --content-link-hover-color: rgba($blue-1, .8);
+      #{--content-link-hover-color}: rgba($blue-1, .8);
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-content-front.scss b/sources/components/custom-styles/template-cs-content-front.scss
index 1de496b..ab868b3 100644
--- a/sources/components/custom-styles/template-cs-content-front.scss
+++ b/sources/components/custom-styles/template-cs-content-front.scss
@@ -29,7 +29,7 @@
     "featured": true,
     "scope": "global"
   */
-  --content-body-font-size: $font-size-large;
+  #{--content-body-font-size}: $font-size-large;
 
   /* VoogStyle
     "pathI18n": ["content", "text"],
@@ -41,7 +41,7 @@
     "unit": "",
     "scope": "global"
   */
-  --content-body-line-height: 1.4;
+  #{--content-body-line-height}: 1.4;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -58,7 +58,7 @@
       "--content-link-hover-font-weight"
     ]
   */
-  --content-link-font-weight: 400;
+  #{--content-link-font-weight}: 400;
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -72,7 +72,7 @@
         "icon": "bold",
         "scope": "global"
       */
-      --content-link-hover-font-weight: 400;
+      #{--content-link-hover-font}-weight: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -89,7 +89,7 @@
       "--content-link-hover-font-style"
     ]
   */
-  --content-link-font-style: normal;
+  #{--content-link-font-style}: normal;
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -103,7 +103,7 @@
         "icon": "italic",
         "scope": "global"
       */
-      --content-link-hover-font-style: normal;
+      #{--content-link-hover-font}-style: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -120,7 +120,7 @@
       "--content-link-hover-text-decoration"
     ]
   */
-  --content-link-text-decoration: none;
+  #{--content-link-text-decoration}: none;
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -134,7 +134,7 @@
         "icon": "underline",
         "scope": "global"
       */
-      --content-link-hover-text-decoration: none;
+      #{--content-link-hover-text}-decoration: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -151,7 +151,7 @@
       "--content-link-hover-text-transform"
     ]
   */
-  --content-link-text-transform: none;
+  #{--content-link-text-transform}: none;
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -165,7 +165,7 @@
         "icon": "uppercase",
         "scope": "global"
       */
-      --content-link-hover-text-transform: none;
+      #{--content-link-hover-text}-transform: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -175,7 +175,7 @@
     "featured": true,
     "scope": "global"
   */
-  --content-link-color: rgba($blue-1, 1);
+  #{--content-link-color}: rgba($blue-1, 1);
 
       /* VoogStyle
         "pathI18n": ["content", "link", "hover"],
@@ -184,7 +184,7 @@
         "editor": "colorPicker",
         "scope": "global"
       */
-      --content-link-hover-color: rgba($blue-1, .8);
+      #{--content-link-hover-color}: rgba($blue-1, .8);
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-footer-content.scss b/sources/components/custom-styles/template-cs-footer-content.scss
index afa2962..eac8fc7 100644
--- a/sources/components/custom-styles/template-cs-footer-content.scss
+++ b/sources/components/custom-styles/template-cs-footer-content.scss
@@ -29,7 +29,7 @@
     "featured": true,
     "scope": "global"
   */
-  --footer-body-font-size: 14px;
+  #{--footer-body-font-size}: 14px;
 
   /* VoogStyle
     "pathI18n": ["footer"],
@@ -43,7 +43,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --footer-body-font-weight: 400;
+  #{--footer-body-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["footer"],
@@ -57,7 +57,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --footer-body-font-style: normal;
+  #{--footer-body-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["footer"],
@@ -71,7 +71,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --footer-body-text-decoration: none;
+  #{--footer-body-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["footer"],
@@ -85,7 +85,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --footer-body-text-transform: none;
+  #{--footer-body-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["footer"],
@@ -95,7 +95,7 @@
     "featured": true,
     "scope": "global"
   */
-  --footer-body-color: rgba($primary-color, 1);
+  #{--footer-body-color}: rgba($primary-color, 1);
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-form-content.scss b/sources/components/custom-styles/template-cs-form-content.scss
index 48dc39e..89923e4 100644
--- a/sources/components/custom-styles/template-cs-form-content.scss
+++ b/sources/components/custom-styles/template-cs-form-content.scss
@@ -29,7 +29,7 @@
     "scope": "global",
     "featured": true
   */
-  --form-label-font-size: 14px;
+  #{--form-label-font-size}: 14px;
 
   /* VoogStyle
     "pathI18n": ["form"],
@@ -41,7 +41,7 @@
     "scope": "global",
     "featured": true
   */
-  --form-field-font-size: 14px;
+  #{--form-field-font-size}: 14px;
 
   /* VoogStyle
     "pathI18n": ["form"],
@@ -51,7 +51,7 @@
     "featured": true,
     "scope": "global"
   */
-  --form-field-border-width: 4px;
+  #{--form-field-border-width}: 4px;
 
   /* VoogStyle
     "pathI18n": ["form"],
@@ -60,7 +60,7 @@
     "scope": "global",
     "featured": true
   */
-  --form-field-color: rgba($secondary-color, 1);
+  #{--form-field-color}: rgba($secondary-color, 1);
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-form-front.scss b/sources/components/custom-styles/template-cs-form-front.scss
index cdf9009..0061726 100644
--- a/sources/components/custom-styles/template-cs-form-front.scss
+++ b/sources/components/custom-styles/template-cs-form-front.scss
@@ -29,7 +29,7 @@
     "scope": "global",
     "featured": true
   */
-  --form-label-font-size: 14px;
+  #{--form-label-font-size}: 14px;
 
   /* VoogStyle
     "pathI18n": ["form"],
@@ -41,7 +41,7 @@
     "scope": "global",
     "featured": true
   */
-  --form-field-font-size: 14px;
+  #{--form-field-font-size}: 14px;
 
   /* VoogStyle
     "pathI18n": ["form"],
@@ -51,7 +51,7 @@
     "featured": true,
     "scope": "global"
   */
-  --form-field-border-width: 4px;
+  #{--form-field-border-width}: 4px;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-header-content.scss b/sources/components/custom-styles/template-cs-header-content.scss
index 073648c..075ef06 100644
--- a/sources/components/custom-styles/template-cs-header-content.scss
+++ b/sources/components/custom-styles/template-cs-header-content.scss
@@ -29,7 +29,7 @@
     "featured": true,
     "scope": "global"
   */
-  --header-body-font-size: 24px;
+  #{--header-body-font-size}: 24px;
 
   /* VoogStyle
     "pathI18n": ["header", "title", "normal"],
@@ -46,7 +46,7 @@
       "---header-body-hover-font-weight"
     ]
   */
-  --header-body-font-weight: 600;
+  #{--header-body-font-weight}: 600;
 
     /* VoogStyle
       "pathI18n": ["header", "title", "hover"],
@@ -60,7 +60,7 @@
       "icon": "bold",
       "scope": "global"
     */
-    --header-body-hover-font-weight: 600;
+    #{--header-body-hover-font}-weight: 600;
 
   /* VoogStyle
     "pathI18n": ["header", "title", "normal"],
@@ -77,7 +77,7 @@
       "--header-body-hover-font-style"
     ]
   */
-  --header-body-font-style: normal;
+  #{--header-body-font-style}: normal;
 
     /* VoogStyle
       "pathI18n": ["header", "title", "hover"],
@@ -91,7 +91,7 @@
       "icon": "italic",
       "scope": "global"
     */
-    --header-body-hover-font-style: normal;
+    #{--header-body-hover-font}-style: normal;
 
   /* VoogStyle
     "pathI18n": ["header", "title", "normal"],
@@ -108,7 +108,7 @@
       "--header-body-hover-text-decoration"
     ]
   */
-  --header-body-text-decoration: none;
+  #{--header-body-text-decoration}: none;
 
     /* VoogStyle
       "pathI18n": ["header", "title", "hover"],
@@ -122,7 +122,7 @@
       "icon": "underline",
       "scope": "global"
     */
-    --header-body-hover-text-decoration: none;
+    #{--header-body-hover-text}-decoration: none;
 
   /* VoogStyle
     "pathI18n": ["header", "title", "normal"],
@@ -139,7 +139,7 @@
       "--header-body-hover-text-transform"
     ]
   */
-  --header-body-text-transform: none;
+  #{--header-body-text-transform}: none;
 
     /* VoogStyle
       "pathI18n": ["header", "title", "hover"],
@@ -153,7 +153,7 @@
       "icon": "uppercase",
       "scope": "global"
     */
-    --header-body-hover-text-transform: none;
+    #{--header-body-hover-text}-transform: none;
 
   /* VoogStyle
     "pathI18n": ["header", "title", "normal"],
@@ -166,7 +166,7 @@
       "--header-body-hover-text-color"
     ]
   */
-  --header-body-text-color: rgba($secondary-color, 1);
+  #{--header-body-text-color}: rgba($secondary-color, 1);
 
     /* VoogStyle
       "pathI18n": ["header", "title", "hover"],
@@ -175,7 +175,7 @@
       "editor": "colorPicker",
       "scope": "global"
     */
-    --header-body-hover-text-color: rgba($secondary-color, 1);
+    #{--header-body-hover-text}-color: rgba($secondary-color, 1);
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -187,7 +187,7 @@
     "featured": true,
     "scope": "global"
   */
-  --menu-main-font-size: 14px;
+  #{--menu-main-font-size}: 14px;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -205,7 +205,7 @@
       "--menu-main-active-font-weight"
     ]
   */
-  --menu-main-font-weight: 600;
+  #{--menu-main-font-weight}: 600;
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "hover"],
@@ -222,7 +222,7 @@
           "--menu-main-active-font-weight"
         ]
       */
-      --menu-main-hover-font-weight: 600;
+      #{--menu-main-hover-font}-weight: 600;
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "active"],
@@ -236,7 +236,7 @@
         "icon": "bold",
         "scope": "global"
       */
-      --menu-main-active-font-weight: 600;
+      #{--menu-main-active-font}-weight: 600;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -254,7 +254,7 @@
       "--menu-main-active-font-style"
     ]
   */
-  --menu-main-font-style: normal;
+  #{--menu-main-font-style}: normal;
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "hover"],
@@ -271,7 +271,7 @@
           "--menu-main-active-font-style"
         ]
       */
-      --menu-main-hover-font-style: normal;
+      #{--menu-main-hover-font}-style: normal;
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "active"],
@@ -285,7 +285,7 @@
         "icon": "italic",
         "scope": "global"
       */
-      --menu-main-active-font-style: normal;
+      #{--menu-main-active-font}-style: normal;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -303,7 +303,7 @@
       "--menu-main-active-text-decoration"
     ]
   */
-  --menu-main-text-decoration: none;
+  #{--menu-main-text-decoration}: none;
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "hover"],
@@ -320,7 +320,7 @@
           "--menu-main-active-text-decoration"
         ]
       */
-      --menu-main-hover-text-decoration: none;
+      #{--menu-main-hover-text}-decoration: none;
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "active"],
@@ -334,7 +334,7 @@
         "icon": "underline",
         "scope": "global"
       */
-      --menu-main-active-text-decoration: none;
+      #{--menu-main-active-text}-decoration: none;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -352,7 +352,7 @@
       "--menu-main-active-text-transform"
     ]
   */
-  --menu-main-text-transform: none;
+  #{--menu-main-text-transform}: none;
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "hover"],
@@ -369,7 +369,7 @@
           "--menu-main-active-text-transform"
         ]
       */
-      --menu-main-hover-text-transform: none;
+      #{--menu-main-hover-text}-transform: none;
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "active"],
@@ -383,7 +383,7 @@
         "icon": "uppercase",
         "scope": "global"
       */
-      --menu-main-active-text-transform: none;
+      #{--menu-main-active-text}-transform: none;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -397,7 +397,7 @@
       "--menu-main-active-color"
     ]
   */
-  --menu-main-color: rgba($secondary-color, 1);
+  #{--menu-main-color}: rgba($secondary-color, 1);
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "hover"],
@@ -408,7 +408,7 @@
         "boundVariables": [
         ]
       */
-      --menu-main-hover-color: rgba($secondary-color, 1);
+      #{--menu-main-hover-color}: rgba($secondary-color, 1);
 
       /* VoogStyle
         "pathI18n": ["header", "main_menu", "active"],
@@ -417,7 +417,7 @@
         "editor": "colorPicker",
         "scope": "global"
       */
-      --menu-main-active-color: rgba($secondary-color, 1);
+      #{--menu-main-active-color}: rgba($secondary-color, 1);
 
   // scss-lint:enable Comment, Indentation
 
diff --git a/sources/components/custom-styles/template-cs-headings-content.scss b/sources/components/custom-styles/template-cs-headings-content.scss
index 301c20f..4ab5e81 100644
--- a/sources/components/custom-styles/template-cs-headings-content.scss
+++ b/sources/components/custom-styles/template-cs-headings-content.scss
@@ -26,7 +26,7 @@
     "list": {{ base_alignment_set }},
     "scope": "global"
   */
-  --headings-title-text-alignment: center;
+  #{--headings-title-text-alignment}: center;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -38,7 +38,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-title-font-size: 36px;
+  #{--headings-title-font-size}: 36px;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -50,7 +50,7 @@
     "unit": "",
     "scope": "global"
   */
-  --headings-title-line-height: 1.4;
+  #{--headings-title-line-height}: 1.4;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -64,7 +64,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --headings-title-font-weight: 600;
+  #{--headings-title-font-weight}: 600;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -78,7 +78,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --headings-title-font-style: normal;
+  #{--headings-title-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -92,7 +92,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --headings-title-text-decoration: none;
+  #{--headings-title-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -106,7 +106,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --headings-title-text-transform: none;
+  #{--headings-title-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -116,7 +116,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-title-color: rgba($primary-color, 1);
+  #{--headings-title-color}: rgba($primary-color, 1);
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -125,7 +125,7 @@
     "list": {{ base_alignment_set }},
     "scope": "global"
   */
-  --headings-heading-text-alignment: left;
+  #{--headings-heading-text-alignment}: left;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -137,7 +137,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-heading-font-size: 24px;
+  #{--headings-heading-font-size}: 24px;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -149,7 +149,7 @@
     "unit": "",
     "scope": "global"
   */
-  --headings-heading-line-height: 1.4;
+  #{--headings-heading-line-height}: 1.4;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -163,7 +163,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --headings-heading-font-weight: 600;
+  #{--headings-heading-font-weight}: 600;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -177,7 +177,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --headings-heading-font-style: normal;
+  #{--headings-heading-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -191,7 +191,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --headings-heading-text-decoration: none;
+  #{--headings-heading-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -205,7 +205,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --headings-heading-text-transform: none;
+  #{--headings-heading-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -215,7 +215,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-heading-color: rgba($primary-color, 1);
+  #{--headings-heading-color}: rgba($primary-color, 1);
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -224,7 +224,7 @@
     "list": {{ base_alignment_set }},
     "scope": "global"
   */
-  --headings-subheading-text-alignment: left;
+  #{--headings-subheading-text-alignment}: left;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -236,7 +236,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-subheading-font-size: 20px;
+  #{--headings-subheading-font-size}: 20px;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -248,7 +248,7 @@
     "unit": "",
     "scope": "global"
   */
-  --headings-subheading-line-height: 1.4;
+  #{--headings-subheading-line-height}: 1.4;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -262,7 +262,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --headings-subheading-font-weight: 600;
+  #{--headings-subheading-font-weight}: 600;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -276,7 +276,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --headings-subheading-font-style: normal;
+  #{--headings-subheading-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -290,7 +290,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --headings-subheading-text-decoration: none;
+  #{--headings-subheading-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -304,7 +304,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --headings-subheading-text-transform: none;
+  #{--headings-subheading-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -314,7 +314,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-subheading-color: rgba($primary-color, 1);
+  #{--headings-subheading-color}: rgba($primary-color, 1);
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-headings-front.scss b/sources/components/custom-styles/template-cs-headings-front.scss
index c687bc2..411b838 100644
--- a/sources/components/custom-styles/template-cs-headings-front.scss
+++ b/sources/components/custom-styles/template-cs-headings-front.scss
@@ -26,7 +26,7 @@
     "list": {{ base_alignment_set }},
     "scope": "global"
   */
-  --headings-title-text-alignment: center;
+  #{--headings-title-text-alignment}: center;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -38,7 +38,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-title-font-size: 36px;
+  #{--headings-title-font-size}: 36px;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -50,7 +50,7 @@
     "unit": "",
     "scope": "global"
   */
-  --headings-title-line-height: 1.4;
+  #{--headings-title-line-height}: 1.4;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -64,7 +64,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --headings-title-font-weight: 600;
+  #{--headings-title-font-weight}: 600;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -78,7 +78,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --headings-title-font-style: normal;
+  #{--headings-title-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -92,7 +92,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --headings-title-text-decoration: none;
+  #{--headings-title-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -106,7 +106,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --headings-title-text-transform: none;
+  #{--headings-title-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -115,7 +115,7 @@
     "list": {{ base_alignment_set }},
     "scope": "global"
   */
-  --headings-heading-text-alignment: left;
+  #{--headings-heading-text-alignment}: left;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -127,7 +127,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-heading-font-size: 24px;
+  #{--headings-heading-font-size}: 24px;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -139,7 +139,7 @@
     "unit": "",
     "scope": "global"
   */
-  --headings-heading-line-height: 1.4;
+  #{--headings-heading-line-height}: 1.4;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -153,7 +153,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --headings-heading-font-weight: 600;
+  #{--headings-heading-font-weight}: 600;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -167,7 +167,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --headings-heading-font-style: normal;
+  #{--headings-heading-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -181,7 +181,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --headings-heading-text-decoration: none;
+  #{--headings-heading-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -195,7 +195,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --headings-heading-text-transform: none;
+  #{--headings-heading-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -204,7 +204,7 @@
     "list": {{ base_alignment_set }},
     "scope": "global"
   */
-  --headings-subheading-text-alignment: left;
+  #{--headings-subheading-text-alignment}: left;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -216,7 +216,7 @@
     "featured": true,
     "scope": "global"
   */
-  --headings-subheading-font-size: 20px;
+  #{--headings-subheading-font-size}: 20px;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -228,7 +228,7 @@
     "unit": "",
     "scope": "global"
   */
-  --headings-subheading-line-height: 1.4;
+  #{--headings-subheading-line-height}: 1.4;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -242,7 +242,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --headings-subheading-font-weight: 600;
+  #{--headings-subheading-font-weight}: 600;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -256,7 +256,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --headings-subheading-font-style: normal;
+  #{--headings-subheading-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -270,7 +270,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --headings-subheading-text-decoration: none;
+  #{--headings-subheading-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -284,7 +284,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --headings-subheading-text-transform: none;
+  #{--headings-subheading-text-transform}: none;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-main-styles-content.scss b/sources/components/custom-styles/template-cs-main-styles-content.scss
index 4650c1a..2d6774a 100644
--- a/sources/components/custom-styles/template-cs-main-styles-content.scss
+++ b/sources/components/custom-styles/template-cs-main-styles-content.scss
@@ -27,7 +27,7 @@
     "featured": true,
     "scope": "global"
   */
-  --main-font-family: $base-font-family;
+  #{--main-font-family}: $base-font-family;
 
   /* VoogStyle
     "pathI18n": ["main_styles", "colors"],
@@ -43,7 +43,7 @@
       "--footer-body-color"
     ]
   */
-  --main-color-content: rgba($primary-color, 1);
+  #{--main-color-content}: rgba($primary-color, 1);
 
   /* VoogStyle
     "pathI18n": ["main_styles", "colors"],
@@ -59,7 +59,7 @@
       "--form-field-color"
     ]
   */
-  --secondary-color-content: rgba($secondary-color, 1);
+  #{--secondary-color-content}: rgba($secondary-color, 1);
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-main-styles-front.scss b/sources/components/custom-styles/template-cs-main-styles-front.scss
index fac7cdd..0b50449 100644
--- a/sources/components/custom-styles/template-cs-main-styles-front.scss
+++ b/sources/components/custom-styles/template-cs-main-styles-front.scss
@@ -27,7 +27,7 @@
     "featured": true,
     "scope": "global"
   */
-  --main-font-family: $base-font-family;
+  #{--main-font-family}: $base-font-family;
 
   /* VoogStyle
     "pathI18n": ["main_styles", "colors"],
@@ -40,7 +40,7 @@
       "--form-button-color"
     ]
   */
-  --third-color: rgba($color-white, 1);
+  #{--third-color}: rgba($color-white, 1);
 
   /* VoogStyle
     "pathI18n": ["main_styles", "colors"],
@@ -55,7 +55,7 @@
       "--form-field-color"
     ]
   */
-  --secondary-color-content: rgba($secondary-color, 1);
+  #{--secondary-color-content}: rgba($secondary-color, 1);
 
   /* VoogStyle
     "pathI18n": ["main_styles", "colors"],
@@ -71,7 +71,7 @@
       "--footer-body-color"
     ]
   */
-  --main-color-content: rgba($primary-color, 1);
+  #{--main-color-content}: rgba($primary-color, 1);
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-table-content.scss b/sources/components/custom-styles/template-cs-table-content.scss
index d27739d..7c46f2b 100644
--- a/sources/components/custom-styles/template-cs-table-content.scss
+++ b/sources/components/custom-styles/template-cs-table-content.scss
@@ -28,7 +28,7 @@
     "unit": "px",
     "scope": "global"
   */
-  --table-font-size: 16px;
+  #{--table-font-size}: 16px;
 
   /* VoogStyle
     "pathI18n": ["table"],
@@ -40,7 +40,7 @@
     "unit": "px",
     "scope": "global"
   */
-  --table-padding: 10px;
+  #{--table-padding}: 10px;
 
   /* VoogStyle
     "pathI18n": ["table"],
@@ -50,7 +50,7 @@
     "featured": true,
     "scope": "global"
   */
-  --table-border-style: solid;
+  #{--table-border-style}: solid;
 
   // scss-lint:enable Comment, Indentation
 }