Urls for font-face are incorrectly parsed

[ghost]

When importing stylesheets on a grunt build @font-face urls are getting incorrectly prepended with the forceRelative image url, and nested url calls which are required for correct processing aren't getting touched at all.

@font-face {
  font-family: Ratchicons;
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/ratchicons.eot");
  src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), 
       url("../fonts/ratchicons.woff") format("woff"), 
       url("../fonts/ratchicons.ttf") format("truetype"), 
       url("../fonts/ratchicons.svg#svgFontName") format("svg");
}

is getting rewritten to:

@font-face {font-family: Ratchicons; font-style: normal; font-weight: normal; src: url("/app/img/vendor/bower/ratchet/dist/fonts/ratchicons.eot?#iefix") format("embedded-opentype"), 
       url("../fonts/ratchicons.woff") format("woff"), 
       url("../fonts/ratchicons.ttf") format("truetype"), 
       url("../fonts/ratchicons.svg#svgFontName") format("svg");}

As you can see the the first src url is completely removed and only the first nested one is aliased, but incorrectly prepended with the forceRelative url.

[tbranyen]

@daisio did this just happen recently? I merged a PR that changed the AST modification to a RegExp that may be causing the issue.

[ghost]

Hey Tim, I can't say for sure as I just started using BBB, but when I installed your example app the github-viewer it affects that as well.

@font-face {
    font-family: 'Glyphicons Halflings'; 
    src: url('/app/img/vendor/bower/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
    url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
// line breaks added for readability

Maybe I'm missing something but it doesn't seem like the logic for this works anyway because if you import from a package, the images of the package will never exist in app/img, they will always reside in vendor/bower/packagename/imagepath.

For instance if I install package foo with a structure of:

vendor
---bower
------foo
---------dist
------------css
---------------style.css
------------img
---------------logo.png
------------js
------------font

Then in my styles/index.css I import style.css

@import "../../vendor/bower/foo/dist/css/style.css";

And inside my style.css I have a selector for that logo.png:

header .logo {
    width: 300px;
    height: 65px;
    background: #fff url('../img/logo.png') no-repeat;
}

In the release style.css and style.min.css this selector will be set to:

header .logo {
    width: 300px;
    height: 65px;
    background: #fff url('app/img/vendor/bower/foo/dist/img/logo.png') no-repeat;
}

And that file structure and image logo.png doesn't exist in app/img so it will always return a 404.

Or at least this is what I'm seeing so far. I'm having to copy my stylesheets and images from my package and move them to the app folder, then I change the paths in the stylesheet and import the moved stylesheets and it seems to work as expected because the images are then found correctly.

If you're not seeing this behavior or I'm doing something incorrectly please advise.

[phipps73]

I'm also seeing this issue with fonts as well as images that are located within the specific plugin folder located in the bower_components folder (using backbone boilerplate).

For example, the select2 plugin stores all imgs and css at the same level as the js file. The select2.css contains url(select2.png) and both are located in /bower_components/select2/:

/bower_components/select2/select2.js
/bower_components/select2/select2.css
/bower_components/select2/select2.png

In my app/styles/index.css:

@import "../../bower_components/select2/select2.css";

After the styles task has run, styles.css contains:

background: url('/app/img/select2.png') right top no-repeat;

If I remove the forceRelative option then I end up with:

background: url('select2.png') right top no-repeat;

Both of which are wrong as it should be:

background: url('/dist/bower_components/select2/select2.png') right top no-repeat;

assuming that I have copied the bower_components folders to my dist/ folder (a separate issue as the bbb task (copy.coffee) is still looking for 'vendor/**' folder even though .bowerrc now uses 'bower_components'.

At the moment my app runs perfectly in development mode but breaks in release.

If I'm doing it wrong and should be including fonts/plugins in a different way then will gladly change.

Cheers,

Dave