Fixes #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.

diff --git a/History.md b/History.md
index 1e5fc29..0cd9248 100644 (file)
--- a/History.md
+++ b/History.md
@@ -3,6 +3,11 @@
 
 * Requires Node.js 4.0+ to run.
 
+[3.4.14 / 2016-xx-xx](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.13...3.4)
+==================
+
+* Fixed issue [#751](https://github.com/jakubpawlowicz/clean-css/issues/751) - stringifying CSS variables.
+
 [3.4.13 / 2016-05-23](https://github.com/jakubpawlowicz/clean-css/compare/v3.4.12...v3.4.13)
 ==================
 

diff --git a/lib/stringifier/helpers.js b/lib/stringifier/helpers.js
index 3f89a95..5e9f117 100644 (file)
--- a/lib/stringifier/helpers.js
+++ b/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);

diff --git a/test/source-map-test.js b/test/source-map-test.js
index 1fb5003..b1ba4a5 100644 (file)
--- a/test/source-map-test.js
+++ b/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({

diff --git a/test/tokenizer/tokenizer-test.js b/test/tokenizer/tokenizer-test.js
index a43e6b9..735e3eb 100644 (file)
--- a/test/tokenizer/tokenizer-test.js
+++ b/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}',
         [