Loading static assets e.g. images/fonts about meteor-bower HOT 24 CLOSED

No, assets defined in the main field of the bower.json descriptor should be automatically bundled. See the code. It works for select2 for instance.

What package do you try to add?

from meteor-bower.

bootstrap3, glyphicons would not load until I copied the fonts folder into /public.

edit: sorry, the package itself on bower.io is called 'bootstrap', version 3.1.1

from meteor-bower.

I've just tested bootstap v3.1.1 and fonts are bundled as expected.

from meteor-bower.

I'm not sure what's going on; I just tested with a fresh project to make sure I didn't have any orphaned meteorite stuff interfering.

meteor create test-bower
mrt add bower

edit smart.json to add

"bower": {
    "bootstrap": "3.1.1"
}

meteor deploy bowertest

http://bowertest.meteor.com/

the span with the glyphicon glyphicon-music class does not render correctly on my FF/chrome.

The js/css files are being loaded correctly, it's just the static assets (fonts/images) that I'm having issues with. I've experienced the same thing with select2 trying to load the select2.png spritesheet.

from meteor-bower.

Could you try to meteor deploy --debug? I'm under the impression that the problem comes from relative paths in the minified CSS.

from meteor-bower.

Redeployed with --debug flag

from meteor-bower.

Sorry, I should have mentioned that this was occurring in the local debug environment as well.

from meteor-bower.

The following tag:

<span style="font-size:36px;" class="glyphicon glyphicon-music"></span>

works for me in local. It doesn't work when the CSS is minified since its location is modified but not relative paths inside the file. I guess this is more a meteor issue with the CSS minifier. @Slava?

from meteor-bower.

A clonable reproduction? In 0.7.1 CSS minifier was simplified to avoid such bugs.

from meteor-bower.

@mquandalle do you have any ideas about why it wouldn't work on my local unminified environment? I am getting mime type warnings, although I'm not sure this would be the cause. I got the same warnings when using bootstrap3 package from atmosphere but didn't have issues rendering.

from meteor-bower.

Clonable repo: https://github.com/mquandalle/meteor-minifybug
Deployed broken version: http://minifybug.meteor.com/

from meteor-bower.

@mquandalle that's a very difficult reproduction to work with. Is it meteor-bower problem? If not, why is it in reproduction? Should I be cutting through the whole bootstrap to see what actually happens?

Maybe it is because I don't have much experience with CSS-related tooling, but the time I will spend on this repro is simply is not worth it. Either narrow it down to 5-10 lines of code, or point me at the piece of Meteor's code that is doing something wrong. Or submit a 4-5 lines of code PR.

from meteor-bower.

Let me join steps by steps explanations of the issue.

First clone the repo and start the app:

$ git clone [email protected]:mquandalle/meteor-minifybug.git
$ meteor &

You'll see that there is one CSS file included in the bundle:

$ curl -s http://localhost:3000 | head -n 4 | tail -n 1
<link rel="stylesheet" href="/packages/bower/bootstrap/dist/css/bootstrap.css?f9aee2a38a135a2d63d30f9bcb1247dc4f927d4b">

This CSS file is added by the Meteor compileStep API, see the code.

This CSS file reference a font file with a relative path:

$ curl -s http://localhost:3000/packages/bower/bootstrap/dist/css/bootstrap.css | head -n 2381 | tail -n 6
@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../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');
}

This glyphicons-halflings-regular.eot file is also added to the bundle using the compileStep API, see the code

So we have two files, one css and one eot. The css file use a relative path to locate the eot one. If you open the browser, everything works as expected.

Now stop meteor and start it again in production mode:

$ meteor --production &

The stylesheet is minified and served as a root file:

$ curl -s http://localhost:3000 | head -n 4 | tail -n 1
  <link rel="stylesheet" href="/b4df97e1d1ca2b955e456c9c22d2cd6b19bc6120.css">

The problem is that the relative path to the eot file has been untouched:

$ curl -s http://localhost:3000/b4df97e1d1ca2b955e456c9c22d2cd6b19bc6120.css | grep -c "src:url(../fonts/glyphicons-halflings-regular.eot)"
1

And if you open the browser you'll see that it doesn't work because the font path is wrong.

I'm not sure at all, but this bug may be related to the addStylesheet method. Does that help?

from meteor-bower.

@Slava Oops, my reproduction was running on Meteor 7.0.
With Meteor 7.2 the path error is present in both test and production environments. cc @farism

Basically the bug is that when you add a stylesheet using the compileStep.addStylesheet method, you indicate a path but the stylesheet will be served from the website root, not from the given path. This location modification invalidates relative URLs (backgrounds, fonts) inside the stylesheet.

One solution might be to always use absolute URLs, but in this particular meteor-bower case we don't control the CSS file content. The other way, which is more generic, is to automate the URL rewriting in the minifier function. It should be as simple as:

newRootPath = path.join(virtualPath, relativePath);

from meteor-bower.

@mquandalle this clears things up for me a bit. I couldn't figure out why I was getting the error in both dev/prod environments, but apparently it was due to using meteor 0.7.2

from meteor-bower.

Did you catch the issue @Slava?

from meteor-bower.

@mquandalle Did have time to look at it yet. If you happen to to submit a PR fixing issues, it would be great: all the minification happens in the package minifiers and is pretty simple.

from meteor-bower.

I am sorry, I missed this giant explanation from you, after reading it, it does make sense how it could break, I am not sure if it is a fault of Meteor's bundler/minifier or a design fault of bower-based fetching or assets/sources?

from meteor-bower.

It's not bower fault, you could have the same problem without bower. If you add a stylesheet using compileStep.addStylesheet and you set its path to dir/subdir/mystylesheet.css you would expect relatives urls to work from that path (and that was effectively the case in dev mode before 7.1). So if inside of this stylesheet you link an image with the relative url ../mybackground.png you would expect to link a file located at dir/mybackground.png.

In most cases, people write their own stylesheets so it's always possible to use absolute urls. But in this case the stylesheet comes from an external source so this is why there is a problem. Actually I could do the relativeToAbsoluteUrl transformation inside this meteor-bower package, but that makes more sense inside the minifiers package.

from meteor-bower.

I agree with you, let's proceed on your PR :)

Thanks for the efforts!

from meteor-bower.

Does your PR fix this issue? Can you add a test that mimics the behavior that was broken here? By adding tests to mergeCss?

from meteor-bower.

Yes, now it works!

from meteor-bower.

Bug fixed on meteor#devel :-)

from meteor-bower.

Thanks guys! One less thing stopping me from moving to Blaze :)

from meteor-bower.