diff --git a/lib/resolve-value.js b/lib/resolve-value.js index f3a756b..1138a68 100644 --- a/lib/resolve-value.js +++ b/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 = {}; diff --git a/test/fixtures/js-defined-non-string-values-casted-to-string.css b/test/fixtures/js-defined-non-string-values-casted-to-string.css new file mode 100644 index 0000000..6014ccc --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/test/fixtures/js-defined-non-string-values-casted-to-string.expected.css b/test/fixtures/js-defined-non-string-values-casted-to-string.expected.css new file mode 100644 index 0000000..3749d00 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/test/test.js b/test/test.js index 66a6d6d..f73591b 100644 --- a/test/test.js +++ b/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' ); }); - });