SVG file path referenced with url() in package CSS file not parsed correctly.

[carlosbaraza]

Today I experimented an issue with a package, which is serving a SVG file, referenced relatively via url() in a CSS file.

The issue is that the SVG file url is not parsed and overridden with the correct packages/package/... during the CSS compilation time. However, the PNG file referenced in the same way is correctly parsed. The result is that the file could not be found, so the icons are not displayed correctly.

With SVG file rule enabled:

With SVG file rule disabled:

Concretely, we could appreciate that the CSS definition is similar in the file that should have been parsed correctly:
https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/default-skin/default-skin.css#L55
https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/default-skin/default-skin.css#L65

Finally, in order to ease the reproduction of the issue, I pushed a simple meteor app that illustrates the issue: https://github.com/carlosbaraza/meteor-css-url-parse-svg

[stubailo]

@carlosbaraza I figured it out - it actually doesn't have anything to do with SVG vs. PNG. It's actually because one of the rules is inside a media query, and we don't correctly traverse the syntax tree inside media queries.

Hopefully I can push a fix soon and get it into 1.2.

[stubailo]

Oh - great news. I just ran it with Meteor 1.2 and everything works.

Try upgrading your app to the release candidate and let me know:

meteor update --release 1.2-rc.10

[carlosbaraza]

Hi @stubailo,

Great news! I will have a look as soon as I have some time. For the moment, my workaround is to actually serve the file on that path (file in public folder). I am not in a rush, so I will wait for the official 1.2 release.

Thank you!