Fixed issue #579 where url() values inside <style> tags inside of <do…

…m-module> tags of inlined html imports were being rewritten, but were duplicating and thereby foiling the work of the Polymer's own application of the assetpath property of the dom module.

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Fixed issue where inlined `<link rel="import" type="css" ...>` "stylesheet imports" (deprecated but still supported) were inlined in reverse order.  Fixes [issue #575](https://github.com/Polymer/polymer-bundler/issues/575).
 - Added a `missingImports` property to the `Bundle` class (part of the `BundleManifest`).
 - The JSON generated by `--manifest-out` now includes a `_missing` url collection when any are encountered that could not be loaded.
+- Fixed [issue #579](https://github.com/Polymer/polymer-bundler/issues/579) where `url()` values inside `<style>` tags inside of `<dom-module>` tags of inlined html imports were being rewritten, but were duplicating and thereby foiling the work of the Polymer's own application of the `assetpath` property of the dom module.
 <!-- Add new, unreleased changes here. -->
 
 ## 2.2.0 - 2017-06-28

src/import-utils.ts

@@ -427,7 +427,7 @@ function rewriteElementAttrsBaseUrl(
 function rewriteStyleTagsBaseUrl(
     ast: ASTNode, oldBaseUrl: UrlString, newBaseUrl: UrlString) {
   const styleNodes = dom5.queryAll(
-      ast, matchers.styleMatcher, undefined, dom5.childNodesIncludeTemplate);
+      ast, matchers.styleMatcher, undefined, dom5.defaultChildNodes);
   for (const node of styleNodes) {
     let styleText = dom5.getTextContent(node);
     styleText = rewriteCssTextBaseUrl(styleText, oldBaseUrl, newBaseUrl);

src/test/bundler_test.ts

@@ -626,14 +626,14 @@ suite('Bundler', () => {
           doc, matchers.styleMatcher, [], dom5.childNodesIncludeTemplate);
       assert.equal(links.length, 0);
       assert.equal(styles.length, 3);
+      assert.match(dom5.getTextContent(styles[0]), /regular-style/);
+      assert.match(dom5.getTextContent(styles[1]), /simple-style/);
+      assert.match(dom5.getTextContent(styles[2]), /import-linked-style/);
+
+      // Verify the the inlined url() values in the stylesheet are updated to
+      // include "imports" prefix.
       assert.match(
-          dom5.getTextContent(styles[0]), /regular-style/, 'regular-style.css');
-      assert.match(
-          dom5.getTextContent(styles[1]), /simple-style/, 'simple-style.css');
-      assert.match(
-          dom5.getTextContent(styles[2]),
-          /import-linked-style/,
-          'import-linked-style.css');
+          dom5.getTextContent(styles[1]), /imports\/assets\/platform\.png/);
     });
 
     test('Inlined styles have proper paths', async () => {

src/test/import-utils_test.ts

@@ -74,7 +74,7 @@ suite('import-utils', () => {
           <template>
           <img src="neato.gif">
           <style>:host { background-image: url(background.svg); }</style>
-          <div style="position: absolute;"></div>
+          <div style="background-image: url(background.svg)"></div>
           </template>
           </dom-module>
           <script>Polymer({is: "my-element"})</script>
@@ -86,8 +86,8 @@ suite('import-utils', () => {
           <dom-module id="my-element" assetpath="my-element/">
           <template>
           <img src="neato.gif">
-          <style>:host { background-image: url("my-element/background.svg"); }</style>
-          <div style="position: absolute;"></div>
+          <style>:host { background-image: url(background.svg); }</style>
+          <div style="background-image: url(background.svg)"></div>
           </template>
           </dom-module>
           <script>Polymer({is: "my-element"})</script>
@@ -107,7 +107,7 @@ suite('import-utils', () => {
           <dom-module id="my-element">
           <template>
           <style>:host { background-image: url(background.svg); }</style>
-          <div style="position: absolute;"></div>
+          <div style="background-image: url(background.svg)"></div>
           </template>
           </dom-module>
           <script>Polymer({is: "my-element"})</script>
@@ -118,8 +118,8 @@ suite('import-utils', () => {
           <link rel="stylesheet" href="my-element/my-element.css">
           <dom-module id="my-element" assetpath="my-element/">
           <template>
-          <style>:host { background-image: url("my-element/background.svg"); }</style>
-          <div style="position: absolute;"></div>
+          <style>:host { background-image: url(background.svg); }</style>
+          <div style="background-image: url(&quot;my-element/background.svg&quot;)"></div>
           </template>
           </dom-module>
           <script>Polymer({is: "my-element"})</script>
@@ -168,14 +168,14 @@ suite('import-utils', () => {
         <link rel="stylesheet" href="components/my-element/my-element.css">
         <dom-module id="my-element" assetpath="components/my-element/">
         <template>
-        <style>:host { background-image: url("components/my-element/background.svg"); }</style>
-        <img src="components/my-element/bloop.gif">
+        <style>:host { background-image: url(background.svg); }</style>
+        <img src="bloop.gif">
         </template>
         </dom-module>
         <script>Polymer({is: "my-element"})</script>`;
 
       const ast = astUtils.parse(htmlBase);
-      importUtils.rewriteAstToEmulateBaseTag(ast, 'the/doc/url', true);
+      importUtils.rewriteAstToEmulateBaseTag(ast, 'the/doc/url', false);
 
       const actual = parse5.serialize(ast);
       assert.deepEqual(stripSpace(actual), stripSpace(expectedBase), 'base');
@@ -202,15 +202,15 @@ suite('import-utils', () => {
         <link rel="stylesheet" href="components/my-element.css">
         <dom-module id="my-element" assetpath="components/">
         <template>
-        <style>:host { background-image: url("components/background.svg"); }</style>
-        <img src="components/bloop.gif">
+        <style>:host { background-image: url(background.svg); }</style>
+        <img src="bloop.gif">
         </template>
         </dom-module>
         <script>Polymer({is: "my-element"})</script>
       `;
 
       const ast = astUtils.parse(htmlBase);
-      importUtils.rewriteAstToEmulateBaseTag(ast, 'the/doc/url', true);
+      importUtils.rewriteAstToEmulateBaseTag(ast, 'the/doc/url', false);
 
       const actual = parse5.serialize(ast);
       assert.deepEqual(stripSpace(actual), stripSpace(expectedBase), 'base');

test/html/imports/simple-style.css

@@ -8,8 +8,8 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 .from-simple-style { color: blue; }
-:host([type="platform"]) { background-color: red; }
-:host([type="core"]) { background-color: red; }
-:host([type="elements"]) { background-color: red; }
+:host([type="platform"]) { background-image: url('assets/platform.png'); }
+:host([type="core"]) { background-color: url('assets/core.png'); }
+:host([type="elements"]) { background-color: url('assets/elements.png'); }
 polyfill-next-selector { content: ':host header'; }
 polyfill-next-selector { content: 'I WIN'; }