ez-build does not rebase urls when importing css in a different directory

[matthewdunsdon]

The issue is due to the import of stylesheets not getting their URL paths rebased, which causes issues when referencing from CSS in a different directory.

src/styles/icons.css

@import "./icons/icon-pack-24.css";
@import "./icons/icon-pack-32.css";
/* ... */

src/styles/icons/icon-pack-24.css

.icon-badge-24 {
    background-image: url("../../assets/icons/badge-24px.png");
}
/* ... */

Image icon is at path <project-root>/src/assets/icons/badge-24px.png and when build with ez-build it gets coppied to <project-root>/lib/assets/icons/badge-24px.png

Expected Behavior

When it is a development or production build, I would expect it to produce the correct relative paths:

Development

lib/styles/icons.css

.icon-badge-24 {
    background-image: url("../assets/icons/badge-24px.png");
}
/* ... */

Production

project-min.css

.icon-badge-24 {
    background-image: url("lib/assets/icons/badge-24px.png");
}
/* ... */

Current Behavior

What actually happens is:

Development

lib/styles/icons.css

.icon-badge-24 {
    background-image: url("../../assets/icons/badge-24px.png");
}
/* ... */

Production

project-min.css

.icon-badge-24 {
    background-image: url("assets/icons/badge-24px.png");
}
/* ... */

A workaround that is being used at the moment is to make the change:

src/styles/icons/icons-20.css

.icon-blue-20 {
    background-image: url("../assets/icons/badge-24px.png");
}

However I have chatted with @mstade and he made a great point:

The CSS spec means there's no rebase when runtime @import is used

merging is effectively the same as statically performing the import ahead of time, but it does mean some things need to be rewritten

merging isn't part of any spec since it's not a runtime behavior, but it makes sense for it to carry the same semantics as in, the end result semantics are the same

so you should still consider relative urls in css files as relative to the file they are specified in, like the spec says and just trust the compiler to get this right

Steps to Reproduce (for bugs)

1. Create a ez-build project
2. Add the src css files referenced at the top of the description as well as some image
3. Ensure there is some javascript file that will import the "css/css!./styles/icons.css and that there is some png image at <project-root>/src/assets/icons/badge-24px.png
4. Run ez-build
5. view the page

Context

We are trying to use ez-build with images, where CSS files are not all in one directory (i.e. sub directories used).

Environment

• Version used: 0.7.0
• Environment name and version: Chrome 56
• Operating System and version: Windows 7 Enterprise

[mstade]

Thanks for this excellent report!

One thing worth noting: ez-build doesn't follow require statements (they're just opaque function calls) so the CSS loader step shouldn't be necessary to reproduce this issue.

I'll see about making a fixture for this and write some tests based on this report, that should then fail. Then we should be able to proceed with implementing a fix. Great report, thanks a lot!

[mstade]

Fixed in #53.