Hello,
Further information!
A further issue, lines in CSS files that are commented out and contain url
declarations
do not escape the URL rewriting code.
For example:
/* url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1')
format('svg'); */
Yields exception with message:
Unable to locate asset
'classpath:META-INF/assets/font-awesome/font/fontawesome-webfont.svg#fontawesomeregular'
(the file does not exist).
Thanks,
Peter
----- Original Message -----
From: "Peter Hvass" <[email protected]>
To: "Tapestry users" <[email protected]>
Sent: Wednesday, July 24, 2013 11:21:07 AM
Subject: Tapestry 5.4 url paths in css
Hello,
We're in the process of moving a couple of our projects over to 5.4 (fun, fun
times). So far it's been really smooth sailing, our old 5.3 code becoming so
much more elegant with the use of RequireJS and properly taking advantage of
data attributes.
Now comes the first problem we've run into - whatever code is responsible for
CSS URL rewriting is anticipating only one URL declaration per line/rule.
We have a mixin class for including Font Awesome (
http://fortawesome.github.io/Font-Awesome/ ). And we include it in
components/pages by going @Mixin private FontAwesome fontAwesome.
It is simply;
@Import(stylesheet = "font-awesome/css/font-awesome.css")
public class FontAwesome {
}
font-awesome folder lives under META-INF/assets/ and contains
css/font-awesome.css and font/ with
the various font formats.
Lines 28-34 of font-awesome.css look like this:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1')
format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1')
format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1')
format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1')
format('svg');
font-weight: normal;
font-style: normal;
}
So far so good, but now we load the page including FontAwesome mixin,
inspecting font-awesome.css
we see that the URLs have been rewritten as follows;
src:
url("/proj/asset.gz/meta/8cc12c35/font-awesome/font/fontawesome-webfont.eot?v=3.2.1");
src:
url("/proj/asset.gz/meta/8cc12c35/font-awesome/font/fontawesome-webfont.eot?#iefix&v=3.2.1')
format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1')
format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1')
format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1')
format('svg");
Some of them have been rewritten to path using the hash tag for reload/cache
stuff, some have been left untouched.
Upon looking at the network tab in dev tools, only fontawesome-webfont.eot is
downloaded, and it's valid. All the specified
font files should be downloaded, however. This is a way of ensuring
cross-browser fonts.
When changing this to put each url() on its own src: line, Tapestry correctly
rewrites each url() as follows, confirming my suspicions.
src:
url("/proj/asset.gz/meta/8cc12c35/font-awesome/font/fontawesome-webfont.eot?v=3.2.1");
src:
url("/proj/asset.gz/meta/8cc12c35/font-awesome/font/fontawesome-webfont.eot?#iefix&v=3.2.1')
format('embedded-opentype");
src:
url("/proj/asset.gz/meta/5d616c87/font-awesome/font/fontawesome-webfont.woff?v=3.2.1')
format('woff");
src:
url("/proj/asset.gz/meta/7222b578/font-awesome/font/fontawesome-webfont.ttf?v=3.2.1')
format('truetype");
src:
url("/proj/asset.gz/meta/e0edf310/font-awesome/font/fontawesome-webfont.svg")
format('svg');
Would be great if this could be fixed in the next alpha (or beta)!
Thanks for all the hard work so far towards 5.4; we are really enjoying using
it much more than 5.3!
Peter
