factor to make style loading mechanism switchable, currently via expe…

…rimental cache-csstext attribute.
googlearchive · Jan 27, 2014 · 6c8b0b9 · 6c8b0b9
1 parent bf5cc69
commit 6c8b0b9
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/src/declaration/styles.js b/src/declaration/styles.js
@@ -14,6 +14,7 @@
   // magic words
 
   var STYLE_SELECTOR = 'style';
+  var STYLE_LOADABLE_MATCH = '@import';
   var SHEET_SELECTOR = 'link[rel=stylesheet]';
   var STYLE_GLOBAL_SCOPE = 'global';
   var SCOPE_ATTR = 'polymer-scope';
@@ -25,7 +26,20 @@
       if (content) {
         this.convertSheetsToStyles(content);
       }
-      Platform.loader.loadStyles(content, callback);
+      var styles = this.findLoadableStyles(content);
+      if (styles.length) {
+        // if SD polyfill or opt-in, use xhr for cssText, otherwise
+        // allow platform to cache styles.
+        // TODO(sorvell): experimental flag to force direct caching of cssTest
+        // rather than relying on platform to cache @import rules.
+        if (window.ShadowDOMPolyfill || this.hasAttribute('cache-csstext')) {
+          Platform.loader.xhrStyles(styles, callback);
+        } else {
+          Platform.loader.cacheStyles(styles, callback);
+        }
+      } else if (callback) {
+        callback();
+      }
     },
     convertSheetsToStyles: function(root) {
       var s$ = root.querySelectorAll(SHEET_SELECTOR);
@@ -38,6 +52,18 @@
         s.parentNode.replaceChild(c, s);
       }
     },
+    findLoadableStyles: function(root) {
+      var loadables = [];
+      if (root) {
+        var s$ = root.querySelectorAll(STYLE_SELECTOR);
+        for (var i=0, l=s$.length, s; (i<l) && (s=s$[i]); i++) {
+          if (s.textContent.match(STYLE_LOADABLE_MATCH)) {
+            loadables.push(s);
+          }
+        }
+      }
+      return loadables;
+    },
     /**
      * Install external stylesheets loaded in <polymer-element> elements into the 
      * element's template.

diff --git a/test/html/styling/sheet-scope.html b/test/html/styling/sheet-scope.html
@@ -23,7 +23,7 @@
 
   <x-other></x-other>
 
-  <polymer-element name="x-stylish">
+  <polymer-element name="x-stylish" cache-csstext>
     <template>
       <link rel="stylesheet" href="sheet1.css" polymer-scope="global">
       <link rel="stylesheet" href="sheet2.css" polymer-scope="controller">

diff --git a/test/html/styling/x-sheet-main-doc.html b/test/html/styling/x-sheet-main-doc.html
@@ -1,4 +1,4 @@
-<polymer-element name="x-sheet-main-doc">
+<polymer-element name="x-sheet-main-doc" cache-csstext>
   <template>
     <link rel="stylesheet" polymer-scope="global" href="sheet1.css">
     <link rel="stylesheet" href="sheet1.css">

diff --git a/test/html/styling/x-sheets.html b/test/html/styling/x-sheets.html
@@ -1,4 +1,4 @@
-<polymer-element name="x-sheets">
+<polymer-element name="x-sheets" cache-csstext>
   <style>
     .red1 {
       background: tomato;