Using source maps for Stylus today
In case you don't know what source maps are, I would recommend you to read a good introduction about the topic. Also, be wary that this feature is highly experimental, and it's still in a review process.
1) Get Chrome Canary
2) Enable the Source Maps feature
3) Install a bleeding-edge pending PR under-your-own-risk stylus version from Sidorares. If you are using npm, you can specify in your package.json the specific branch from that PR like this:
"dependencies": {
"stylus": "https://github.com/sidorares/stylus/tarball/sourcemaps"
}4) Specify the parameter --sourcemaps as true when compiling. This can be achieved on ExpressJS through the Stylus middleware.
app.use(stylus.middleware({src: __dirname + '/app', compress: true, sourcemaps: true}));5) Profit.
Notes on this feature
Since the PR is still undergoing work, you shouldn't expect to work perfectly; however, it does as of version 31.0.1619.0 in Chrome Canary. The limitations are on the level of mapping it can do (so no fancy cmd+click on your specific function), but feel free to contribute to the discussion.
Written by Jose Jesus Perez Aguinaga
Related protips
5 Responses
Could you go more into detail about how to 3) install the bleeding edge version of Stylus from Sidorares' github? His directions there are for the normal $ npm install stylus. Are there some flags or something I am missing?
Thanks
@bushwazi Since I'm using as a module, I'm currently specifying it through the package.json as I put in the tip. If you want to install it through command line, simply use npm install https://github.com/sidorares/stylus@sourcemaps
Thanks, I was able to use $ npm install https://github.com/sidorares/stylus/tarball/sourcemaps --save-dev to install it. I'm trying to get it working with grunt-contrib-stylus.
Thanks, I was able to use $ npm install https://github.com/sidorares/stylus/tarball/sourcemaps --save-dev to install it. I'm trying to get it working with grunt-contrib-stylus.
Late follow up:
I had something wrong with npm or stylus (I knew it was wrong because $ stylus --version returned an error), but I ended up trying to update npm and it broke, so I had to re-install node to get npm. This allowed me to do a clean global install from github $ sudo npm install -g https://github.com/sidorares/stylus/tarball/sourcemaps and now I have sourcemaps working via command line. stylus --watch -u nib --sourcemaps styles/stylus/styles.styl --out styles/ So this command is "Stylus watch styles/stylus/styles.styl and use nib, then export the css file to the styles directory with sourcemaps". One thing to note is that you can't use the --firebug and --sourcemaps flags at the same time, but I haven't gotten FireStylus to work anyways. So this works with Chrome!
Have a fresh tip? Share with Coderwall community!
