sourcemapper.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /*!
  2. * Stylus - SourceMapper
  3. * Copyright (c) Automattic <developer.wordpress.com>
  4. * MIT Licensed
  5. */
  6. /**
  7. * Module dependencies.
  8. */
  9. var Compiler = require('./compiler')
  10. , SourceMapGenerator = require('source-map').SourceMapGenerator
  11. , basename = require('path').basename
  12. , extname = require('path').extname
  13. , dirname = require('path').dirname
  14. , join = require('path').join
  15. , relative = require('path').relative
  16. , sep = require('path').sep
  17. , fs = require('fs');
  18. /**
  19. * Initialize a new `SourceMapper` generator with the given `root` Node
  20. * and the following `options`.
  21. *
  22. * @param {Node} root
  23. * @api public
  24. */
  25. var SourceMapper = module.exports = function SourceMapper(root, options){
  26. options = options || {};
  27. this.column = 1;
  28. this.lineno = 1;
  29. this.contents = {};
  30. this.filename = options.filename;
  31. this.dest = options.dest;
  32. var sourcemap = options.sourcemap;
  33. this.basePath = sourcemap.basePath || '.';
  34. this.inline = sourcemap.inline;
  35. this.comment = sourcemap.comment;
  36. if (this.dest && extname(this.dest) === '.css') {
  37. this.basename = basename(this.dest);
  38. this.dest = dirname(this.dest);
  39. } else {
  40. this.basename = basename(this.filename, extname(this.filename)) + '.css';
  41. }
  42. this.utf8 = false;
  43. this.map = new SourceMapGenerator({
  44. file: this.basename,
  45. sourceRoot: sourcemap.sourceRoot || null
  46. });
  47. Compiler.call(this, root, options);
  48. };
  49. /**
  50. * Inherit from `Compiler.prototype`.
  51. */
  52. SourceMapper.prototype.__proto__ = Compiler.prototype;
  53. /**
  54. * Generate and write source map.
  55. *
  56. * @return {String}
  57. * @api private
  58. */
  59. var compile = Compiler.prototype.compile;
  60. SourceMapper.prototype.compile = function(){
  61. var css = compile.call(this)
  62. , out = this.basename + '.map'
  63. , url = this.normalizePath(this.dest
  64. ? join(this.dest, out)
  65. : join(dirname(this.filename), out))
  66. , map;
  67. if (this.inline) {
  68. map = this.map.toString();
  69. url = 'data:application/json;'
  70. + (this.utf8 ? 'charset=utf-8;' : '') + 'base64,'
  71. + new Buffer(map).toString('base64');
  72. }
  73. if (this.inline || false !== this.comment)
  74. css += '/*# sourceMappingURL=' + url + ' */';
  75. return css;
  76. };
  77. /**
  78. * Add mapping information.
  79. *
  80. * @param {String} str
  81. * @param {Node} node
  82. * @return {String}
  83. * @api private
  84. */
  85. SourceMapper.prototype.out = function(str, node){
  86. if (node && node.lineno) {
  87. var filename = this.normalizePath(node.filename);
  88. this.map.addMapping({
  89. original: {
  90. line: node.lineno,
  91. column: node.column - 1
  92. },
  93. generated: {
  94. line: this.lineno,
  95. column: this.column - 1
  96. },
  97. source: filename
  98. });
  99. if (this.inline && !this.contents[filename]) {
  100. this.map.setSourceContent(filename, fs.readFileSync(node.filename, 'utf-8'));
  101. this.contents[filename] = true;
  102. }
  103. }
  104. this.move(str);
  105. return str;
  106. };
  107. /**
  108. * Move current line and column position.
  109. *
  110. * @param {String} str
  111. * @api private
  112. */
  113. SourceMapper.prototype.move = function(str){
  114. var lines = str.match(/\n/g)
  115. , idx = str.lastIndexOf('\n');
  116. if (lines) this.lineno += lines.length;
  117. this.column = ~idx
  118. ? str.length - idx
  119. : this.column + str.length;
  120. };
  121. /**
  122. * Normalize the given `path`.
  123. *
  124. * @param {String} path
  125. * @return {String}
  126. * @api private
  127. */
  128. SourceMapper.prototype.normalizePath = function(path){
  129. path = relative(this.dest || this.basePath, path);
  130. if ('\\' == sep) {
  131. path = path.replace(/^[a-z]:\\/i, '/')
  132. .replace(/\\/g, '/');
  133. }
  134. return path;
  135. };
  136. /**
  137. * Visit Literal.
  138. */
  139. var literal = Compiler.prototype.visitLiteral;
  140. SourceMapper.prototype.visitLiteral = function(lit){
  141. var val = literal.call(this, lit)
  142. , filename = this.normalizePath(lit.filename)
  143. , indentsRe = /^\s+/
  144. , lines = val.split('\n');
  145. // add mappings for multiline literals
  146. if (lines.length > 1) {
  147. lines.forEach(function(line, i) {
  148. var indents = line.match(indentsRe)
  149. , column = indents && indents[0]
  150. ? indents[0].length
  151. : 0;
  152. if (lit.css) column += 2;
  153. this.map.addMapping({
  154. original: {
  155. line: lit.lineno + i,
  156. column: column
  157. },
  158. generated: {
  159. line: this.lineno + i,
  160. column: 0
  161. },
  162. source: filename
  163. });
  164. }, this);
  165. }
  166. return val;
  167. };
  168. /**
  169. * Visit Charset.
  170. */
  171. var charset = Compiler.prototype.visitCharset;
  172. SourceMapper.prototype.visitCharset = function(node){
  173. this.utf8 = ('utf-8' == node.val.string.toLowerCase());
  174. return charset.call(this, node);
  175. };