Merge pull request TrySound#22 from MohammadYounes/comment-node

Add support for comment node

Author: TrySound

README.md

@@ -74,7 +74,7 @@ parsed.toString(); // #E92D42
 
 Each node is an object with these common properties:
 
-- **type**: The type of node (`word`, `string`, `div`, `space`, or `function`).
+- **type**: The type of node (`word`, `string`, `div`, `space`, `comment`, or `function`).
   Each type is documented below.
 - **value**: Each node has a `value` property; but what exactly `value` means
   is specific to the node type. Details are documented for each type below.
@@ -122,6 +122,16 @@ Node-specific properties:
 
 - **value**: The whitespace itself.
 
+### comment
+
+ A CSS comment starts with `/*` and ends with `*/`
+ 
+ Node-specific properties:
+ 
+  - **value**: The comment value without `/*` and `*/`
+  - **unclosed**: True when the comment has no end.
+    e.g. `/* comment without an end  `.
+    
 ### function
 
 A CSS function, e.g. `rgb(0,0,0)` or `url(foo.bar)`.

lib/parse.js

@@ -6,6 +6,7 @@ var backslash = '\\'.charCodeAt(0);
 var slash = '/'.charCodeAt(0);
 var comma = ','.charCodeAt(0);
 var colon = ':'.charCodeAt(0);
+var star = '*'.charCodeAt(0);
 
 module.exports = function (input) {
     var tokens = [];
@@ -38,7 +39,7 @@ module.exports = function (input) {
                 after = token;
             } else if (prev && prev.type === 'div') {
                 prev.after = token;
-            } else if (code === slash || code === comma || code === colon) {
+            } else if (code === slash && value.charCodeAt(next + 1) !== star || code === comma || code === colon) {
                 before = token;
             } else {
                 tokens.push({ type: 'space', sourceIndex: pos, value: token });
@@ -72,6 +73,22 @@ module.exports = function (input) {
             pos = next + 1;
             code = value.charCodeAt(pos);
 
+        //Comments
+        } else if (code === slash && value.charCodeAt(pos + 1) === star) {
+            token = { type: 'comment', sourceIndex: pos};
+
+            next = value.indexOf('*/', pos);
+            if (next === -1) {
+                token.unclosed = true;
+                next = value.length;                
+            }
+
+            token.value = value.slice(pos + 2, next);
+            tokens.push(token);
+            
+            pos = next + 2;
+            code = value.charCodeAt(pos);
+
         // Dividers
         } else if (code === slash || code === comma || code === colon) {
             token = value[pos];
@@ -93,7 +110,7 @@ module.exports = function (input) {
             token = { type: 'function', sourceIndex: pos - name.length, value: name, before: value.slice(pos + 1, next) };
             pos = next;
 
-            if (name === 'url' && code !== singleQuote && code !== doubleQuote) {
+            if (name === 'url' && code !== singleQuote && code !== doubleQuote && (code !== slash || value.charCodeAt(pos + 1) !== star)) {
                 next -= 1;
                 do {
                     escape = false;
@@ -164,7 +181,7 @@ module.exports = function (input) {
             } while (next < max && !(
                 code <= 32 ||
                 code === singleQuote || code === doubleQuote ||
-                code === slash || code === comma || code === colon ||
+                code === slash && value.charCodeAt(next + 1) !== star || code === comma || code === colon ||
                 code === openParentheses || code === closeParentheses && balanced
             ));
             token = value.slice(pos, next);

lib/stringify.js

@@ -6,6 +6,8 @@ function stringifyNode(node) {
         return value;
     } else if (type === 'string') {
         return (node.quote || '') + value + (node.quote || '');
+    } else if (type === 'comment') {
+        return '/*' + value + (node.unclosed ? '' : '*/');
     } else if (type === 'div') {
         return (node.before || '') + value + (node.after || '');
     } else if (Array.isArray(node.nodes)) {

test/parse.js

@@ -389,6 +389,41 @@ var tests = [{
     expected: [
         { type: 'function', sourceIndex: 0, value: 'url', before: '', after: '', nodes: [] }
     ]
+}, {
+    message: 'should parse comments',
+    fixture: '/*before*/ 1px /*between*/ 1px /*after*/',
+    expected: [
+        { type: 'comment', sourceIndex: 0, value: 'before'},
+        { type: 'space', sourceIndex: 10, value: ' ' },
+        { type: 'word', sourceIndex: 11, value: '1px' },
+        { type: 'space', sourceIndex: 14, value: ' ' },
+        { type: 'comment', sourceIndex: 15, value: 'between'},
+        { type: 'space', sourceIndex: 26, value: ' ' },
+        { type: 'word', sourceIndex: 27, value: '1px' },
+        { type: 'space', sourceIndex: 30, value: ' ' },
+        { type: 'comment', sourceIndex: 31, value: 'after'},
+    ]
+}, {
+    message: 'should parse comments inside functions',
+    fixture: 'url( "/demo/bg.png" /*comment*/ )',
+    expected: [
+        { type: 'function', sourceIndex: 0, value: 'url', before: ' ', after: ' ', nodes: [
+            { type: 'string', sourceIndex: 5, value: '/demo/bg.png', quote:'"'},
+            { type: 'space', sourceIndex: 19, value: ' ' },
+            { type: 'comment', sourceIndex: 20, value: 'comment'}
+        ] }        
+    ]
+}, {
+    message: 'should parse unclosed comments',
+    fixture: '/*comment*/ 1px /* unclosed ',
+    expected: [
+        { type: 'comment', sourceIndex: 0, value: 'comment'},
+        { type: 'space', sourceIndex: 11, value: ' ' },
+        { type: 'word', sourceIndex: 12, value: '1px' },
+        { type: 'space', sourceIndex: 15, value: ' ' },
+        { type: 'comment', sourceIndex: 16, value: ' unclosed ', unclosed:true}
+        
+    ]
 }];
 
 test('Parse', function (t) {

test/stringify.js

@@ -18,6 +18,14 @@ var tests = [
     {
         message: 'Should correctly process advanced gradients',
         fixture: 'background-image:linear-gradient(45deg,transparent 25%,hsla(0,0%,100%,.2) 25%,hsla(0,0%,100%,.2) 75%,transparent 75%,transparent 25%,hsla(0,0%,100%,.2) 75%,transparent 75%,transparent),linear-gradient(45deg,transparent 25%,hsla(0,0%,100%,.2))'
+    },
+    {
+        message: 'Should correctly add comments',
+        fixture: '/*comment*/ 1px /* unclosed '
+    },
+    {
+        message: 'Should correctly process comments inside functions',
+        fixture: '/*before*/ rgb( /*red component*/ 12,  54 /*green component*/, /* blue */ 65)/* after */ '
     }
 ];