Merge pull request #109 from PolymerLabs/remove-custom-style

Use new <custom-style> in webcomponents
Polymer · Sep 3, 2016 · 6e1d30d · 6e1d30d
2 parents 51b794c + 00f9221
commit 6e1d30d
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 104 deletions.
diff --git a/polymer.html b/polymer.html
@@ -1,7 +1,7 @@
 <link rel="import" href="polymer-legacy.html">
-<!-- BREAKME(sorvell): remove when custom-style is moved to webcomponentsjs -->
-<link rel="import" href="src/legacy/custom-style.html">
 <!-- template elements -->
 <link rel="import" href="src/templatizer/dom-bind.html">
 <link rel="import" href="src/templatizer/dom-repeat.html">
 <link rel="import" href="src/templatizer/dom-if.html">
+<!-- custom-style -->
+<link rel="import" href="src/styling/custom-style.html">
diff --git a/src/elements/element.html b/src/elements/element.html
@@ -155,13 +155,6 @@
         // template preparation and take a name.
         // TODO(dfreedm): factor so that we do not need an object/element
         // argument
-        var info = {
-          localName: this.is,
-          is: this.is,
-          extends: this.extends,
-          __cssBuild: this.__cssBuild,
-          __placeholder: this.__placeholder
-        };
         // support `include="module-name"`
         let cssText = Polymer.StyleGather.cssFromElement(template);
         if (cssText) {
@@ -170,12 +163,9 @@
           template.content.insertBefore(style, template.content.firstChild);
         }
         if (window.ShadyCSS) {
-          ShadyCSS.prepareTemplate(info, template);
+          window.ShadyCSS.prepareTemplate(template, this.is, this.extends);
         }
-        // TODO(dfreedm): remove when style stuff is refactored
-        // away from using element as input.
         var proto = this.prototype;
-        proto.__notStyleScopeCacheable = info.__notStyleScopeCacheable;
         this.data.clearPropagateEffects(proto);
         this.data.bindTemplate(proto, template);
         proto._template = template;

diff --git a/src/legacy/custom-style.html b/src/legacy/custom-style.html
diff --git a/src/styling/custom-style.html b/src/styling/custom-style.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 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="style-gather.html">
+<script>
+(function() {
+  'use strict';
+  var ce = window.customElements;
+  var tag = 'custom-style';
+  var attr = 'include';
+
+  ce.whenDefined(tag).then(function() {
+    var CustomStyle = ce.get(tag);
+    CustomStyle.processHook = function(style) {
+      var include = style.getAttribute(attr);
+      if (!include) {
+        return;
+      }
+      style.removeAttribute(attr);
+      style.textContent = Polymer.StyleGather.cssFromModules(include) + style.textContent;
+    };
+  });
+})();
+</script>
diff --git a/test/runner.html b/test/runner.html
@@ -62,7 +62,7 @@
       }, []);
     }
 
-    suites = combinations(suites, [['wc-ce=v1&wc-register=true'], ['forceShadyDom=true', '']]);
+    suites = combinations(suites, [['wc-ce=v1&wc-register=true'], ['wc-shadydom=true', '']]);
     console.log('Testing suites:\n\t' + suites.join('\n\t'));
 
     WCT.loadSuites(suites);

diff --git a/test/unit/custom-style-async-import.html b/test/unit/custom-style-async-import.html
@@ -1,10 +1,12 @@
+<custom-style>
 <style is="custom-style">
   :root {
     --cs-blue: {
       border : 8px solid blue;
     };
   }
 </style>
+</custom-style>
 <dom-module id="x-client">
   <template>
     <style>

diff --git a/test/unit/custom-style-import.html b/test/unit/custom-style-import.html
@@ -20,6 +20,7 @@
 
 <link rel="import" href="sub/style-import.html">
 
+<custom-style>
 <style is="custom-style" include="shared-style style-import">
   :root {
 
@@ -30,3 +31,4 @@
     padding: 10px;
   }
 </style>
+</custom-style>
diff --git a/test/unit/custom-style-late-import.html b/test/unit/custom-style-late-import.html
@@ -4,16 +4,20 @@
     extends : 'input'
   });
 </script>
+<custom-style>
 <style is="custom-style">
   input[is=x-input] {
     border : 4px solid red;
     @apply --cs-blue;
   }
 </style>
+</custom-style>
+<custom-style>
 <style is="custom-style">
   :root {
     --cs-blue: {
       border : 8px solid blue;
     };
   }
 </style>
+</custom-style>
diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
@@ -15,6 +15,9 @@
   <script src="../../../web-component-tester/browser.js"></script>
   <link rel="import" href="../../polymer.html">
   <link rel="import" href="custom-style-import.html">
+</head>
+<body>
+  <custom-style>
   <style is="custom-style">
     x-bar {
       border: 1px solid red;
@@ -85,6 +88,8 @@
       --deeep: 6px solid orange;
     }
   </style>
+</custom-style>
+  <custom-style>
   <style is="custom-style">
     .bag {
       ;@apply --bag;
@@ -111,7 +116,9 @@
       border: var(--after);
     }
   </style>
+</custom-style>
 
+<custom-style>
   <style is="custom-style" include="shared-style2">
     .zazz {
       border: 20px solid blue;
@@ -122,15 +129,16 @@
       border-top : 3px solid red;
     }
   </style>
+</custom-style>
+<custom-style>
   <style is="custom-style">
     @media (min-width: 1px) {
       .foo--bar {
         border-top : 20px solid blue;
       }
     }
   </style>
-</head>
-<body>
+</custom-style>
   <div class="italic">italic</div>
   <div class="bag">bag</div>
   <div class="mix">mix</div>
@@ -354,7 +362,7 @@
             assert.ok(cs.getPropertyValue(p));
           });
         } else {
-          var props = ShadyCSS._documentOwner.__styleProperties;
+          var props = ShadyCSS._documentOwner.__styleInfo.styleProperties;
           propsToCheck.forEach(function(p) {
             assert.property(props, p);
           });
@@ -398,9 +406,11 @@
       test('dynamic custom-styles apply', function() {
         var dynamic = document.querySelector('.dynamic');
         assertComputed(dynamic, '0px');
-        var ds = document.createElement('style', 'custom-style');
-        ds.textContent = ':root { --dynamic: 11px solid orange; }';
-        document.head.appendChild(ds);
+        var cs = document.createElement('custom-style');
+        var s = document.createElement('style');
+        s.textContent = ':root { --dynamic: 11px solid orange; }';
+        cs.appendChild(s);
+        document.body.appendChild(cs);
         CustomElements.takeRecords();
         Polymer.updateStyles();
         assertComputed(dynamic, '11px');

diff --git a/test/unit/resolveurl.html b/test/unit/resolveurl.html
@@ -37,7 +37,7 @@
         document.body.appendChild(el);
         CustomElements.takeRecords();
         var rx = /sub\/foo\.z/;
-        assert.match(el.__styleRules.cssText, rx, 'url not relative to main document');
+        assert.match(el.__styleInfo.styleRules.cssText, rx, 'url not relative to main document');
         assert.match(el.$.div.getAttribute('style'), rx, 'style url not relative to main document');
         assert.match(el.$.img.src, rx, 'src url not relative to main document');
         assert.match(el.$.a.href, rx, 'href url not relative to main document');