Cast js-defined variables to string

lib/resolve-value.js

@@ -12,6 +12,10 @@ var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-whe
 // See: http://dev.w3.org/csswg/css-variables/#funcdef-var
 var RE_VAR_FUNC = (/var\((--[^,\s]+?)(?:\s*,\s*(.+))?\)/);
 
+function toString(value) {
+	return String(value);
+}
+
 // Pass in a value string to parse/resolve and a map of available values
 // and we can figure out the final value
 //
@@ -23,7 +27,7 @@ var RE_VAR_FUNC = (/var\((--[^,\s]+?)(?:\s*,\s*(.+))?\)/);
 var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal debugging*/_debugIsInternal) {
 	var debugIndent = _debugIsInternal ? '\t' : '';
 
-	var resultantValue = decl.value;
+	var resultantValue = toString(decl.value);
 	var warnings = [];
 
 	var variablesUsedInValueMap = {};

test/fixtures/js-defined-non-string-values-casted-to-string.css

@@ -0,0 +1,9 @@
+.box {
+    top: var(--number-value);
+    width: var(--zero-value);
+    height: var(--null-value);
+    overflow: var(--undefined-value);
+    font-size: var(--object-value-passed-by-mistake);
+    visibility: var(--true-value);
+    opacity: var(--false-value);
+}

test/fixtures/js-defined-non-string-values-casted-to-string.expected.css

@@ -0,0 +1,9 @@
+.box {
+    top: 50;
+    width: 0;
+    height: null;
+    overflow: undefined;
+    font-size: [object Object];
+    visibility: true;
+    opacity: false;
+}

test/test.js

@@ -22,6 +22,16 @@ var MOCK_JS_VARIABLES =  {
 	'js-defined-no-prefix': '#ff0000'
 };
 
+var NON_STRING_VARIABLES = {
+	'number-value': 50,
+	'zero-value': 0,
+	'null-value': null,
+	'undefined-value': undefined,
+	'object-value-passed-by-mistake': {},
+	'true-value': true,
+	'false-value': false,
+};
+
 var testPlugin = function(filePath, expectedFilePath, options) {
 	options = options || {};
 	return Promise.props({
@@ -177,6 +187,13 @@ describe('postcss-css-variables', function() {
 				preserveInjectedVariables: false,
 			}
 		);
+		test(
+			'should cast non-string values to string',
+			'js-defined-non-string-values-casted-to-string',
+			{
+				variables: NON_STRING_VARIABLES
+			}
+		);
 	});
 
 	describe('with `options.preserve`', function() {
@@ -249,5 +266,4 @@ describe('postcss-css-variables', function() {
 			'remove-nested-empty-rules-after-variable-collection'
 		);
 	});
-
 });