From b20151b324f8efbf6993c4bbd9742c1c5f3cee0f Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Fri, 13 Feb 2015 15:39:06 -0800
Subject: [PATCH] Integrate x-styilng system with shadow feature + some
 factoring.

---
 src/expr/polymer-shadow.html      |   4 +-
 src/expr/polymer-style.html       |   2 +-
 src/expr/shadow-settings.html     |  29 +++++++
 src/expr/shadow-styler.html       | 124 ------------------------------
 src/expr/shadow.html              |  18 +++--
 src/expr/style-transformer.html   |  72 +++--------------
 src/expr/stylizer.html            |  36 ++++-----
 src/expr/x-stylizer-defaults.html |  40 ++++++++++
 src/expr/x-stylizer.html          |  45 ++++++-----
 src/lib/css-parse.html            |   2 +-
 src/lib/style-util.html           |  70 +++++++++++++++++
 test/unit/projection-shadow.html  |   1 +
 12 files changed, 207 insertions(+), 236 deletions(-)
 create mode 100644 src/expr/shadow-settings.html
 delete mode 100644 src/expr/shadow-styler.html
 create mode 100644 src/expr/x-stylizer-defaults.html
 create mode 100644 src/lib/style-util.html

diff --git a/src/expr/polymer-shadow.html b/src/expr/polymer-shadow.html
index 9372f5d70f..0b436ebf58 100644
--- a/src/expr/polymer-shadow.html
+++ b/src/expr/polymer-shadow.html
@@ -10,5 +10,7 @@
 
 <link rel="import" href="../../polymer.html">
 <link rel="import" href="shadow.html">
-<link rel="import" href="shadow-styler.html">
 <link rel="import" href="shadow-layout.html">
+
+
+
diff --git a/src/expr/polymer-style.html b/src/expr/polymer-style.html
index 0db4234dc9..c6e4aa5ea9 100644
--- a/src/expr/polymer-style.html
+++ b/src/expr/polymer-style.html
@@ -8,6 +8,6 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../../polymer.html">
+<link rel="import" href="polymer-shadow.html">
 <link rel="import" href="stylizer.html">
 <link rel="import" href="x-stylizer.html">
diff --git a/src/expr/shadow-settings.html b/src/expr/shadow-settings.html
new file mode 100644
index 0000000000..6aa4eb67cf
--- /dev/null
+++ b/src/expr/shadow-settings.html
@@ -0,0 +1,29 @@
+<!--
+@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
+-->
+<script>
+  modulate('ShadowSettings', function() {
+    // NOTE: Users must currently opt into using ShadowDOM. They do so by doing:
+    // PolymerSettings = {shadow: true};
+    // TODO(sorvell): Decide if this should be auto-use when available or
+    // if we need some better way to do this.
+    var wantShadow = window.PolymerSettings && PolymerSettings.shadow;
+    var hasShadow = Boolean(Element.prototype.createShadowRoot);
+    var nativeShadow = hasShadow && !window.ShadowDOMPolyfill;
+    var useShadow = wantShadow && hasShadow;
+
+    return {
+      wantShadow: wantShadow,
+      hasShadow: hasShadow,
+      nativeShadow: nativeShadow,
+      useShadow: useShadow,
+      useNativeShadow: useShadow && nativeShadow
+    };
+  });
+</script>
\ No newline at end of file
diff --git a/src/expr/shadow-styler.html b/src/expr/shadow-styler.html
deleted file mode 100644
index d5aebd6aaa..0000000000
--- a/src/expr/shadow-styler.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--
-@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
--->
-<script>
-
-  using('Base', function(Base) {
-
-    /* Configures elemnent styles to stamped into ShadowDOM.
-
-     NOTE: using this feature will currently change all templates to be configured
-     to be styled for ShadowDOM.
-
-     * If an element has a template, style is placed in the template and element
-       name is replaced with `:host`.
-     * If an element does not have a template, style remains in place, but rules
-       are prepended with `html /deep/`.
-
-    */
-    XStyles = window.XStyles || {};
-
-    var originalPrepTemplate = Base._prepTemplate;
-
-    var deep = false;
-
-    Base.addFeature({
-
-      _prepTemplate: function() {
-        originalPrepTemplate.call(this);
-        this._shadowStylerRegister();
-      },
-
-      _shadowStylerRegister: function() {
-        var template = this._template;
-        var tag = this.is;
-        var hook = template ||
-          (document._currentScript || document.currentScript);
-        var styles = [];
-        var prev = hook.previousElementSibling;
-        if (prev && prev.localName === 'style') {
-          styles.push(prev);
-        }
-        styles = styles.concat(XStyles[tag] || []);
-        this._styles = styles;
-        if (!styles.length) {
-          return;
-        }
-        if (!deep) {
-          if (!this._template) {
-            var template = this._template = document.createElement('template');
-            this._template.content.appendChild(document.createElement('content'));
-          }
-        }
-        this._processStyles(this._styles, tag);
-        if (!deep && template) {
-          this.insertStyles(this._styles, template.content);
-        }
-      },
-
-      _processStyles: function(styles, name) {
-        for (var i=0, l=styles.length, style; (i<l) && (style=styles[i]); i++) {
-          if (deep) {
-            this._processStyleDeep(style, name);
-          } else {
-            this._processStyle(style, name);
-          }
-        }
-      },
-
-      _processStyle: function(style, name) {
-        var text = style.textContent;
-        var host = ':host';
-        // replace any selectors like `name ` with `:host `
-        var re = new RegExp(name + '[\\s]+', 'g');
-        text = text.replace(re, host + ' ');
-        // replace any compound selectors name.foo with :host(.foo)
-        var compound = new RegExp(name + '([^\\,\\s\\{]*)', 'g');
-        text = text.replace(compound, function(match, part) {
-          return host + '(' + part + ')';
-        });
-        style.textContent = text;
-      },
-
-      _processStyleDeep: function(style, name) {
-        var text = style.textContent;
-        var sel = /([^{}]*){/g;
-        var rec = /([^\s>\{\}\;])\s([^}{>])/g;
-        var n = new RegExp(name, 'g');
-        text = text.replace(sel, function(match) {
-          var parts = match.split(',');
-          for (var i=0, l=parts.length, p; (i<l) && (p=parts[i]); i++) {
-            p = p.replace(rec, function(m, s, e) {
-              return s + ' /deep/ ' + e;
-            });
-            p = p.replace(n, 'html /deep/ ' + name);
-            parts[i] = p;
-          }
-          match = parts.join(',');
-          return match;
-        });  
-        // console.warn('style');
-        // console.log(text);
-        style.textContent = text;
-      },
-
-      insertStyles: function(styles, root) {
-        var ref = root.firstChild;
-        for (var i=0, l=styles.length, style, n; (i<l) && (style=styles[i]); i++) {
-          n = document.createElement('style');
-          n.textContent = style.textContent;
-          ref = root.insertBefore(n,
-            ref.nextElementSibling);
-        }
-      }
-
-    });
-
-  });
-</script>
diff --git a/src/expr/shadow.html b/src/expr/shadow.html
index 2796983fdd..586bff164f 100644
--- a/src/expr/shadow.html
+++ b/src/expr/shadow.html
@@ -7,13 +7,19 @@
 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
 -->
+<link rel="import" href="shadow-settings.html">
 <script>
   
-  using('Base', function(Base) {
+using(['Base', 'ShadowSettings'], function(Base, settings) {
 
-    /**
-      Implements `shadyRoot` compatible dom scoping using native ShadowDOM.
-    */
+  /**
+    Implements `shadyRoot` compatible dom scoping using native ShadowDOM.
+  */
+
+  // Transform styles if not using ShadowDOM or if flag is set.
+  
+
+  if (settings.useShadow) {
 
     Base.addFeature({
 
@@ -123,6 +129,8 @@
 
     Polymer.dom = new Base.DomRoot(document.body);
 
-  });
+  }
+
+});
 
 </script>
diff --git a/src/expr/style-transformer.html b/src/expr/style-transformer.html
index 80cf861edd..427ffbd1dc 100644
--- a/src/expr/style-transformer.html
+++ b/src/expr/style-transformer.html
@@ -7,10 +7,10 @@
 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
 -->
-<link rel="import" href="../lib/css-parse.html">
+<link rel="import" href="../lib/style-util.html">
 <script>
 
-  modulate('Style-transformer', ['Css-parse'], function(css) {
+  modulate('StyleTransformer', ['StyleUtil'], function(styleUtil) {
 
     /* Transforms ShadowDOM styling into ShadyDOM styling
 
@@ -61,47 +61,26 @@
     // a class created from the scope. ShadowDOM selectors are also transformed
     // (e.g. :host) to use the scoping selector.
     function transformCss(rules, scope, callback) {
-      if (typeof rules === 'string') {
-        rules = css.parse(rules);
-      } 
-      forEachStyleRule(rules, function(rule) {
+      return styleUtil.toCssText(rules, function(rule) {
         transformRule(rule, scope);
         if (callback) {
           callback(rule, scope);
         }
       });
-      return css.stringify(rules);
-    }
-
-    function forEachStyleRule(node, cb) {
-      var s = node.selector;
-      var skipRules = false;
-      if (s) {
-        if ((s.indexOf(AT_RULE) !== 0) && (s.indexOf(MIXIN) !== 0)) {
-          cb(node);
-        }
-        skipRules = (s.indexOf(KEYFRAME_RULE) >= 0) || (s.indexOf(MIXIN) >= 0);
-      }
-      var r$ = node.rules;
-      if (r$ && !skipRules) {
-        for (var i=0, l=r$.length, r; (i<l) && (r=r$[i]); i++) {
-          forEachStyleRule(r, cb);
-        }
-      }
     }
 
     // transforms a css rule to a scoped rule.
     function transformRule(rule, scope) {
-      var p$ = rule.selector.split(SELECTOR_SEP);
+      var p$ = rule.selector.split(COMPLEX_SELECTOR_SEP);
       for (var i=0, l=p$.length, p; (i<l) && (p=p$[i]); i++) {
         p$[i] = transformComplexSelector(p, scope);
       }
-      rule.selector = p$.join(SELECTOR_SEP);
+      rule.selector = p$.join(COMPLEX_SELECTOR_SEP);
     }
 
     function transformComplexSelector(selector, scope) {
       var stop = false;
-      return selector.replace(SIMPLE_RX, function(s) {
+      return selector.replace(SIMPLE_SELECTOR_SEP, function(s) {
         if (!stop) {
           var o = transformCompoundSelector(s, scope);
           if (o.stop) {
@@ -137,53 +116,20 @@
       return p$.join(PSEUDO_PREFIX);
     }
 
-    // add a string of cssText to the document.
-    function applyCss(cssText, moniker) {
-      var style = document.createElement('style');
-      if (moniker) {
-        style.setAttribute('scope', moniker);
-      }
-      style.textContent = cssText;
-      // TODO(sorvell): investigate if it's better to batch multiple
-      // styles, perhaps into a fragment that's appended at once? (hopefully
-      // this doesn't matter)
-      document.head.appendChild(style);
-      return style;
-    }
-
-    // Collates and returns the cssText for a gien stylesheet (sheet)
-    function cssTextFromSheet(sheet) {
-      var css = [], rules = sheet.cssRules;
-      for (var i=0, l=rules.length, r; (i<l) && (r=rules[i]); i++) {
-        if (r.styleSheet) {
-          css.push(cssTextFromSheet(r.styleSheet));
-        } else {
-          css.push(r.cssText);
-        }
-      }
-      return css.join('\n\n');
-    }
-
     var SCOPE_SUFFIX = '-x';
     var HOST_SCOPE_SUFFIX = '-xx';
-    var AT_RULE = '@';
-    var KEYFRAME_RULE = 'keyframe';
-    var SELECTOR_SEP = ',';
-    var SIMPLE_RX = /([^\s>+~]+)/g
+    var COMPLEX_SELECTOR_SEP = ',';
+    var SIMPLE_SELECTOR_SEP = /([^\s>+~]+)/g;
     var HOST = ':host';
     var CONTENT = "::content";
     var CLASS_PREFIX = '.';
     var PSEUDO_PREFIX = ':';
-    var MIXIN = '--';
 
     // exports
     return {
       dom: transformDom,
       host: transformHost,
-      css: transformCss,
-      applyCss: applyCss,
-      cssTextFromSheet: cssTextFromSheet,
-      forEachStyleRule: forEachStyleRule
+      css: transformCss
     };
 
   });
diff --git a/src/expr/stylizer.html b/src/expr/stylizer.html
index 058c193dc0..f231fa0e01 100644
--- a/src/expr/stylizer.html
+++ b/src/expr/stylizer.html
@@ -7,33 +7,33 @@
 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
 -->
+<link rel="import" href="../lib/style-util.html">
 <link rel="import" href="style-transformer.html">
+<link rel="import" href="shadow-settings.html">
 <script>
 
-  using(['Base', 'Style-transformer', 'Css-parse'], function(Base, transformer, css) {
+  using(['Base', 'StyleTransformer', 'StyleUtil', 'ShadowSettings'], 
+    function(Base, transformer, styleUtil, settings) {
     
     var prepTemplate = Base._prepTemplate;
     var stampTemplate = Base._stampTemplate;
 
     var domModule = document.createElement('dom-module');
 
-    // Transform styles if not using ShadowDOM or if flag is set.
-    var useShadow = (window.PolymerSettings && PolymerSettings.shadow &&
-      Element.prototype.createShadowRoot && !window.ShadowDOMPolyfill);
-
     Base.addFeature({
 
       // declaration-y
       _prepTemplate: function() {
-        var port = domModule.import(this.is);
-        this._encapsulateStyle = 
-          !useShadow && (port && port.hasAttribute('encapsulate'));
-        //console.log(this.is, this._encapsulateStyle);
         prepTemplate.call(this);
+        var port = domModule.import(this.is);
+        this._encapsulateStyle = (port && port.hasAttribute('encapsulate')) &&
+          !settings.useNativeShadow;
         if (this._encapsulateStyle) {
           if (this._template) {
             transformer.dom(this._template.content, this.is);
           }
+        }
+        if (settings.useNativeShadow || this._encapsulateStyle) {
           this._scopeCss();
         }
       },
@@ -44,9 +44,6 @@
       _scopeCss: function() {
         var m = domModule.import(this.is);
         this._scopeStyles(m.querySelectorAll('style'));
-        // TODO(sorvell): does not work in HTMLIMports polyfill since
-        // SD rules are not parsed.
-        //this._scopeStyles(m.querySelectorAll('link[rel=stylesheet]'));
       },
 
       _scopeStyles: function(styles) {
@@ -56,21 +53,20 @@
           // NOTE: __appliedElement is supplied by the HTMLImports polyfill
           // and is the element in the main document used to apply styles.
           s = s.__appliedElement || s;
-          // if (s.sheet) {
-          //   // TODO(sorvell): Grabbing cssText does not work on browsers that
-          //   // don't support SD rules since they are not parsed.
-          //   var cssText = transformer.cssTextFromSheet(s.sheet);
-          // }
           var cssText = s.textContent;
           s.parentNode.removeChild(s);
           this._styles.push(s);
-          s.__cssRules = css.parse(cssText);
-          transformer.applyCss(transformer.css(s.__cssRules, this.is), this.is);
+          s.__cssRules = styleUtil.parser.parse(cssText);
+          if (settings.useNativeShadow) {
+            this._template.content.appendChild(s);
+          } else {
+            styleUtil.applyCss(null, 
+              transformer.css(s.__cssRules, this.is), this.is);
+          }
         }
       },
 
       // instance-y
-
       _stampTemplate: function() {
         if (this._encapsulateStyle) {
           transformer.host(this, this.is);
diff --git a/src/expr/x-stylizer-defaults.html b/src/expr/x-stylizer-defaults.html
new file mode 100644
index 0000000000..d0466e0518
--- /dev/null
+++ b/src/expr/x-stylizer-defaults.html
@@ -0,0 +1,40 @@
+<!--
+@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
+-->
+<link rel="import" href="../lib/style-util.html">
+<script>
+
+  modulate('StyleDefaults', ['Base', 'StyleUtil'], function(Base, styleUtil) {
+    
+    Base.addFeature({
+
+      // TODO(sorvell): decide if this fits; an element can supply
+      // default property values which will be added to the global scope;
+      // there is concern that by doing this, its easy to stomp on other values
+      addStyleDefaults: function(defaults) {
+        addStyleDefaults(defaults);
+      }
+
+    });
+
+    var defaultSheet = document.createElement('style'); 
+
+    function addStyleDefaults(defaults) {
+      defaultSheet.textContent += defaults;
+      defaultSheet.__cssRules = styleUtil.parser.parse(defaultSheet.textContent);
+    }
+    addStyleDefaults('');
+
+    // exports
+    return {
+      defaultSheet: defaultSheet
+    };
+
+  });
+</script>
diff --git a/src/expr/x-stylizer.html b/src/expr/x-stylizer.html
index 36035039ee..13d94daa33 100644
--- a/src/expr/x-stylizer.html
+++ b/src/expr/x-stylizer.html
@@ -7,10 +7,14 @@
 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
 -->
+<link rel="import" href="../lib/style-util.html">
 <link rel="import" href="style-transformer.html">
+<link rel="import" href="shadow-settings.html">
+<link rel="import" href="x-stylizer-defaults.html">
 <script>
 
-  using(['Base', 'Style-transformer', 'Css-parse'], function(Base, transformer, css) {
+  using(['Base', 'StyleTransformer', 'StyleUtil', 'ShadowSettings', 'StyleDefaults'],
+    function(Base, transformer, styleUtil, settings, defaults) {
     
     var beforeReady = Base._beforeReady;
 
@@ -19,7 +23,6 @@
       // called host before local children.
       _beforeConfigure: function() {
         this._computeStyleProperties();
-        console.log(this.is, this._styleProperties);
       },
 
       _beforeReady: function() {
@@ -35,7 +38,8 @@
         } else {
           this._styleProperties = Object.create(this.styleProperties || null);
           // apply values from defaults;
-          this._stylePropertiesFromStyles(this, this._styleProperties, [defaultSheet]);
+          this._stylePropertiesFromStyles(this, this._styleProperties, 
+            [defaults.defaultSheet]);
         }
         // TODO(sorvell): factor this to better spot.
         for (var i in this._styleProperties) {
@@ -59,7 +63,7 @@
         var p = this._reifyCustomProperty.bind(this, props, node);
         if (styles) {
           for (var i=0, l=styles.length, s; (i<l) && (s=styles[i]); i++) {
-            transformer.forEachStyleRule(s.__cssRules, p);
+            styleUtil.forEachStyleRule(s.__cssRules, p);
           }
         }
       },
@@ -98,11 +102,13 @@
       applyStyleProperties: function(bag) {
         var s$ = this._styles;
         if (s$) {
-          this._ensureScopeSelector();
+          if (!settings.useNativeShadow) {
+            this._ensureScopeSelector();
+          }
           var b = this._applyPropertiesToRule.bind(this, bag);
           var cssText = '';
           for (var i=0, l=s$.length, s; (i<l) && (s=s$[i]); i++) {
-            cssText += transformer.css(s.textContent, this.is, b) + '\n\n';
+            cssText += this._transformCss(s.textContent, this.is, b) + '\n\n'; 
           }
           if (cssText) {
             this._applyCustomCss(cssText);
@@ -110,6 +116,12 @@
         }
       },
 
+      _transformCss: function(cssText, scope, callback) {
+        return settings.useNativeShadow ?
+          styleUtil.toCssText(cssText, callback) : 
+          transformer.css(cssText, scope, callback);
+      },
+
       _ensureScopeSelector: function() {
         if (!this._scopeSelector) {
           this._scopeSelector = this._scopeSelector || (this.is + 
@@ -123,12 +135,16 @@
         if (this._customStyle) {
           this._customStyle.textContent = cssText;
         } else {
-          this._customStyle = transformer.applyCss(cssText, this._scopeSelector);
+          var target = settings.useNativeShadow ? this.localDom : null;
+          this._customStyle = styleUtil.applyCss(target, cssText, 
+            this._scopeSelector);
         }
       },
 
       _applyPropertiesToRule: function(properties, rule) {
-        this._scopifyRule(rule);
+        if (!settings.useNativeShadow) {
+          this._scopifyRule(rule);
+        }
         if (rule.cssText.match(CUSTOM_RULE_RX)) {
           rule.cssText = this._applyPropertiesToText(rule.cssText, properties);
         } else {
@@ -183,23 +199,10 @@
         for (var i=0, l= c$.length, c; (i<l) && (c=c$[i]); i++) {
           c.updateStyles();
         }
-      },
-
-      addStyleDefaults: function(defaults) {
-        addStyleDefaults(defaults);
       }
 
     });
 
-    var defaultSheet = document.createElement('style'); 
-
-    function addStyleDefaults(defaults) {
-      defaultSheet.textContent += defaults;
-      defaultSheet.__cssRules = css.parse(defaultSheet.textContent);
-    }
-    addStyleDefaults('');
-
-
     var HOST_SCOPE_SUFFIX = '-xx';
     var CUSTOM_MIXIN = '@mixin';
     var CUSTOM_VAR = 'var';
diff --git a/src/lib/css-parse.html b/src/lib/css-parse.html
index e60d8b9ea0..69d3424831 100644
--- a/src/lib/css-parse.html
+++ b/src/lib/css-parse.html
@@ -4,7 +4,7 @@
   Extremely simple css parser. Intended to be not more than what we need
   and definitely not necessarly correct =).
 */
-modulate('Css-parse', function() {
+modulate('CssParse', function() {
 
   // given a string of css, return a simple rule tree
   function parse(text) {
diff --git a/src/lib/style-util.html b/src/lib/style-util.html
new file mode 100644
index 0000000000..abf2494060
--- /dev/null
+++ b/src/lib/style-util.html
@@ -0,0 +1,70 @@
+<!--
+@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
+-->
+<link rel="import" href="css-parse.html">
+<script>
+
+  modulate('StyleUtil', ['CssParse'], function(parser) {
+
+    function toCssText(rules, callback) {
+      if (typeof rules === 'string') {
+        rules = parser.parse(rules);
+      } 
+      if (callback) {
+        forEachStyleRule(rules, callback);
+      }
+      return parser.stringify(rules);
+    }
+
+    function forEachStyleRule(node, cb) {
+      var s = node.selector;
+      var skipRules = false;
+      if (s) {
+        if ((s.indexOf(AT_RULE) !== 0) && (s.indexOf(MIXIN) !== 0)) {
+          cb(node);
+        }
+        skipRules = (s.indexOf(KEYFRAME_RULE) >= 0) || (s.indexOf(MIXIN) >= 0);
+      }
+      var r$ = node.rules;
+      if (r$ && !skipRules) {
+        for (var i=0, l=r$.length, r; (i<l) && (r=r$[i]); i++) {
+          forEachStyleRule(r, cb);
+        }
+      }
+    }
+
+    // add a string of cssText to the document.
+    function applyCss(target, cssText, moniker) {
+      var style = document.createElement('style');
+      if (moniker) {
+        style.setAttribute('scope', moniker);
+      }
+      style.textContent = cssText;
+      // TODO(sorvell): investigate if it's better to batch multiple
+      // styles, perhaps into a fragment that's appended at once? (hopefully
+      // this doesn't matter)
+      target = target || document.head;
+      target.appendChild(style);
+      return style;
+    }
+    
+    var AT_RULE = '@';
+    var KEYFRAME_RULE = 'keyframe';
+    var MIXIN = '--';
+
+    // exports
+    return {
+      parser: parser,
+      applyCss: applyCss,
+      forEachStyleRule: forEachStyleRule,
+      toCssText: toCssText
+    };
+
+  });
+</script>
diff --git a/test/unit/projection-shadow.html b/test/unit/projection-shadow.html
index d0e2905919..ec77a3b903 100644
--- a/test/unit/projection-shadow.html
+++ b/test/unit/projection-shadow.html
@@ -13,6 +13,7 @@
   <meta charset="utf-8">
   <script src="../../../webcomponentsjs/webcomponents.js"></script>
   <script src="../../../web-component-tester/browser.js"></script>
+  <script>PolymerSettings = {shadow: true};</script>
   <link rel="import" href="../../src/expr/polymer-shadow.html">
   <link rel="import" href="projection-elements.html">
 </head>