Last Updated: February 25, 2016
·
7.093K
· jjperezaguinaga

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

Picture

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.

Picture

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.

5 Responses
Add your response

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

over 1 year ago ·

@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

over 1 year ago ·

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.

over 1 year ago ·

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.

over 1 year ago ·

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!

over 1 year ago ·