Merge pull request #4344 from Polymer/2.0-import-type-css

Enable gathering styles from link rel="import" type="css" inside element dom-module

src/legacy/polymer.dom.html

@@ -27,9 +27,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   class DomApi {
 
     constructor(node) {
-      if (window.ShadyDOM) {
-        ShadyDOM.patch(node);
-      }
       this.node = node;
     }
 

src/mixins/element-mixin.html

@@ -307,7 +307,8 @@ Polymer.ElementMixin = Polymer.dedupingMixin(function(base) {
    */
   function finalizeTemplate(proto, template, is, ext) {
     // support `include="module-name"`
-    let cssText = Polymer.StyleGather.cssFromElement(template);
+    let cssText = Polymer.StyleGather.cssFromTemplate(template) +
+      Polymer.StyleGather.cssFromModuleImports(is);
     if (cssText) {
       let style = document.createElement('style');
       style.textContent = cssText;

src/utils/style-gather.html

@@ -12,7 +12,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 (function() {
   'use strict';
 
-  let MODULE_STYLES_SELECTOR = 'style, link[rel=import][type~=css], template';
+  let MODULE_STYLE_LINK_SELECTOR = 'link[rel=import][type~=css]';
   let INCLUDE_ATTR = 'include';
 
   function importModule(moduleId) {
@@ -29,58 +29,72 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
      * @param {boolean=} warnIfNotFound
      * @return {string}
      */
-    cssFromModules(moduleIds, warnIfNotFound) {
+    cssFromModules(moduleIds) {
       let modules = moduleIds.trim().split(' ');
       let cssText = '';
       for (let i=0; i < modules.length; i++) {
-        cssText += this.cssFromModule(modules[i], warnIfNotFound);
+        cssText += this.cssFromModule(modules[i]);
       }
       return cssText;
     },
 
     // returns cssText of styles in a given module; also un-applies any
     // styles that apply to the document.
-    cssFromModule(moduleId, warnIfNotFound) {
+    cssFromModule(moduleId) {
       let m = importModule(moduleId);
-      if (m && !m._cssText) {
-        m._cssText = this.cssFromElement(m);
+      if (m && m._cssText === undefined) {
+        let cssText = '';
+        // include css from the first template in the module
+        let t = m.querySelector('template');
+        if (t) {
+          cssText += this.cssFromTemplate(t);
+        }
+        // module imports: <link rel="import" type="css">
+        cssText += this.cssFromModuleImports(moduleId);
+        m._cssText = cssText || null;
       }
-      if (!m && warnIfNotFound) {
+      if (!m) {
         console.warn('Could not find style data in module named', moduleId);
       }
       return m && m._cssText || '';
     },
 
     // support lots of ways to discover css...
-    cssFromElement(element) {
+    cssFromTemplate(template) {
       let cssText = '';
       // if element is a template, get content from its .content
-      let content = element.content || element;
-      let e$ = content.querySelectorAll(MODULE_STYLES_SELECTOR);
-      for (let i=0, e; i < e$.length; i++) {
-        e = e$[i];
-        // look inside templates for elements
-        if (e.localName === 'template') {
-          cssText += this.cssFromElement(e);
-        } else {
-          // style elements inside dom-modules will apply to the main document
-          // we don't want this, so we remove them here.
-          if (e.localName === 'style') {
-            let include = e.getAttribute(INCLUDE_ATTR);
-            // now support module refs on 'styling' elements
-            if (include) {
-              cssText += this.cssFromModules(include, true);
-            }
-            // get style element applied to main doc via HTMLImports polyfill
-            e = e.__appliedElement || e;
-            e.parentNode.removeChild(e);
-            cssText += Polymer.ResolveUrl.resolveCss(e.textContent, element.ownerDocument);
-            // it's an import, assume this is a text file of css content.
-            // TODO(sorvell): plan is to deprecate this way to get styles;
-            // remember to add deprecation warning when this is done.
-          } else if (e.import && e.import.body) {
-            cssText += Polymer.ResolveUrl.resolveCss(e.import.body.textContent, e.import);
-          }
+      let e$ = template.content.querySelectorAll('style');
+      for (let i=0; i < e$.length; i++) {
+        let e = e$[i];
+        // support style sharing by allowing styles to "include"
+        // other dom-modules that contain styling
+        let include = e.getAttribute(INCLUDE_ATTR);
+        if (include) {
+          cssText += this.cssFromModules(include);
+        }
+        e.parentNode.removeChild(e);
+        cssText +=
+          Polymer.ResolveUrl.resolveCss(e.textContent, template.ownerDocument);
+      }
+      return cssText;
+    },
+    cssFromModuleImports(moduleId) {
+      let cssText = '';
+      let m = importModule(moduleId);
+      if (!m) {
+        return cssText;
+      }
+      let p$ = m.querySelectorAll(MODULE_STYLE_LINK_SELECTOR);
+      for (let i=0; i < p$.length; i++) {
+        let p = p$[i];
+        if (p.import) {
+          let importDoc = p.import;
+          // NOTE: polyfill affordance.
+          // under the HTMLImports polyfill, there will be no 'body',
+          // but the import pseudo-doc can be used directly.
+          let container = importDoc.body ? importDoc.body : importDoc;
+          cssText +=
+            Polymer.ResolveUrl.resolveCss(container.textContent, importDoc);
         }
       }
       return cssText;

test/unit/styling-import-shared-styles.html

@@ -0,0 +1,16 @@
+<dom-module id="shared-styles">
+  <style>
+    :host {
+      border: 4px solid tomato;
+    }
+  </style>
+  <link rel="import" type="css" href="styling-import1.css">
+  <link rel="import" type="css" href="styling-import2.css">
+  <template>
+    <style>
+      #three {
+        border: 3px solid tomato;
+      }
+    </style>
+  </template>
+</dom-module>

test/unit/styling-import.html

@@ -0,0 +1,92 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+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
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="styling-import-shared-styles.html">
+</head>
+<body>
+
+  <dom-module id="x-include-module">
+    <template>
+      <style include="shared-styles"></style>
+      <div id="one"></div>
+      <div id="two"></div>
+      <div id="three"></div>
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({ is: 'x-include-module'})
+    });
+    </script>
+  </dom-module>
+
+  <dom-module id="x-include-import">
+    <link rel="import" type="css" href="styling-import1.css">
+    <link rel="import" type="css" href="styling-import2.css">
+    <template>
+      <style>
+        #three {
+          border: 3px solid tomato;
+        }
+      </style>
+      <div id="one"></div>
+      <div id="two"></div>
+      <div id="three"></div>
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({ is: 'x-include-import'})
+    });
+    </script>
+  </dom-module>
+
+
+<script>
+  suite('style-imports', function() {
+
+  function assertComputed(element, value) {
+    var computed = getComputedStyle(element);
+    assert.equal(computed['border-top-width'], value, 'computed style incorrect');
+  }
+
+  test('styles included via link rel="import" type="css"', function() {
+    var el = document.createElement('x-include-import');
+    document.body.appendChild(el);
+    Polymer.flush();
+    assertComputed(el.$.one, '1px');
+    assertComputed(el.$.two, '2px');
+    assertComputed(el.$.three, '3px');
+    assertComputed(el, '0px', 'style outside template not ignored');
+    document.body.removeChild(el);
+
+  });
+
+  test('styles included via include that loads via link rel="import" type="css"', function() {
+    var el = document.createElement('x-include-module');
+    document.body.appendChild(el);
+    Polymer.flush();
+    assertComputed(el.$.one, '1px');
+    assertComputed(el.$.two, '2px');
+    assertComputed(el.$.three, '3px');
+    assertComputed(el, '0px', 'style outside template not ignored');
+    document.body.removeChild(el);
+
+  });
+
+});
+
+</script>
+</body>
+</html>

test/unit/styling-import1.css

@@ -0,0 +1,3 @@
+#one {
+  border: 1px solid orange;
+}

test/unit/styling-import2.css

@@ -0,0 +1,4 @@
+#two {
+  display: block;
+  border: 2px solid brown;
+}