change x-style to custom-style; apply properties used in custom-style

polymer.html

@@ -86,7 +86,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 </script>
 
-<link rel="import" href="src/lib/x-style.html">
+<link rel="import" href="src/lib/custom-style.html">
 <link rel="import" href="src/lib/template/x-autobind.html">
 <link rel="import" href="src/lib/template/x-template.html">
 <link rel="import" href="src/lib/template/x-repeat.html">

src/lib/css-parse.html

@@ -125,7 +125,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
     port: /@import[^;]*;/gim,
     customProp: /--[^;{]*?:[^{};]*?;/gim,
-    mixinProp: /--[^;{]*?:[^{;]*?{[^}]*?}/gim,
+    mixinProp: /--[^;{]*?:[^{;]*?{[^}]*?};?/gim,
     mixinApply: /@mixin[\s]*\([^)]*?\)[\s]*;/gim
   };
 

src/lib/custom-style.html

@@ -33,7 +33,7 @@ Example:
   <script src="components/webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="components/polymer/polymer.html">
 
-  <style is="x-style">
+  <style is="custom-style">
     
     /* Will be prevented from affecting local DOM of Polymer elements */
     * {
@@ -61,42 +61,59 @@ Example:
 </html>
 ```
 
-Note, all features of `x-style` are available when defining styles as part of Polymer elements (e.g. `<style>` elements within `<dom-module>`'s used for defining Polymer elements. The `x-style` extension should only be used for defining document styles, outside of a custom element's local DOM.
+Note, all features of `custom-style` are available when defining styles as part of Polymer elements (e.g. `<style>` elements within `<dom-module>`'s used for defining Polymer elements. The `custom-style` extension should only be used for defining document styles, outside of a custom element's local DOM.
 
 -->
 
 <script>
 (function() {
 
+  var nativeShadow = Polymer.Settings.useNativeShadow;
+
   Polymer({
 
-    is: 'x-style',
+    is: 'custom-style',
     extends: 'style',
 
     created: function() {
       if (this.parentNode.localName === 'dom-module') {
-        return;
+        this._inert = true;
+      } else {
+        var rules = Polymer.StyleUtil.parser.parse(this.textContent);
+        this._rulesToDefaultProperties(rules);
       }
-      var rules = Polymer.StyleUtil.parser.parse(this.textContent);
-      this.applyProperties(rules);
-      // TODO(sorvell): since custom rules must match directly, they tend to be
-      // made with selectors like `*`.
-      // We *remove them here* so they don't apply too widely and nerf recalc.
-      // This means that normal properties mix in rules with custom 
-      // properties will *not* apply.
-      var cssText = Polymer.StyleUtil.parser.stringify(rules);
-      this.textContent = this.scopeCssText(cssText);
     },
 
-    scopeCssText: function(cssText) {
-      return Polymer.Settings.useNativeShadow ?
-        cssText :
-        Polymer.StyleUtil.toCssText(cssText, function(rule) {
-          Polymer.StyleTransformer.rootRule(rule);
-      });
+    attached: function() {
+      // go async to give a chance to collect properties into the StyleDefaults
+      // before applying
+      if (!this._inert) {
+        this.async(this._applyStyle);
+      }
     },
 
-    applyProperties: function(rules) {
+    // polyfill this style with root scoping and 
+    // apply custom properties!
+    _applyStyle: function() {
+      var e = this._appliedElement || this;
+      var props = this._styleProperties = this._computeStyleProperties();
+      var self = this;
+      e.textContent = Polymer.StyleUtil.toCssText(e.textContent, 
+        function(rule) {
+          // polyfill lack of support for :root
+          if (rule.selector === ':root') {
+            rule.selector = 'body';
+          }
+          if (rule.cssText.match(CUSTOM_RULE_RX)) {
+            rule.cssText = self._applyPropertiesToText(rule.cssText, props);
+          }
+          if (!nativeShadow) {
+            Polymer.StyleTransformer.rootRule(rule);
+          }
+        });
+    },
+
+    _rulesToDefaultProperties: function(rules) {
       var cssText = '';
       Polymer.StyleUtil.forEachStyleRule(rules, function(rule) {
         if (rule.cssText.match(CUSTOM_RULE)) {
@@ -112,6 +129,7 @@ Note, all features of `x-style` are available when defining styles as part of Po
 
   });
 
+  var CUSTOM_RULE_RX = /^(?![{}])(mixin|var)/m;
   var CUSTOM_RULE = /--[^;{'"]*\:/;
 
 })();

src/standard/x-styling.html

@@ -28,8 +28,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         prepTemplate.call(this);
         // determine if element contains x-scope styling
         this._hasXScopeStyles = this._styles && this._styles.some(function(s) {
-          return s.textContent.match(CUSTOM_RULE_RX);
-        });
+          return this._styleHasCustomRules(s);
+        }, this);
+      },
+
+      _styleHasCustomRules: function(style) {
+        return style.textContent.match(CUSTOM_RULE_RX);
       },
 
       attachedCallback: function() {
@@ -132,7 +136,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           var parts = property.split(';');
           for (var i=0; i<parts.length; i++) {
             if (parts[i].match(CUSTOM_RULE_RX)) {
-              parts[i] = this._applyPropertiesToText(parts[i], props);
+              // remove trailing ;return
+              parts[i] = this._applyPropertiesToText(parts[i], props).slice(0, -2);
             }
           }
           return parts.join(';');
@@ -239,7 +244,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             output += '\t' + m[1].trim() + ': ' + this._propertyToCss(v);
           }
         }
-        // e.g. @mixin(--stuff);
+        // e.g. mixin(--stuff);
         while (m = CUSTOM_MIXIN_USE.exec(cssText)) {
           v = m[1];
           if (v) {
@@ -387,10 +392,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     var HOST_SELECTOR_SUFFIX = '($|[.:[\\s>+~])';
     var CUSTOM_RULE_RX = /mixin|var/;
     var CUSTOM_VAR_ASSIGN = /(--[^\:;]*?):\s*?([^;{]*?);/g;
-    var CUSTOM_MIXIN_ASSIGN = /(--[^\:;]*?):[^{;]*?{([^}]*?)}/g;
-    var CUSTOM_VAR_VALUE = /^var\(([^)]*?)\)/;
+    var CUSTOM_MIXIN_ASSIGN = /(--[^\:;]*?):[^{;]*?{([^}]*?)};?/g;
+    var CUSTOM_VAR_VALUE = /^var\(([^)]*?)\);?/;
     var CUSTOM_VAR_USE = /(?:^|[;}\s])([^;{}]*?):[\s]*?var\(([^)]*)?\)/gim;
-    var CUSTOM_MIXIN_USE = /mixin\(([^)]*)\)/gim;
+    var CUSTOM_MIXIN_USE = /mixin\(([^)]*)\);?/gim;
 
   })();
 </script>

test/unit/custom-style.html

@@ -14,7 +14,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../../web-component-tester/browser.js"></script>
   <link rel="import" href="../../polymer.html">
-  <style is="x-style">
+  <style is="custom-style">
     x-bar {
       border: 1px solid red;
       display: block;
@@ -26,12 +26,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     }
 
     :root {
+
+      /* broken within a mixin */
+      /*--shpoo: var(--nug);*/
+      
       --nug: italic;
 
       --boo: {
-        background-color: tomato;
-        /* broken */
-        --shpoo: var(--nug);
+        background-color: blue;        
       };
 
       --zonk: {
@@ -41,12 +43,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       --foo: {
         margin: 10px;
         mixin(--zonk);
-      }
+      };
 
+      background: orange;
+    }
+  </style>
+  <style is="custom-style">
+    .foo {
+      mixin(--foo);
     }
   </style>
 </head>
 <body>
+  <div class="foo">Hi there</div>
+
   <x-bar></x-bar>
 
   <x-foo></x-foo>