shama/stylus-loader — pull request #6 by mzgoddard (2014-05-12 23:35:54+00:00)
Title: Define url resolver() when "resolve url" option is true.

`stylus.resolver()` resolves urls to the original stylus file they are defined in. This lets another stylus file import a later file which refers to a path relative the second path. This PR currently enables this when "resolve url" is true in the query options given to the loader.

As an example this could be a directory structure:

```
+ src/
- index.styl
+ images/
- logo.styl
- logo.png
```

With that project hierarchy, say index.styl imports logo.styl, and logo.styl defines a class that has `content: url(./logo.png)`. Without `stylus.resolver()` building index.styl would result in `content: url(./logo.png)` and later webpack, through css-loader, builds in `src/logo.png` which doesn't exist. Instead with `stylus.resolver()` enabled, building index.styl results in `content: url(./images/logo.png)`, which webpack will successfully build with.

There is an included test that shows this working with the option stated in a `require(...)`. For a webpack configuration it could look like:

```
module: {
loaders: [
{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader?{"resolve url":true}' }
]
}
```

I chose "resolve url" as stylus's binary and tests set the option when they use stylus.resolver(). It could easily be changed to another name or capitalization.

For simple projects you could get around this issue in other ways, but for a project I'm on with @tkellen we have assets and their related styles placed in different repos without knowledge of each other. We can use `paths` to look up the style installed in `node_modules` or some other modules directory but need this to not end up with urls that know about the destination stylesheet and look like `url(../../node_modules/assets/images/foo.png)`. Instead the working url with `resolve url` enabled would be `url(../images/foo.png)`.