--- a/layout/style/CSSVariableDeclarations.cpp
+++ b/layout/style/CSSVariableDeclarations.cpp
@@ -74,17 +74,17 @@ CSSVariableDeclarations::Get(const nsASt
   nsString value;
   if (!mVariables.Get(aName, &value)) {
     return false;
   }
   if (value.EqualsLiteral(INITIAL_VALUE)) {
     aType = eInitial;
     aTokenStream.Truncate();
   } else if (value.EqualsLiteral(INHERIT_VALUE)) {
-    aType = eInitial;
+    aType = eInherit;
     aTokenStream.Truncate();
   } else if (value.EqualsLiteral(UNSET_VALUE)) {
     aType = eUnset;
     aTokenStream.Truncate();
   } else {
     aType = eTokenStream;
     aTokenStream = value;
   }

--- a/layout/style/Declaration.cpp
+++ b/layout/style/Declaration.cpp
@@ -1640,24 +1640,24 @@ Declaration::AppendVariableAndValueToStr
     important = true;
   } else {
     MOZ_ASSERT(mVariables);
     MOZ_ASSERT(mVariables->Has(aName));
     mVariables->Get(aName, type, value);
     important = false;
   }
 
+  bool isTokenStream = type == CSSVariableDeclarations::eTokenStream;
+  aResult.Append(':');
+  if (!isTokenStream) {
+    aResult.Append(' ');
+  }
   switch (type) {
     case CSSVariableDeclarations::eTokenStream:
-      if (value.IsEmpty()) {
-        aResult.Append(':');
-      } else {
-        aResult.AppendLiteral(": ");
-        aResult.Append(value);
-      }
+      aResult.Append(value);
       break;
 
     case CSSVariableDeclarations::eInitial:
       aResult.AppendLiteral("initial");
       break;
 
     case CSSVariableDeclarations::eInherit:
       aResult.AppendLiteral("inherit");
@@ -1667,16 +1667,19 @@ Declaration::AppendVariableAndValueToStr
       aResult.AppendLiteral("unset");
       break;
 
     default:
       MOZ_ASSERT(false, "unexpected variable value type");
   }
 
   if (important) {
+    if (!isTokenStream) {
+      aResult.Append(' ');
+    }
     aResult.AppendLiteral("!important");
   }
   aResult.AppendLiteral("; ");
 }
 
 void
 Declaration::ToString(nsAString& aString) const
 {

--- a/layout/style/test/test_variables.html
+++ b/layout/style/test/test_variables.html
@@ -24,16 +24,19 @@
 <div id="t5"></div>
 
 <style id="test6">
 </style>
 
 <style id="test7">
 </style>
 
+<style id="test8">
+</style>
+
 <script>
 var tests = [
   function() {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=773296#c121
     var test1 = document.getElementById("test1");
     test1.textContent = "p { --a:123!important; }";
     var declaration = test1.sheet.cssRules[0].style;
     declaration.cssText;
@@ -98,16 +101,27 @@ var tests = [
   function() {
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1154356
     var test7 = document.getElementById("test7");
     test7.textContent = "p { --weird\\;name: green; }";
     is(test7.sheet.cssRules[0].style.cssText, "--weird\\;name:  green;");
     test7.textContent = "p { --0: green; }";
     is(test7.sheet.cssRules[0].style.cssText, "--0:  green;");
   },
+
+  function() {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1330172
+    var test8 = document.getElementById("test8");
+    test8.textContent = "p { --a:inHerit; }";
+    is(test8.sheet.cssRules[0].style.cssText, "--a: inherit;");
+    test8.textContent = "p { --b: initial!important; }";
+    is(test8.sheet.cssRules[0].style.cssText, "--b: initial !important;");
+    test8.textContent = "p { --c:   UNSET  !important }";
+    is(test8.sheet.cssRules[0].style.cssText, "--c: unset !important;");
+  },
 ];
 
 function prepareTest() {
   // Load an external style sheet for test 4.
   var e = document.createElement("link");
   e.addEventListener("load", runTest);
   e.setAttribute("rel", "stylesheet");
   e.setAttribute("href", "support/external-variable-url.css");