Add proper number & range validation

_locales/en/messages.json

@@ -1051,6 +1051,15 @@
     },
     "description": "Error displayed when the value of @var color is invalid"
   },
+  "styleMetaErrorRangeOrNumber": {
+    "message": "Invalid @var $type$: value must be an array containing at least one number at index zero",
+    "description": "Error displayed when the value of @var number or @var range is invalid",
+    "placeholders": {
+      "type": {
+        "content": "$1"
+      }
+    }
+  },
   "styleMetaErrorPreprocessor": {
     "message": "Unsupported @preprocessor: $preprocessor$",
     "placeholders": {

js/usercss.js

@@ -231,10 +231,6 @@ var usercss = (() => {
           // but should not contain any numbers '4px' => 'px'
           result.units = labelIndex < 0 ? '' : state.value.splice(labelIndex, 1)[0].toString().replace(/[\d.+-]/g, '');
           result.range = state.value.filter(item => !nonDigit.test(item));
-        } else {
-          // not a range, fallback to text
-          result.type = 'text';
-          result.default = state.value;
         }
         break;
       }
@@ -617,6 +613,11 @@ var usercss = (() => {
       throw new Error(chrome.i18n.getMessage('styleMetaErrorCheckbox'));
     } else if (va.type === 'color') {
       va[value] = colorConverter.format(colorConverter.parse(va[value]), 'rgb');
+    } else if (
+      (va.type === 'number' || va.type === 'range') &&
+      !(typeof va[value] === 'number' || Array.isArray(va.range))
+    ) {
+      throw new Error(chrome.i18n.getMessage('styleMetaErrorRangeOrNumber', va.type));
     }
   }