Integrate basic extends support.

Polymer · May 14, 2015 · 6095478 · nazar-pc · Nov 5, 2015 · 6095478
1 parent 9c98ce8
commit 6095478
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 69 deletions.
diff --git a/src/lib/css-extends.html → src/lib/style-extends.html b/src/lib/css-extends.html → src/lib/style-extends.html
@@ -10,16 +10,17 @@
 <link rel="import" href="style-util.html">
 
 <script>
-Polymer.CssExtends = (function() {
+
+Polymer.StyleExtends = (function() {
 
   return {
 
-    hasExtends: function(rules) {
-      return Boolean(rules.cssText.match(this.rx.EXTEND));
+    hasExtends: function(cssText) {
+      return Boolean(cssText.match(this.rx.EXTEND));
     },
 
-    transform: function(rules) {
-      return Polymer.StyleUtil.toCssText(rules, function(rule) {
+    transform: function(cssText) {
+      return Polymer.StyleUtil.toCssText(cssText, function(rule) {
         var map = this._mapRule(rule);
         if (map) {
           var m;
@@ -32,7 +33,7 @@
           }
         }
         rule.cssText = rule.cssText.replace(this.rx.EXTEND, '');
-      }.bind(this));
+      }.bind(this), true);
     },
 
     _mapRule: function(rule) {

diff --git a/src/lib/style-util.html b/src/lib/style-util.html
@@ -18,14 +18,14 @@
 
       MODULE_STYLES_SELECTOR: 'style, link[rel=import][type~=css]',
 
-      toCssText: function(rules, callback) {
+      toCssText: function(rules, callback, preserveProperties) {
         if (typeof rules === 'string') {
           rules = this.parser.parse(rules);
         } 
         if (callback) {
           this.forEachStyleRule(rules, callback);
         }
-        return this.parser.stringify(rules);
+        return this.parser.stringify(rules, preserveProperties);
       },
 
       forRulesInStyles: function(styles, callback) {

diff --git a/src/standard/styling.html b/src/standard/styling.html
@@ -11,6 +11,7 @@
 <link rel="import" href="../lib/style-util.html">
 <link rel="import" href="../lib/resolve-url.html">
 <link rel="import" href="../lib/style-transformer.html">
+<link rel="import" href="../lib/style-extends.html">
 <link rel="import" href="../lib/settings.html">
 
 <script>
@@ -22,6 +23,7 @@
 
     var styleUtil = Polymer.StyleUtil;
     var styleTransformer = Polymer.StyleTransformer;
+    var styleExtends = Polymer.StyleExtends;
 
     Polymer.Base._addFeature({
 
@@ -63,6 +65,10 @@
         }
         cssText += styleUtil.cssFromModule(this.is);
         if (cssText) {
+          // extends!!
+          if (styleExtends.hasExtends(cssText)) {
+            cssText = styleExtends.transform(cssText);
+          }
           var s = document.createElement('style');
           s.textContent = cssText;  
           styles.push(s);

diff --git a/test/runner.html b/test/runner.html
@@ -37,6 +37,7 @@
       'unit/resolveurl.html',
       'unit/css-parse.html',
       'unit/styling-scoped.html',
+      'unit/styling-extends.html',
       'unit/styling-remote.html',
       'unit/styling-cross-scope-var.html',
       'unit/styling-cross-scope-apply.html',

diff --git a/test/unit/styling-extend.css b/test/unit/styling-extend.css
diff --git a/test/unit/styling-extends.css b/test/unit/styling-extends.css
@@ -0,0 +1,3 @@
+#foo {
+  border: 10px solid steelblue;
+}
diff --git a/test/unit/styling-extend.html → test/unit/styling-extends.html b/test/unit/styling-extend.html → test/unit/styling-extends.html
@@ -14,70 +14,43 @@
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../../web-component-tester/browser.js"></script>
   <link rel="import" href="../../polymer.html">
-  <link rel="import" href="../../src/lib/css-extends.html">
 </head>
 <body class="desktop">
 
-  <style is="custom-style">
-    .desktop * {
-      --zowie: {
-        font-style: italic;
-      };
-
-      --small: 10px;
-
-      --more: 12px;
-    }
-  </style>
-
   <x-extended></x-extended>
 
   <dom-module id="x-extended">
-    <link rel="import" type="css" href="styling-extend.css">
+    <link rel="import" type="css" href="styling-extends.css">
     <style>
       #container {
-        @extends(.horizontal);
         border: 2px solid orange;
         padding: 10px;
       }
 
-      .bar, .zow {
-        background-color: orange;
-        @extends(.foo);
+      #bar, .zow {
+        margin: 10px;
+        @extends(#foo);
       }
 
-      .zot, .nug {
-        color: red;
-        @extends(.bar);
+      #zot, .nug {
+        padding: 10px;
+        @extends(#bar);
       }
 
-      .bigger {
-        border: calc(var(--small) + var(--more)) solid red;
-      }
 
     </style>
 
     <template>
     <div id="container">
-      <div class="foo">Foo</div>
-      <div class="bar">Bar</div>
-      <div class="zot">Zot</div>
-      <div class="nug">Nug</div>
-
-      <div class="bigger">border?</div>
+      <div id="foo">Foo</div>
+      <div id="bar">Bar</div>
+      <div id="zot">Zot</div>
     </div>
     </template>
     <script>
     HTMLImports.whenReady(function() {
       Polymer({
-        is: 'x-extended',
-
-        _transformStyles: function(styles, callback) {
-          var s = styles[0];
-          var rules = this._rulesForStyle(s)
-          Polymer.CssExtends.transform(rules);
-          return Polymer.Base._transformStyles.call(this, styles, callback);
-        }
+        is: 'x-extended'
       });
     });
     </script>
@@ -86,16 +59,21 @@
 <script>
   suite('styling-extends', function() {
 
-  function assertComputed(element, value) {
+  function assertComputed(element, value, property) {
     var computed = getComputedStyle(element);
-    assert.equal(computed['border-top-width'], value, 'computed style incorrect');
+    property = property || 'border-top-width';
+    assert.equal(computed[property], value, 'computed style incorrect for ' + property);
   }
 
   var e = document.querySelector('x-extended');
 
-  test('simple variables calculated correctly between scopes', function() {
-
-
+  test('styles extended', function() {
+    assertComputed(e.$.foo, '10px');
+    assertComputed(e.$.bar, '10px');
+    assertComputed(e.$.zot, '10px');
+    assertComputed(e.$.bar, '10px', 'margin-top');
+    assertComputed(e.$.zot, '10px', 'margin-top');
+    assertComputed(e.$.zot, '10px', 'padding-top');
   });
 
 });