[polymer-bundler] Problem with relating project root to redirects when rewriting URLs

[usergenic]

Difference can be seen when comparing the behavior of Polymer Bundler 3 vs Polymer Bundler 4:

λ cat pb3_test/a/input.html
<link rel="import" href="test://module.html">
λ cat pb3_test/a/b/input.html
<link rel="import" href="test://module.html">
λ cat pb3_test/a/b/c/input.html
<link rel="import" href="test://module.html">
λ cat pb3_test/modules/module.html
<dom-module id="module">
  <template>
    <style>
      #id {
        background-image: url(../images/image.svg);
      }
    </style>
  </template>
</dom-module>
λ polymer-bundler \
  --rewrite-urls-in-templates \
  --redirect "test://|modules/" \
  --root a/b/c \
  --out-html output/output_a_b_c.html \
  input.html
λ polymer-bundler \
  --rewrite-urls-in-templates \
  --redirect "test://|modules/" \
  --root a/b \
  --out-html output/output_a_b.html \
  input.html
λ polymer-bundler \
  --rewrite-urls-in-templates \
  --redirect "test://|modules/" \
  --root a \
  --out-html output/output_a.html \
  input.html

diff --git a/pb3_test/output/output_a.html b/pb4_test/output/output_a.html
index c912c8f..9452b0f 100644
--- a/pb3_test/output/output_a.html
+++ b/pb4_test/output/output_a.html
@@ -1,10 +1,10 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
-        background-image: url("test://images/image.svg");
+        background-image: url("../images/image.svg");
       }
     </style>
   </template>
 </dom-module>
-</div>
+</div>
diff --git a/pb3_test/output/output_a_b.html b/pb4_test/output/output_a_b.html
index c912c8f..bf599fe 100644
--- a/pb3_test/output/output_a_b.html
+++ b/pb4_test/output/output_a_b.html
@@ -1,10 +1,10 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
-        background-image: url("test://images/image.svg");
+        background-image: url("../../images/image.svg");
       }
     </style>
   </template>
 </dom-module>
-</div>
+</div>
diff --git a/pb3_test/output/output_a_b_c.html b/pb4_test/output/output_a_b_c.html
index c912c8f..5ecd62a 100644
--- a/pb3_test/output/output_a_b_c.html
+++ b/pb4_test/output/output_a_b_c.html
@@ -1,10 +1,10 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
-        background-image: url("test://images/image.svg");
+        background-image: url("../../../images/image.svg");
       }
     </style>
   </template>
 </dom-module>
-</div>
+</div>

[usergenic]

The main issue to resolve here is the effect of the three different project roots a/, a/b/ and a/b/c/ on the relative path rewrite of the background-image urls ../images/image.svg, ../../images/image.svg and ../../../images/image.svg respectively.

[usergenic]

Actually a better representation of the problem, to clarify, is when the original background-image url in the module.html points to a location within the redirect in ./modules/module.html

<dom-module id="module">
  <template>
    <style>
      #id {
        background-image: url(./images/image.svg);
      }
    </style>
  </template>
</dom-module>

Now you can see that the ../images/image.svg URL is not the problem.

diff --git a/pb3_test/output/output_a.html b/pb4_test/output/output_a.html
index c912c8f..e7db7e7 100644
--- a/pb3_test/output/output_a.html
+++ b/pb4_test/output/output_a.html
@@ -1,10 +1,10 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
-        background-image: url("test://images/image.svg");
+        background-image: url("../modules/images/image.svg");
       }
     </style>
   </template>
 </dom-module>
-</div>
+</div>
\ No newline at end of file
diff --git a/pb3_test/output/output_a_b.html b/pb4_test/output/output_a_b.html
index c912c8f..585e06c 100644
--- a/pb3_test/output/output_a_b.html
+++ b/pb4_test/output/output_a_b.html
@@ -1,10 +1,10 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
-        background-image: url("test://images/image.svg");
+        background-image: url("../../modules/images/image.svg");
       }
     </style>
   </template>
 </dom-module>
-</div>
+</div>
\ No newline at end of file
diff --git a/pb3_test/output/output_a_b_c.html b/pb4_test/output/output_a_b_c.html
index c912c8f..8a5664f 100644
--- a/pb3_test/output/output_a_b_c.html
+++ b/pb4_test/output/output_a_b_c.html
@@ -1,10 +1,10 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
-        background-image: url("test://images/image.svg");
+        background-image: url("../../../modules/images/image.svg");
       }
     </style>
   </template>
 </dom-module>
-</div>
+</div>
\ No newline at end of file

[usergenic]

After fixing bundler in PR #3330 and rerunning the script, this is the diff now: (just the assetpath and trivially stripping newline at end of file)

diff --git a/pb3_test/output/output_a.html b/pb4_test/output/output_a.html
index c912c8f..77bbc61 100644
--- a/pb3_test/output/output_a.html
+++ b/pb4_test/output/output_a.html
@@ -1,4 +1,4 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
@@ -7,4 +7,4 @@
     </style>
   </template>
 </dom-module>
-</div>
+</div>
\ No newline at end of file
diff --git a/pb3_test/output/output_a_b.html b/pb4_test/output/output_a_b.html
index c912c8f..77bbc61 100644
--- a/pb3_test/output/output_a_b.html
+++ b/pb4_test/output/output_a_b.html
@@ -1,4 +1,4 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
@@ -7,4 +7,4 @@
     </style>
   </template>
 </dom-module>
-</div>
+</div>
\ No newline at end of file
diff --git a/pb3_test/output/output_a_b_c.html b/pb4_test/output/output_a_b_c.html
index c912c8f..77bbc61 100644
--- a/pb3_test/output/output_a_b_c.html
+++ b/pb4_test/output/output_a_b_c.html
@@ -1,4 +1,4 @@
-<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://module.html">
+<div hidden="" by-polymer-bundler=""><dom-module id="module" assetpath="test://">
   <template>
     <style>
       #id {
@@ -7,4 +7,4 @@
     </style>
   </template>
 </dom-module>
-</div>
+</div>
\ No newline at end of file

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.