Skip to content
Browse files

Added the sass-debug option

By using a Sass-style debug format on can use Chrome's built-in [Sass support](http://trac.webkit.org/changeset/123768) for Stylus files.
  • Loading branch information...
1 parent b2944cc commit 58bf6b15798dcd381167a298f1ba9598080d9979 @fgnass committed Nov 13, 2012
Showing with 31 additions and 5 deletions.
  1. +13 −0 bin/stylus
  2. +7 −0 docs/executable.md
  3. +2 −0 docs/middleware.md
  4. +4 −1 lib/middleware.js
  5. +5 −4 lib/visitor/compiler.js
View
13 bin/stylus
@@ -49,6 +49,12 @@ var linenos = false;
var firebug = false;
/**
+ * Sass debug flag
+ */
+
+var sassDebug = false;
+
+/**
* Files to processes.
*/
@@ -131,6 +137,8 @@ var usage = [
, ' -d, --compare Display input along with output'
, ' -f, --firebug Emits debug infos in the generated css that'
, ' can be used by the FireStylus Firebug plugin'
+ , ' -s, --sass-debug Emits Sass-style debug infos that can be read'
+ , ' by the Chrome Developer Tools'
, ' -l, --line-numbers Emits comments in the generated css'
, ' indicating the corresponding stylus line'
, ' --import <file> Import stylus <file>'
@@ -168,6 +176,10 @@ while (args.length) {
case '--firebug':
firebug = true;
break;
+ case '-s':
+ case '--sass-debug':
+ sassDebug = true;
+ break;
case '-l':
case '--line-numbers':
linenos = true;
@@ -312,6 +324,7 @@ var options = {
filename: 'stdin'
, compress: compress
, firebug: firebug
+ , sassDebug: sassDebug
, linenos: linenos
, paths: [process.cwd()].concat(paths)
};
View
7 docs/executable.md
@@ -23,6 +23,8 @@ Stylus ships with the `stylus` executable for converting Stylus to CSS.
-d, --compare Display input along with output
-f, --firebug Emits debug infos in the generated css that
can be used by the FireStylus Firebug plugin
+ -s, --sass-debug Emits Sass-style debug infos that can be read'
+ by the Chrome Developer Tools'
-l, --line-numbers Emits comments in the generated CSS
indicating the corresponding Stylus line
-V, --version Display the version of Stylus
@@ -65,6 +67,11 @@ Try Stylus some in the terminal! Type below and press `CTRL-D` for `__EOF__`:
$ stylus --firebug <path>
+ Or the `sass-debug` option if you want to use the experimental
+ [Sass support](http://trac.webkit.org/changeset/123768) in Web Inspector:
+
+ $ stylus --sass-debug <path>
+
### Converting CSS
If you wish to convert CSS to the terse Stylus syntax, use the `--css` flag.
View
2 docs/middleware.md
@@ -18,6 +18,8 @@
`(str, path)` returning the renderer.
`firebug` Emits debug infos in the generated css that can
be used by the FireStylus Firebug plugin
+ `sassDebug` Emits Sass-style debug infos that can be read
+ by the Chrome Developer Tools
`linenos` Emits comments in the generated css indicating
the corresponding stylus line
View
5 lib/middleware.js
@@ -37,7 +37,9 @@ var imports = {};
* `compress` Whether the output .css files should be compressed
* `firebug` Emits debug infos in the generated css that can
* be used by the FireStylus Firebug plugin
- * `linenos` Emits comments in the generated css indicating
+ * `sassDebug` Emits Sass-style debug infos that can be read
+ * by the Chrome Developer Tools
+ * `linenos` Emits comments in the generated css indicating
* the corresponding stylus line
*
* Examples:
@@ -101,6 +103,7 @@ module.exports = function(options){
.set('filename', path)
.set('compress', options.compress)
.set('firebug', options.firebug)
+ .set('sassDebug', options.sassDebug)
.set('linenos', options.linenos);
};
View
9 lib/visitor/compiler.js
@@ -29,6 +29,7 @@ var Compiler = module.exports = function Compiler(root, options) {
options = options || {};
this.compress = options.compress;
this.firebug = options.firebug;
+ this.sassDebug = options.sassDebug;
this.linenos = options.linenos;
this.spaces = options['indent spaces'] || 2;
this.includeCSS = options['include css'];
@@ -75,7 +76,7 @@ Compiler.prototype.visitRoot = function(block){
this.buf = '';
for (var i = 0, len = block.nodes.length; i < len; ++i) {
var node = block.nodes[i];
- if (this.linenos || this.firebug) this.debugInfo(node);
+ if (this.linenos || this.firebug || this.sassDebug) this.debugInfo(node);
var ret = this.visit(node);
if (ret) this.buf += ret + '\n';
}
@@ -128,7 +129,7 @@ Compiler.prototype.visitBlock = function(block){
case 'page':
case 'block':
case 'keyframes':
- if (this.linenos || this.firebug) this.debugInfo(node);
+ if (this.linenos || this.firebug || this.sassDebug) this.debugInfo(node);
this.visit(node);
break;
case 'media':
@@ -500,11 +501,11 @@ Compiler.prototype.debugInfo = function(node){
this.buf += '\n/* ' + 'line ' + line + ' : ' + path + ' */\n';
}
- if (this.firebug){
+ if (this.firebug || this.sassDebug){
// debug info for firebug, the crazy formatting is needed
path = 'file\\\:\\\/\\\/' + path.replace(/(\/|\.)/g, '\\$1');
line = '\\00003' + line;
- this.buf += '\n@media -stylus-debug-info'
+ this.buf += '\n@media -'+ (this.sassDebug? 'sass':'stylus') +'-debug-info'
+ '{filename{font-family:' + path
+ '}line{font-family:' + line + '}}\n';
}

0 comments on commit 58bf6b1

Please sign in to comment.
Something went wrong with that request. Please try again.