diff --git a/examples/color-processing/themes/default/root.css b/examples/color-processing/themes/default/root.css
index 05777cc..ba4c918 100644
--- a/examples/color-processing/themes/default/root.css
+++ b/examples/color-processing/themes/default/root.css
@@ -1,9 +1,4 @@
-/**
- * Do not edit directly
- * Generated on Sat, 11 Jul 2020 19:25:45 GMT
- */
-
 :root {
-  --color-controls-type-action-typo-base: rgba(0, 0, 0, 0.1);
-  --color-controls-type-action-fill-color-base: rgb(235, 225, 224);
+    --color-controls-type-action-fill-color-base: rgb(235, 225, 224);
+    --color-controls-type-action-typo-base: rgba(0, 0, 0, 0.1);
 }
diff --git a/examples/extends/themes/legacy/root.css b/examples/extends/themes/legacy/root.css
index a3d1d23..7325638 100644
--- a/examples/extends/themes/legacy/root.css
+++ b/examples/extends/themes/legacy/root.css
@@ -1,13 +1,8 @@
-/**
- * Do not edit directly
- * Generated on Sat, 11 Jul 2020 19:20:22 GMT
- */
-
 :root {
-  --color-controls-type-action-typo-base: #000;
-  --color-controls-type-action-fill-color-base: #fff;
-  --color-controls-type-action-fill-color-hover: #f00;
-  --typo-control-font-family: Arial, sans-serif;
-  --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
-  --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --color-controls-type-action-fill-color-base: #fff;
+    --color-controls-type-action-fill-color-hover: #f00;
+    --color-controls-type-action-typo-base: #000;
+    --typo-control-font-family: Arial, sans-serif;
+    --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
 }
diff --git a/examples/mappings/themes/default/root.css b/examples/mappings/themes/default/root.css
index 234bcf1..94f2c42 100644
--- a/examples/mappings/themes/default/root.css
+++ b/examples/mappings/themes/default/root.css
@@ -1,9 +1,9 @@
 :root {
-    --color-typo-base: #000;
+    --button-fill-color: var(--color-bg-base);
     --color-bg-base: #fff;
     --color-bg-hover: #ccc;
-    --button-fill-color: var(--color-bg-base);
+    --color-typo-base: #000;
     --typo-control-font-family: Arial, sans-serif;
-    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
     --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
 }
diff --git a/examples/platforms/themes/default/desktop/root.css b/examples/platforms/themes/default/desktop/root.css
index c4fec1a..163a8bc 100644
--- a/examples/platforms/themes/default/desktop/root.css
+++ b/examples/platforms/themes/default/desktop/root.css
@@ -1,13 +1,8 @@
-/**
- * Do not edit directly
- * Generated on Sat, 11 Jul 2020 19:17:56 GMT
- */
-
 :root {
-  --color-controls-type-action-typo-base: #ccc;
-  --color-controls-type-action-fill-color-base: #fff;
-  --color-controls-type-action-fill-color-hover: #ccc;
-  --typo-control-font-family: Arial, sans-serif;
-  --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
-  --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --color-controls-type-action-fill-color-base: #fff;
+    --color-controls-type-action-fill-color-hover: #ccc;
+    --color-controls-type-action-typo-base: #ccc;
+    --typo-control-font-family: Arial, sans-serif;
+    --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
 }
diff --git a/examples/platforms/themes/default/touch/root.css b/examples/platforms/themes/default/touch/root.css
index b3a614a..4b94c33 100644
--- a/examples/platforms/themes/default/touch/root.css
+++ b/examples/platforms/themes/default/touch/root.css
@@ -1,13 +1,8 @@
-/**
- * Do not edit directly
- * Generated on Sat, 11 Jul 2020 19:17:56 GMT
- */
-
 :root {
-  --color-controls-type-action-typo-base: #999;
-  --color-controls-type-action-fill-color-base: #fff;
-  --color-controls-type-action-fill-color-hover: #ccc;
-  --typo-control-font-family: Arial, sans-serif;
-  --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
-  --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --color-controls-type-action-fill-color-base: #fff;
+    --color-controls-type-action-fill-color-hover: #ccc;
+    --color-controls-type-action-typo-base: #999;
+    --typo-control-font-family: Arial, sans-serif;
+    --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
 }
diff --git a/examples/simple/themes/default/root.css b/examples/simple/themes/default/root.css
index ecedad1..5b46499 100644
--- a/examples/simple/themes/default/root.css
+++ b/examples/simple/themes/default/root.css
@@ -1,9 +1,9 @@
 :root {
-    --color-controls-type-action-typo-base: #000;
+    --button-fill-color: var(--color-controls-type-action-fill-color-base);
     --color-controls-type-action-fill-color-base: #fff;
     --color-controls-type-action-fill-color-hover: #ccc;
-    --button-fill-color: var(--color-controls-type-action-fill-color-base);
+    --color-controls-type-action-typo-base: #000;
     --typo-control-font-family: Arial, sans-serif;
-    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
     --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
 }
diff --git a/examples/whitepaper/themes/default/desktop/color.css b/examples/whitepaper/themes/default/desktop/color.css
index 0603691..c5d4f77 100644
--- a/examples/whitepaper/themes/default/desktop/color.css
+++ b/examples/whitepaper/themes/default/desktop/color.css
@@ -1,6 +1,6 @@
 .Theme_color_default-desktop {
-    --color-controls-type-action-typo-base: #ccc;
+    --button-fill-color: var(--color-controls-type-action-fill-color-base);
     --color-controls-type-action-fill-color-base: #fff;
     --color-controls-type-action-fill-color-hover: #ccc;
-    --button-fill-color: var(--color-controls-type-action-fill-color-base);
+    --color-controls-type-action-typo-base: #ccc;
 }
diff --git a/examples/whitepaper/themes/default/desktop/root.css b/examples/whitepaper/themes/default/desktop/root.css
index 51af825..8867714 100644
--- a/examples/whitepaper/themes/default/desktop/root.css
+++ b/examples/whitepaper/themes/default/desktop/root.css
@@ -1,5 +1,5 @@
 .Theme_root_default-desktop {
     --typo-control-font-family: Arial, sans-serif;
-    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
     --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
 }
diff --git a/examples/whitepaper/themes/default/touch/color.css b/examples/whitepaper/themes/default/touch/color.css
index ebe9973..a05f6dd 100644
--- a/examples/whitepaper/themes/default/touch/color.css
+++ b/examples/whitepaper/themes/default/touch/color.css
@@ -1,6 +1,6 @@
 .Theme_color_default-touch {
-    --color-controls-type-action-typo-base: #999;
+    --button-fill-color: var(--color-controls-type-action-fill-color-base);
     --color-controls-type-action-fill-color-base: #fff;
     --color-controls-type-action-fill-color-hover: #ccc;
-    --button-fill-color: var(--color-controls-type-action-fill-color-base);
+    --color-controls-type-action-typo-base: #999;
 }
diff --git a/examples/whitepaper/themes/default/touch/root.css b/examples/whitepaper/themes/default/touch/root.css
index 1582601..c7d1543 100644
--- a/examples/whitepaper/themes/default/touch/root.css
+++ b/examples/whitepaper/themes/default/touch/root.css
@@ -1,5 +1,5 @@
 .Theme_root_default-touch {
     --typo-control-font-family: Arial, sans-serif;
-    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
     --typo-control-size-m-font-size: 24px; /* Font size for all controls with size m */
+    --typo-control-size-s-font-size: 20px; /* Font size for all controls with size s */
 }
diff --git a/src/core/variable-with-prefix.ts b/src/core/variable-with-prefix.ts
index 0db8d18..bff2d88 100644
--- a/src/core/variable-with-prefix.ts
+++ b/src/core/variable-with-prefix.ts
@@ -16,5 +16,6 @@ export function variablesWithPrefix(prefix: any, properties: any): any {
       return nextProp
     })
     .filter((strVal: any) => Boolean(strVal))
+    .sort()
     .join('\n')
 }