custom-style supports module property that accepts a dom-module…

… containing style data.

`don-module` style data may be specified inside `<template>` elements and style elements also support module attribute for referencing additional modules containing style data.

src/lib/custom-style.html

@@ -79,7 +79,11 @@
     is: 'custom-style',
     extends: 'style',
 
-    created: function() {
+    properties: {
+      module: {}
+    },
+
+    ready: function() {
       // NOTE: we cannot just check attached because custom elements in 
       // HTMLImports do not get attached.
       this._tryApply();
@@ -100,7 +104,7 @@
           styleDefaults.addStyle(e);
           // we may not have any textContent yet due to parser yielding
           // if so, wait until we do...
-          if (e.textContent) {
+          if (e.textContent || this.module) {
             this._apply();
           } else {
             var observer = new MutationObserver(function() {
@@ -118,6 +122,13 @@
     _apply: function() {
       // used applied element from HTMLImports polyfill or this
       var e = this.__appliedElement || this;
+      // path fixup iff necessary
+      if (!this.__appliedElement) {
+        e.textContent = styleUtil.resolveCss(e.textContent, e.ownerDocument);
+      }
+      if (this.module) {
+        e.textContent += styleUtil.cssFromModules(this.module);
+      }
       this._computeStyleProperties();
       var props = this._styleProperties;
       var self = this;

src/lib/style-util.html

@@ -16,7 +16,7 @@
 
     return {
 
-      MODULE_STYLES_SELECTOR: 'style, link[rel=import][type~=css]',
+      MODULE_STYLES_SELECTOR: 'style, link[rel=import][type~=css], template',
 
       toCssText: function(rules, callback, preserveProperties) {
         if (typeof rules === 'string') {
@@ -81,16 +81,36 @@
         return style;
       },
 
+      cssFromModules: function(moduleIds) {
+        var modules = moduleIds.trim().split(' ');
+        var cssText = '';
+        for (var i=0; i < modules.length; i++) {
+          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: function(moduleId) {
         var m = Polymer.DomModule.import(moduleId);
         if (m && !m._cssText) {
-          var cssText = '';
-          var e$ = Array.prototype.slice.call(
-            m.querySelectorAll(this.MODULE_STYLES_SELECTOR));
-          for (var i=0, e; i < e$.length; i++) {
-            e = e$[i];
+          m._cssText = this._cssFromElement(m);
+        }
+        return m && m._cssText || '';
+      },
+
+      // support lots of ways to discover css...
+      _cssFromElement: function(element) {
+        var cssText = '';
+        var e$ = Array.prototype.slice.call(
+          element.querySelectorAll(this.MODULE_STYLES_SELECTOR));
+        for (var i=0, e; i < e$.length; i++) {
+          e = e$[i];
+          // look inside templates for elements
+          if (e.localName === 'template') {
+            cssText += this._cssFromElement(e.content);
+          } 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') {
@@ -103,15 +123,19 @@
             }
             // adjust paths in css.
             if (e) {
-              cssText += 
-                Polymer.ResolveUrl.resolveCss(e.textContent, e.ownerDocument);
+              cssText += this.resolveCss(e.textContent, e.ownerDocument);
             }
           }
-          m._cssText = cssText;
+          // now support module refs on 'styling' elements
+          var module = e.getAttribute('module');
+          if (module) {
+            cssText += this.cssFromModules(module);
+          }
         }
-        return m && m._cssText || '';
+        return cssText;
       },
 
+      resolveCss: Polymer.ResolveUrl.resolveCss,
       parser: Polymer.CssParse,
       ruleTypes: Polymer.CssParse.types
 

test/smoke/style-sharing/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+<head>
+
+  <title></title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../../polymer.html">
+  <link rel="import" href="shared-styles.html">
+  <link rel="import" href="x-foo.html">
+</head>
+<body unresolved>
+
+  <style is="custom-style" module="shared-styles"></style>
+
+  <style is="custom-style">
+    .zot {
+      background-color: var(--zot);
+    }
+  </style>
+
+  <div class="bar">.bar from custom-style with module shared-styles</div>
+  <div class="foo">.foo should not be colored</div>
+  <div class="zot">.zot from custom-style using var in custom-style with module shared-styles</div>
+
+  <hr>
+
+  <x-foo></x-foo>
+
+
+</body>
+</html>

test/smoke/style-sharing/shared-styles.html

@@ -0,0 +1,11 @@
+<dom-module id="shared-styles">
+  <style type="polymer">
+    .bar {
+      background-color: steelblue;
+    }
+
+    :root {
+      --zot: seagreen;
+    }
+  </style>
+</dom-module>

test/smoke/style-sharing/x-foo.html

@@ -0,0 +1,31 @@
+<link rel="import" href="shared-styles.html">
+
+<dom-module id="x-foo">
+  <template>
+    <style module="shared-styles"></style>
+    <style>
+      .foo {
+        background-color: tomato;
+      }
+
+      :host {
+        display: block;
+        border: 1px dashed orange;
+        padding: 4px;
+      }
+
+      .zot {
+        background-color: var(--zot);
+      }
+    </style>
+    <h4>x-foo</h4>
+    <div class="bar">.bar from shared-styles.html</div>
+    <div class="foo">.foo from local stylesheet</div>
+    <div class="zot">.zot from var in shared-styles.html</div>
+  </template>
+  <script>
+    Polymer({
+
+    });
+  </script>
+</dom-module>