Fixes clean-css#751 - stringifying CSS variables.

CSS variables come in two variants

- defined as a block which can be applied using @apply keyword (used
  in Polymer);
- defined as a simple value or another variable reference.

The second way was broken when source maps were built as stringifying
code was always expecting a block.

History.md

@@ -3,6 +3,11 @@
 
 * Requires Node.js 4.0+ to run.
 
+[3.4.14 / 2016-xx-xx](https:/jakubpawlowicz/clean-css/compare/v3.4.13...3.4)
+==================
+
+* Fixed issue [#751](https:/jakubpawlowicz/clean-css/issues/751) - stringifying CSS variables.
+
 [3.4.13 / 2016-05-23](https:/jakubpawlowicz/clean-css/compare/v3.4.12...v3.4.13)
 ==================
 

lib/stringifier/helpers.js

@@ -96,8 +96,9 @@ function value(tokens, position, isLast, context) {
  var store = context.store;
  var token = tokens[position];
  var isVariableDeclaration = token[0][0].indexOf('--') === 0;
+ var isBlockVariable = isVariableDeclaration && Array.isArray(token[1][0]);
 
- if (isVariableDeclaration && atRulesOrProperties(token[1])) {
+ if (isVariableDeclaration && isBlockVariable && atRulesOrProperties(token[1])) {
  store('{', context);
  body(token[1], context);
  store('};', context);

test/source-map-test.js

@@ -67,6 +67,22 @@ vows.describe('source-map')
  'gets right output': function (minified) {
  assert.equal(minified.styles, '@font-face{font-family:si}a{font-family:si!important}');
  }
+ },
+ 'variables': {
+ 'topic': function () {
+ return new CleanCSS({ sourceMap: true }).minify(':root{--color:red}');
+ },
+ 'gets right output': function (minified) {
+ assert.equal(minified.styles, ':root{--color:red}');
+ }
+ },
+ 'variables reused': {
+ 'topic': function () {
+ return new CleanCSS({ sourceMap: true }).minify(':root{--color:var(--otherColor)}');
+ },
+ 'gets right output': function (minified) {
+ assert.equal(minified.styles, ':root{--color:var(--otherColor)}');
+ }
  }
  })
  .addBatch({

test/tokenizer/tokenizer-test.js

@@ -247,6 +247,16 @@ vows.describe(tokenize)
  ]
  ]
  ],
+ 'variable declarations': [
+ ':root{--color:var(--otherColor)}',
+ [
+ [
+ 'selector',
+ [[':root']],
+ [[['--color'], ['var(--otherColor)']]]
+ ]
+ ]
+ ],
  '! important': [
  'a{color:red! important}',
  [