Initial support for source map generation

Author: andreypopp

index.js

@@ -22,6 +22,10 @@ module.exports = function(node, options){
     ? new Compressed(options)
     : new Identity(options);
 
-  return compiler.compile(node);
+  var code = compiler.compile(node);
+  if (options.sourceMap)
+    return {code: code, map: compiler.map}
+  else
+    return code;
 };
 

lib/identity.js

@@ -1,3 +1,4 @@
+var SourceMapGenerator = require('source-map').SourceMapGenerator;
 
 /**
  * Expose compiler.
@@ -11,9 +12,56 @@ module.exports = Compiler;
 
 function Compiler(options) {
   options = options || {};
+  this.map = new SourceMapGenerator({file: options.filename || 'generated.css'});
+  this.position = {line: 1, column: 0};
   this.indentation = options.indent;
 }
 
+/**
+ * Emit string and update current position
+ */
+
+Compiler.prototype.updatePosition = function(str) {
+  var lines = str.match(/\n/g);
+  if (lines) this.position.line += lines.length;
+  var i = str.lastIndexOf('\n');
+  this.position.column = ~i ? str.length - i : this.position.column + str.length;
+}
+
+Compiler.prototype.emit = function(str, pos, startOnly) {
+  if (pos && pos.start) {
+    this.map.addMapping({
+      generated: {
+        line: this.position.line,
+        column: Math.max(this.position.column - 1, 0)
+      },
+      source: 'source.css',
+      original: {
+        line: pos.start.line,
+        column: pos.start.column - 1
+      }
+    });
+  }
+
+  this.updatePosition(str);
+
+  if (!startOnly && pos && pos.end) {
+    this.map.addMapping({
+      generated: {
+        line: this.position.line,
+        column: Math.max(this.position.column - 1, 0)
+      },
+      source: 'source.css',
+      original: {
+        line: pos.end.line,
+        column: pos.end.column - 1
+      }
+    });
+  }
+
+  return str;
+}
+
 /**
  * Compile `node`.
  */
@@ -30,44 +78,53 @@ Compiler.prototype.visit = function(node){
   return this[node.type](node);
 };
 
+Compiler.prototype.visitMap = function(nodes, join){
+  join = join || '';
+  var result = '';
+  for (var i = 0, length = nodes.length; i < length; i++) {
+    result += this.visit(nodes[i]);
+    if (i < length - 1) result += this.emit(join);
+  }
+  return result;
+};
+
 /**
  * Visit stylesheet node.
  */
 
 Compiler.prototype.stylesheet = function(node){
-  return node.stylesheet
-    .rules.map(this.visit, this)
-    .join('\n\n');
+  return this.visitMap(node.stylesheet.rules, '\n\n');
 };
 
 /**
  * Visit comment node.
  */
 
 Compiler.prototype.comment = function(node){
-  return this.indent() + '/*' + node.comment + '*/';
+  return this.emit(this.indent() + '/*' + node.comment + '*/', node.position);
 };
 
 /**
  * Visit import node.
  */
 
 Compiler.prototype.import = function(node){
-  return '@import ' + node.import + ';';
+  return this.emit('@import ' + node.import + ';', node.position);
 };
 
 /**
  * Visit media node.
  */
 
 Compiler.prototype.media = function(node){
-  return '@media '
-    + node.media
-    + ' {\n'
-    + this.indent(1)
-    + node.rules.map(this.visit, this).join('\n\n')
-    + this.indent(-1)
-    + '\n}';
+  return this.emit('@media ' + node.media, node.position, true)
+    + this.emit(
+        ' {\n'
+        + this.indent(1))
+    + this.visitMap(node.rules, '\n\n')
+    + this.emit(
+        this.indent(-1)
+        + '\n}');
 };
 
 /**
@@ -77,58 +134,61 @@ Compiler.prototype.media = function(node){
 Compiler.prototype.document = function(node){
   var doc = '@' + (node.vendor || '') + 'document ' + node.document;
 
-  return doc + ' '
-    + ' {\n'
-    + this.indent(1)
-    + node.rules.map(this.visit, this).join('\n\n')
-    + this.indent(-1)
-    + '\n}';
+  return this.emit(doc, node.position, true)
+    + this.emit(
+        ' '
+      + ' {\n'
+      + this.indent(1))
+    + this.visitMap(node.rules, '\n\n')
+    + this.emit(
+        this.indent(-1)
+        + '\n}');
 };
 
 /**
  * Visit charset node.
  */
 
 Compiler.prototype.charset = function(node){
-  return '@charset ' + node.charset + ';\n';
+  return this.emit('@charset ' + node.charset + ';', node.position);
 };
 
 /**
  * Visit namespace node.
  */
 
 Compiler.prototype.namespace = function(node){
-  return '@namespace ' + node.namespace + ';\n';
+  return this.emit('@namespace ' + node.namespace + ';', node.position);
 };
 
 /**
  * Visit supports node.
  */
 
 Compiler.prototype.supports = function(node){
-  return '@supports '
-    + node.supports
-    + ' {\n'
-    + this.indent(1)
-    + node.rules.map(this.visit, this).join('\n\n')
-    + this.indent(-1)
-    + '\n}';
+  return this.emit('@supports ' + node.supports, node.position, true)
+    + this.emit(
+      ' {\n'
+      + this.indent(1))
+    + this.visitMap(node.rules, '\n\n')
+    + this.emit(
+        this.indent(-1)
+        + '\n}');
 };
 
 /**
  * Visit keyframes node.
  */
 
 Compiler.prototype.keyframes = function(node){
-  return '@'
-    + (node.vendor || '')
-    + 'keyframes '
-    + node.name
-    + ' {\n'
-    + this.indent(1)
-    + node.keyframes.map(this.visit, this).join('\n')
-    + this.indent(-1)
-    + '}';
+  return this.emit('@' + (node.vendor || '') + 'keyframes ' + node.name, node.position, true)
+    + this.emit(
+      ' {\n'
+      + this.indent(1))
+    + this.visitMap(node.keyframes, '\n')
+    + this.emit(
+        this.indent(-1)
+        + '}');
 };
 
 /**
@@ -138,13 +198,16 @@ Compiler.prototype.keyframes = function(node){
 Compiler.prototype.keyframe = function(node){
   var decls = node.declarations;
 
-  return this.indent()
-    + node.values.join(', ')
-    + ' {\n'
-    + this.indent(1)
-    + decls.map(this.visit, this).join('\n')
-    + this.indent(-1)
-    + '\n' + this.indent() + '}\n';
+  return this.emit(this.indent())
+    + this.emit(node.values.join(', '), node.position, true)
+    + this.emit(
+      ' {\n'
+      + this.indent(1))
+    + this.visitMap(decls, '\n')
+    + this.emit(
+      this.indent(-1)
+      + '\n'
+      + this.indent() + '}\n');
 };
 
 /**
@@ -156,12 +219,12 @@ Compiler.prototype.page = function(node){
     ? node.selectors.join(', ') + ' '
     : '';
 
-  return '@page ' + sel
-    + '{\n'
-    + this.indent(1)
-    + node.declarations.map(this.visit, this).join('\n')
-    + this.indent(-1)
-    + '\n}';
+  return this.emit('@page ' + sel, node.position, true)
+    + this.emit('{\n')
+    + this.emit(this.indent(1))
+    + this.visitMap(node.declarations, '\n')
+    + this.emit(this.indent(-1))
+    + this.emit('\n}');
 };
 
 /**
@@ -173,20 +236,24 @@ Compiler.prototype.rule = function(node){
   var decls = node.declarations;
   if (!decls.length) return '';
 
-  return node.selectors.map(function(s){ return indent + s }).join(',\n')
-    + ' {\n'
-    + this.indent(1)
-    + decls.map(this.visit, this).join('\n')
-    + this.indent(-1)
-    + '\n' + this.indent() + '}';
+  return this.emit(node.selectors.map(function(s){ return indent + s }).join(',\n'), node.position, true)
+    + this.emit(' {\n')
+    + this.emit(this.indent(1))
+    + this.visitMap(decls, '\n')
+    + this.emit(this.indent(-1))
+    + this.emit('\n' + this.indent() + '}');
 };
 
 /**
  * Visit declaration node.
  */
 
 Compiler.prototype.declaration = function(node){
-  return this.indent() + node.property + ': ' + node.value + ';';
+  return this.emit(this.indent())
+    + this.emit(node.property, node.position)
+    + this.emit(': ')
+    + this.emit(node.value, node.position)
+    + this.emit(';');
 };
 
 /**

package.json

@@ -20,5 +20,8 @@
   },
   "scripts": {
     "test": "make test"
+  },
+  "dependencies": {
+    "source-map": "~0.1.31"
   }
 }