Fixes #1938: make host selector not tripped up by id, attr, or pseudo…

… properties

Fixes #1874, #1761: maintain static declarations within declarations that contain custom properties
Fixes #1927: make custom property parser able to see property endings of ; or \n or end token.

src/lib/css-parse.html

@@ -154,10 +154,10 @@
   var rx = {
     comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
     port: /@import[^;]*;/gim,
-    customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?;/gim,
-    mixinProp: /(?:^|[\s;])--[^;{]*?:[^{;]*?{[^}]*?};?/gim,
-    mixinApply: /@apply[\s]*\([^)]*?\)[\s]*;/gim,
-    varApply: /[^;:]*?:[^;]*var[^;]*;/gim,
+    customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?(?:[;\n]|$)/gim,
+    mixinProp: /(?:^|[\s;])--[^;{]*?:[^{;]*?{[^}]*?}(?:[;\n]|$)?/gim,
+    mixinApply: /@apply[\s]*\([^)]*?\)[\s]*(?:[;\n]|$)?/gim,
+    varApply: /[^;:]*?:[^;]*var[^;]*(?:[;\n]|$)?/gim,
     keyframesRule: /^@[^\s]*keyframes/,
   };
 

src/lib/style-properties.html

@@ -84,14 +84,13 @@
         // but not production, so strip out {...}
         cssText = cssText.replace(this.rx.BRACKETED, '')
           .replace(this.rx.VAR_ASSIGN, '');
-        var parts = cssText.split(';');
-        for (var i=0, p; i<parts.length; i++) {
-          p = parts[i];
-          if (p.match(this.rx.MIXIN_MATCH) || p.match(this.rx.VAR_MATCH)) {
-            customCssText += p + ';\n';
-          }
+        // If any custom properties are used, then return the entire
+        // declaration. This avoids some specificity issues with splitting
+        // delcarations into separate styles.
+        if (cssText.match(this.rx.MIXIN_MATCH) || 
+          cssText.match(this.rx.VAR_MATCH)) {
+          return cssText;
         }
-        return customCssText;
       },
 
       collectPropertiesInCssText: function(cssText, props) {
@@ -344,8 +343,8 @@
       },
 
       rx: {
-        VAR_ASSIGN: /(?:^|;\s*)(--[^\:;]*?):\s*?(?:([^;{]*?)|{([^}]*)})(?=;)/gim,
-        MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\);?/im, 
+        VAR_ASSIGN: /(?:^|[;\n}]\s*)(--[^\:;]*?):\s*?(?:([^;{]*?)|{([^}]*)})(?:(?=[;\n}])|$)/gim,
+        MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\)[;\n}]?/im, 
         // note, this supports:
         // var(--a)
         // var(--a, --b)
@@ -355,7 +354,7 @@
         VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gim,
         IS_VAR: /^--/,
         BRACKETED: /\{[^}]*\}/g,
-        HOST_PREFIX: '(?:^|[^.])',
+        HOST_PREFIX: '(?:^|[^.#[:])',
         HOST_SUFFIX: '($|[.:[\\s>+~])'
       },
 

test/unit/styling-cross-scope-apply.html

@@ -19,6 +19,32 @@
 
   <x-scope></x-scope>
 
+  <dom-module id="story-card">
+
+    <style>
+      :host {
+        display: block;
+      }
+
+      #story-card .story-content {
+        font-family: 'Roboto', sans-serif;
+        font-size: 1.2em;
+        @apply(--story-content);
+      }
+    </style>
+
+    <template>
+      <div id="story-card">
+        <div class="story-content" id="content">Content</div>
+      </div>
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({is: 'story-card'});
+    });
+    </script>
+  </dom-module>
+
   <dom-module id="x-child-scope">
     <style>
       :host {
@@ -46,13 +72,21 @@
       #mixin4 {
         @apply(--mixin4);
       }
+
+      #mixin6 {
+        @apply(--mixin6)
+      }
+
+      #mixin7 {@apply(--mixin7)}
     </style>
 
     <template>
       <div id="mixin1">mixin1</div>
       <div id="mixin2">mixin2</div>
       <div id="mixin3">mixin3</div>
       <div id="mixin4">mixin4</div>
+      <div id="mixin6">mixin6</div>
+      <div id="mixin7">mixin7</div>
     </template>
     <script>
     HTMLImports.whenReady(function() {
@@ -67,6 +101,10 @@
         display: block;
         padding: 8px;
 
+        --override-me: {
+          border: 11px solid black;
+        };
+
         --mixin1: {
           border: 1px solid black;
         };
@@ -96,7 +134,14 @@
         --mixin5: {
           border: calc(var(--c1) + var(--c2)) solid orange;
         };
-      }
+
+        --mixin6: {
+          border: 16px solid orange;
+        }
+
+        --mixin7: {
+          border: 17px solid navy;
+        }}
 
       #mixin1 {
         @apply(--mixin1);
@@ -124,6 +169,17 @@
         padding: 10px;
       }
 
+      #card {
+        --story-content: {
+          border: 11px solid orange;
+        };
+      }
+
+      #override {
+        @apply(--override-me);
+        border: 19px solid steelblue;
+      }
+
     </style>
 
     <template>
@@ -134,6 +190,8 @@
       <div id="mixin5">mixin5</div>
       <hr>
       <x-child-scope id="child"></x-child-scope>
+      <story-card id="card"></story-card>
+      <div id="override">override</div>
     </template>
     <script>
     HTMLImports.whenReady(function() {
@@ -199,6 +257,19 @@
   test('calc can be used in mixins', function() {
     assertComputed(styled.$.mixin5, '15px');
   });
+
+  test('mixins work with selectors that contain element name', function() {
+    assertComputed(styled.$.card.$.content, '11px');
+  });
+
+  test('mixins with trailing new line or } apply', function() {
+    assertComputed(styled.$.child.$.mixin6, '16px');
+    assertComputed(styled.$.child.$.mixin7, '17px');
+  });
+
+  test('mixin values can be overridden by subsequent concrete properties', function() {
+    assertComputed(styled.$.override, '19px');
+  });
 });
 
 </script>

test/unit/styling-cross-scope-var.html

@@ -302,7 +302,10 @@
 
         --button-border: 16px solid tomato;
         --after: 17px solid brown;
-      }
+
+        --end-term: 19px solid blue}
+
+      :root{--ws-term: 18px solid orange}
 
       #me {
         border: var(--scope-var);
@@ -350,6 +353,11 @@
         --grand-child-scope-var: 9px solid orange;
       }
 
+      #overridesConcrete {
+        border: var(--scope-var);
+        border: 4px solid steelblue;
+      }
+
       #calc {
         border: solid red;
         border-width: calc(var(--a) + var(--b));
@@ -372,6 +380,12 @@
         content: 'after';
         border: var(--after);
       }
+
+      #wsTerm {
+        border: var(--ws-term)
+      }
+
+      #endTerm {border: var(--end-term)}
     </style>
 
     <template>
@@ -382,6 +396,7 @@
       <x-overrides id="overrides1b"></x-overrides>
       <x-overrides2 id="overrides2"></x-overrides2>
       <x-overrides3 id="overrides3"></x-overrides3>
+      <div id="overridesConcrete">override concrete</div>
       <button id="button" is="x-button"></button>
       <div id="default1">default</div>
       <div id="default2">var default</div>
@@ -397,6 +412,8 @@
       <x-has-if id="iffy"></x-has-if>
       <div id="after"></div>
       <x-dynamic id="dynamic"></x-dynamic>
+      <div id="wsTerm">new line var</div>
+      <div id="endTerm">end var</div>
     </template>
     <script>
     HTMLImports.whenReady(function() {
@@ -593,6 +610,15 @@
     assertComputed(styled.$.defaultElement1, '22px');
     assertComputed(styled.$.defaultElement2, '23px');
   });
+
+  test('vars with trailing new line or } apply', function() {
+    assertComputed(styled.$.wsTerm, '18px');
+    assertComputed(styled.$.endTerm, '19px');
+  });
+
+  test('var values can be overridden by subsequent concrete properties', function() {
+    assertComputed(styled.$.overridesConcrete, '4px');
+  });
 
 });