Fix issue with common "{{ }}" template syntax in a CSS rule

css.js

@@ -4,21 +4,26 @@
   'use strict';
   var fi = function() {
 
+    this.skipCommentParsing = true;
     this.cssImportStatements = [];
     this.cssKeyframeStatements = [];
 
     this.cssRegex = new RegExp('([\\s\\S]*?){([\\s\\S]*?)}', 'gi');
     this.cssMediaQueryRegex = '((@media [\\s\\S]*?){([\\s\\S]*?}\\s*?)})';
     this.cssKeyframeRegex = '((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})';
-    this.combinedCSSRegex = '((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})'; //to match css & media queries together
+    this.combinedCSSRegex = '((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)(?!.*}})}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)(?![\\s\\S]?}})[\\s\\S]})'; // to match css & media queries together
     this.cssCommentsRegex = '(\\/\\*[\\s\\S]*?\\*\\/)';
     this.cssImportStatementRegex = new RegExp('@import .*?;', 'gi');
   };
 
+  fi.prototype.setSkipCommentParsing = function (skip) {
+    this.skipCommentParsing = skip;
+  };
+
   /*
-    Strip outs css comments and returns cleaned css string
+    Strips out css comments and returns cleaned css string
 
-    @param css, the original css string to be stipped out of comments
+    @param css, the original css string to be stripped out of comments
 
     @return cleanedCSS contains no css comments
   */
@@ -474,6 +479,9 @@
     }
     for (i = 0; i < cssBase.length; i++) {
       var tmp = cssBase[i];
+      if (this.skipCommentParsing) {
+        tmp.comments = undefined;
+      }
       if (tmp.selector === undefined) { //temporarily omit media queries
         continue;
       }

tests/cssParsing.test.js

@@ -1,5 +1,7 @@
 var fullInspector = new cssjs();
 
+fullInspector.setSkipCommentParsing(false);
+
 QUnit.test('FullInspector Unit Tests', function(assert) {
     var expected = unitTest.stripComments.output;
     var result = fullInspector.stripComments(unitTest.stripComments.input);
@@ -40,8 +42,6 @@ QUnit.test('FullInspector Unit Tests', function(assert) {
     expected = unitTest.parseRules1.output;
     result = fullInspector.parseRules(unitTest.parseRules1.input);
     assert.deepEqual(result, expected, 'fi.prototype.parseRules : parse css rules, containing duplicate directives' ); //assert 9
-
-
 });
 
 QUnit.test('Basic CSS parsing', function(assert) {
@@ -69,7 +69,11 @@ QUnit.test('Basic CSS parsing', function(assert) {
 
     expected = JSON.parse(testData.basicCSS5.output); //simple css with margin value is "*0"
     parsed = fullInspector.parseCSS(testData.basicCSS5.input);
-    assert.deepEqual(parsed, expected, 'simple css with margin value is "*0'); //assert 5
+    assert.deepEqual(parsed, expected, 'simple css with margin value is "*0'); //assert 6
+
+    expected = JSON.parse(testData.basicCSS6.output); //stacked classes separate into 2 rules
+    parsed = fullInspector.parseCSS(testData.basicCSS6.input);
+    assert.deepEqual(parsed, expected, 'stacked css classes are separated correctly'); //assert 7
 });
 QUnit.test('Advanced CSS Parsing(support for media queries)', function(assert) {
     var expected = JSON.parse(testData.advCSS.output);
@@ -99,6 +103,36 @@ QUnit.test('Advanced CSS Parsing(support for media queries)', function(assert) {
     assert.deepEqual(parsed, expected, 'Media query with a comment above it.');
 });
 
+QUnit.test('Template CSS Parsing (retains handlebars-style syntax in CSS)', function(assert) {
+    var expected = JSON.parse(testData.tmplCSS.output);
+    var parsed = fullInspector.parseCSS(testData.tmplCSS.input);
+    assert.deepEqual(parsed, expected, 'basic CSS value assignment should have margin {{test}}');
+
+    var expected = JSON.parse(testData.tmplCSS2.output);
+    var parsed = fullInspector.parseCSS(testData.tmplCSS2.input);
+    assert.deepEqual(parsed, expected, 'background image should have url with placeholder maintained');
+
+    var expected = JSON.parse(testData.tmplCSS3.output);
+    var parsed = fullInspector.parseCSS(testData.tmplCSS3.input);
+    assert.deepEqual(parsed, expected, 'background image specified in url(\'\') should have url with placeholder maintained');
+
+    var expected = JSON.parse(testData.tmplCSS4.output);
+    var parsed = fullInspector.parseCSS(testData.tmplCSS4.input);
+    assert.deepEqual(parsed, expected, 'background image specified in url("") should have url with placeholder maintained');
+
+    var expected = JSON.parse(testData.tmplCSS5.output);
+    var parsed = fullInspector.parseCSS(testData.tmplCSS5.input);
+    assert.deepEqual(parsed, expected, 'basic CSS value assignment should maintain leading spacing');
+
+    var expected = JSON.parse(testData.tmplCSS6.output);
+    var parsed = fullInspector.parseCSS(testData.tmplCSS6.input);
+    assert.deepEqual(parsed, expected, 'basic CSS value assignment should maintain surrounding spacing');
+
+    var expected = JSON.parse(testData.tmplCSS7.output);
+    var parsed = fullInspector.parseCSS(testData.tmplCSS7.input);
+    assert.deepEqual(parsed, expected, 'basic CSS value assignment should maintain trailing spacing');
+});
+
 /*
 	this tests convert css string to object, then to string, then to object and compares the last 2 objects
 	to detect incostincies