Simplification, fix for BC breaks, reverting modified tests, more tests added

Author: nazar-pc

src/lib/css-parse.html

@@ -126,25 +126,7 @@
       // emit rule if there is cssText
       if (cssText) {
         if (node.selector) {
-          text += node.selector;
-          if (!Polymer.Settings.useNativeShadow && !node.parent.type) {
-            var selector = node.selector.split(' ');
-            var styleProperties = Polymer.StyleProperties;
-            // `styleProperties.XSCOPE_NAME` just to increase specificity
-            if (this._rx.tagName.test(node.selector)) {
-              if (!this._rx.scopedSelector.test(selector[0])) {
-                selector[0] += '.' + styleProperties.XSCOPE_NAME;
-                text += ', ' + selector.join(' ');
-              }
-            } else if (
-                selector[0].indexOf(this.HOST) === -1 &&
-                selector[0].indexOf(styleProperties.XSCOPE_NAME) === -1
-            ) {
-              selector[0] = '.' + styleProperties.XSCOPE_NAME + ' ' + selector[0];
-              text += ', ' + selector.join(' ');
-            }
-          }
-          text += ' ' + this.OPEN_BRACE + '\n';
+          text += node.selector + ' ' + this.OPEN_BRACE + '\n';
         }
         text += cssText;
         if (node.selector) {
@@ -194,16 +176,12 @@
       mixinApply: /@apply[\s]*\([^)]*?\)[\s]*(?:[;\n]|$)?/gim,
       varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,
       keyframesRule: /^@[^\s]*keyframes/,
-      multipleSpaces: /\s+/g,
-      tagName: /^[a-z]/i,
-      scopedSelector: /^([a-z\-]+)\.\1/i
+      multipleSpaces: /\s+/g
     },
 
     VAR_START: '--',
     MEDIA_START: '@media',
-    AT_START: '@',
-
-    HOST: ':host'
+    AT_START: '@'
 
   };
 

test/unit/css-parse.html

@@ -143,7 +143,7 @@
     });
 
     test('rules stringify', function() {
-      var orig = sanitizeCss(':host { background: red; } .foo .bar .baz, zonk[happy]:focus, .x-scope .foo .bar .baz, zonk[happy]:focus { font-family: sans-serif; font-size: 15px; } @-webkit-keyframes fill-unfill-rotate, .x-scope @-webkit-keyframes fill-unfill-rotate { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } to { transform: rotate(1080deg); } } @media (max-width: 400px), .x-scope @media (max-width: 400px) { div { margin-left: 0 !important; } }');
+      var orig = sanitizeCss(s.textContent);
       var result = sanitizeCss(css.stringify(tree));
       assert.equal(result, orig, 'unexpected stringified output');
     });
@@ -154,7 +154,7 @@
       assert.equal(t.rules[0].selector, '.stuff', 'unexpected rule selector');
       assert.equal(t.rules[0].cssText, 'background: red;', 'unexpected rule cssText');
       var result = sanitizeCss(css.stringify(t));
-      assert.equal(result, '.stuff, .x-scope .stuff { background: red; }', 'unexpected stringified output');
+      assert.equal(result, '.stuff { background: red; }', 'unexpected stringified output');
     });
 
     test('short escape sequences', function() {
@@ -166,7 +166,8 @@
       assert.equal(t.rules[3].selector, '.\\0c3333d-model');
       assert.equal(t.rules[4].selector, '.\\d33333d-model');
       assert.equal(t.rules[5].selector, '.\\e33333d-model');
-    });
+    });
+
     test('multiple consequent spaces in CSS selector', function() {
       var s4 = document.querySelector('#multiple-spaces');
       var t = css.parse(s4.textContent);

test/unit/styling-scoped-elements.html

@@ -303,13 +303,53 @@
   </script>
 </dom-module>
 
+<style is="custom-style">
+  :root {
+    --x-specificity-parent : {
+      border: 10px solid blue;
+    };
+    --x-specificity-nested : {
+      border: 3px solid red;
+    };
+  }
+</style>
+
+<dom-module id="x-specificity-parent">
+  <template>
+    <style>
+      /* TODO remove `:host` when https://github.com/Polymer/polymer/pull/2419 merged */
+      :host ::content > :not(template) {
+        @apply(--x-specificity-parent);
+      }
+    </style>
+    <content></content>
+  </template>
+  <script>
+    Polymer({is: 'x-specificity-parent', extends: 'div'});
+  </script>
+</dom-module>
+
+<dom-module id="x-specificity-nested">
+  <template>
+    <style>
+      :host {
+        @apply(--x-specificity-nested);
+      }
+    </style>
+  </template>
+  <script>
+    Polymer({is: 'x-specificity-nested', extends: 'div'});
+  </script>
+</dom-module>
+
 <style is="custom-style">
   :root {
     --x-overriding : {
       border-top: 1px solid red;
     }
   }
 </style>
+
 <dom-module id="x-overriding">
   <template>
     <style>

test/unit/styling-scoped.html

@@ -45,6 +45,9 @@
 
   <x-specificity></x-specificity>
   <x-specificity class="bar"></x-specificity>
+  <div is="x-specificity-parent">
+    <div is="x-specificity-nested"></div>
+  </div>
   <x-overriding></x-overriding>
 
 <script>
@@ -205,7 +208,7 @@
         var s$ = document.head.querySelectorAll('style[scope]');
         var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button', 'x-mixed-case',
           'x-mixed-case-button', 'x-dynamic-scope', 'x-specificity', 'x-overriding',
-          'x-overriding-0'];
+          'x-overriding-0', 'x-specificity-parent-0', 'x-specificity-nested-0'];
         var actual = [];
         for (var i=0; i<s$.length; i++) {
           actual.push(s$[i].getAttribute('scope'));
@@ -253,6 +256,10 @@
         assertComputed(document.querySelector('x-specificity.bar'), '2px');
       });
 
+      test('specificity of ::content > :not(template) selector', function() {
+        assertComputed(document.querySelector('[is=x-specificity-nested]'), '10px');
+      });
+
       test('overwriting mixin properties', function() {
         var root = document.querySelector('x-overriding');
         assertComputed(root.querySelector('.red'), '1px');