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 

Reply via email to