Ignore asset url query string or anchor when generating path

[createdbypete]

I encountered and error when trying to use Font Awesome, this is however a more general bug I believe relating to the asset_path method.

The following is the code I used, edited to take advantage of font-path(). This code fails because it is looking for a filename that includes the query string. Removing everything after the ? will not throw any errors.

@font-face {
  font-family: 'FontAwesome';
  src: url(font-path('fontawesome-webfont.eot?v=3.0.1'));
  src: url(font-path('fontawesome-webfont.eot?#iefix&v=3.0.1')) format("embedded-opentype"),
       url(font-path('fontawesome-webfont.woff?v=3.0.1')) format("woff"),
       url(font-path('fontawesome-webfont.ttf?v=3.0.1')) format("truetype");
  font-weight: normal;
  font-style: normal;
}

This is not a problem only for this plugin, I found this issue in the Rails repo that proposes a simple solution.

---

If there is a work around other than this update that I'm missing please let me know!

[ixti]

As a quick workaround you can use this (if your are using none cachebusting):

@font-face {
  font-family: 'FontAwesome';
  src: url(font-path('fontawesome-webfont.eot')?v=3.0.1);
  src: url(font-path('fontawesome-webfont.eot')?v=3.0.1#iefix) format("embedded-opentype"),
       url(font-path('fontawesome-webfont.woff')?v=3.0.1) format("woff"),
       url(font-path('fontawesome-webfont.ttf')?v=3.0.1) format("truetype");
  font-weight: normal;
  font-style: normal;
}

If you are using hard cachebusting (default) you don't need query part as md5 sum will be injected in the filename:

@font-face {
  font-family: 'FontAwesome';
  src: url(font-path('fontawesome-webfont.eot'));
  src: url(font-path('fontawesome-webfont.eot')#iefix) format("embedded-opentype"),
       url(font-path('fontawesome-webfont.woff')) format("woff"),
       url(font-path('fontawesome-webfont.ttf')) format("truetype");
  font-weight: normal;
  font-style: normal;
}

Meanwhile - I'll try to adapt Rails patch into Jekyll-Assets core.

[createdbypete]

Thanks for the reply the above throws an exception unfortunately:
Liquid Exception: Invalid CSS after "...e-webfont.eot')": expected ")", was "#iefix) format(..."

I was taking a quick look through today on lunch to try and be helpful and send this as a pull request but I'm not that familiar with the way Jekyll puts thing together yet so I will be interested to learn from your solution.

[ixti]

I guess, that's because of Liquid pre-processor I've introduced in latest version. Can you, please, show me full source of the file that causes an exception?

[createdbypete]

No problem: https://github.com/createdbypete/createdbypete.github.com/blob/develop/_assets/stylesheets/vendor/_font-awesome.scss

Also thanks for taking the time to make this it's really useful!

[ixti]

asset_path now plays nicely with query separator and anchors (same is true for all SCSS helpers that relates on asset_path, e.g. font-path and so on). Here's example of transformations:

# cachebust: none
app.js                    -> app.js
app.js?v=1&foo=bar        -> app.js?v=1&foo=bar
app.js?v=1&foo=bar#baz    -> app.js?v=1&foo=bar#baz
app.js#?v=1&foo=bar#baz   -> app.js#?v=1&foo=bar#baz

# cachebust: soft
app.js                    -> app.js?cb=4f41243847da693a4f356c0486114bc6
app.js?v=1&foo=bar        -> app.js?cb=4f41243847da693a4f356c0486114bc6&v=1&foo=bar
app.js?v=1&foo=bar#baz    -> app.js?cb=4f41243847da693a4f356c0486114bc6&v=1&foo=bar#baz
app.js#?v=1&foo=bar#baz   -> app.js?cb=4f41243847da693a4f356c0486114bc6#?v=1&foo=bar#baz

# cachebust: hard
app.js                    -> app-4f41243847da693a4f356c0486114bc6.js
app.js?v=1&foo=bar        -> app-4f41243847da693a4f356c0486114bc6.js?v=1&foo=bar
app.js?v=1&foo=bar#baz    -> app-4f41243847da693a4f356c0486114bc6.js?v=1&foo=bar#baz
app.js#?v=1&foo=bar#baz   -> app-4f41243847da693a4f356c0486114bc6.js#?v=1&foo=bar#baz

[createdbypete]

Nice work!

[chrishough]

Unfortunately I think this issue popped up again, however, I was able to get around it like so:

$font-weight: 'normal';
$font-style: 'normal';
$font-stretch: 'normal';
$font-family:'funkydori';

$font-filename-eot: asset_path('fontawesome-webfont.eot');
$font-filename-ttf: asset_path('fontawesome-webfont.ttf');
$font-filename-woff: asset_path('fontawesome-webfont.woff');

@font-face {
  font-family: '#{$font-family}';
  src: url('#{$font-filename-eot}');
  src: url('#{$font-filename-eot}?#iefix') format('embedded-opentype'),
  url('#{$font-filename-woff}') format('woff'),
  url('#{$font-filename-ttf}') format('truetype');
  font-weight: $font-weight;
  font-style: $font-style;
  font-stretch: $font-stretch;
}

[ixti]

For history, Chris' issue was caused by Jekyll itself due to improper configuration (see #64, #65)