tools: polymer-bundler breaks css image paths

My application has below project structure:

my-project
* src
  * assets
    * bower_components
      * my-library
        * assets
          * texture.png
        * x-foo
          * x-foo.html
    * elements.html (list of imports pointing to elements in `my-library` folder)

I have a style with below css in my-library folder:

--paper-toolbar: {         
          border-image: url("../assets/texture.png") 1 0 0 0;
}

After I run polymer-bundler on elements.html, I see below url in the bundled file:

--paper-toolbar: {         
          border-image: url("bower_components/my-library/assets/texture.png") 1 0 0 0;
}

When I run this project locally, the final path that browser looks for is http://localhost:4200/assets/bower_components/my-library/x-foo/bower_components/my-library/assets/texture.png

I think the style urls should not be updated by polymer-bundler.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 18 (10 by maintainers)

Commits related to this issue

Most upvoted comments

@jaichandra and @brettpostin polymer-bundler 3.0.0 released with the fix back in it.

@jaichandra It appears that vulcanize and polymer-bundler have apparently been doing exactly the wrong thing here since… forever, with respect to rewriting the templated <style> tag css contents when inlining imports.

I am really surprised this hasn’t been reported as a bug until now. Also, we have four unit tests which are designed to assert it does precisely the current incorrect behavior.

👎

Fixing this immediately.