Fix parsing of minimized css output

Polymer · Dec 3, 2015 · d458690 · d458690
1 parent 34bf229
commit d458690
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/src/lib/css-parse.html b/src/lib/css-parse.html
@@ -171,7 +171,7 @@
     _rx: {
       comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
       port: /@import[^;]*;/gim,
-      customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?(?:[;\n]|$)/gim,
+      customProp: /(?:^[^;\-\s}]+)?--[^;{]*?:[^{};]*?(?:[;\n]|$)/gim,
       mixinProp: /(?:^|[\s;])?--[^;{]*?:[^{;]*?{[^}]*?}(?:[;\n]|$)?/gim,
       mixinApply: /@apply[\s]*\([^)]*?\)[\s]*(?:[;\n]|$)?/gim,
       varApply: /[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,

diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
@@ -235,6 +235,9 @@
           --variable-property-after-property: 3px;
           --variable-property-after-assignment: 4px;
           --variable-property-before-assignment: 5px;
+          --variable-into-first-variable: 9px;
+          --variable-into-second-variable: 10px;
+          --variable-into-third-variable: 11px;
         }
       </style>
       <child-variable-with-var id="child"></child-variable-with-var>
@@ -251,7 +254,8 @@
           --variable-between-properties: 6px;
           background-color: var(--variable-property-before-property); padding-top: var(--variable-property-after-property);
           --variable-assignment-before-property: 7px; padding-bottom: var(--variable-property-after-assignment);
-          padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px
+          padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px;
+          top: 12px;--variable-from-other-variable: var(--variable-into-first-variable);--variable-from-another-variable: var(--variable-into-second-variable); --variable-from-last-variable: var(--variable-into-third-variable);
         }
       </style>
       <child-of-child-with-var id="child"></child-of-child-with-var>
@@ -266,6 +270,9 @@
           padding-right: var(--variable-between-properties);
           margin-left: var(--variable-assignment-before-property);
           margin-right: var(--variable-assignment-after-property);
+          bottom: var(--variable-from-other-variable);
+          left: var(--variable-from-another-variable);
+          right: var(--variable-from-last-variable);
         }
       </style>
       Text
@@ -468,11 +475,16 @@
         assertComputed(el, '7px', 'margin-left');
         assertComputed(el, '8px', 'margin-right');
         assertComputed(el, 'rgb(255, 255, 0)', 'background-color');
+        assertComputed(el, '9px', 'bottom');
+        assertComputed(el, '10px', 'left');
+        assertComputed(el, '11px', 'right');
+        assertComputed(el, '12px', 'top');
 
         // Because FireFox and Chrome parse font-family differently...
         var computed = getComputedStyle(el);
         assert.equal(computed['font-family'].replace(/['"]+/g, ''), 'Varela font');
       });
+
       test('BEM-like CSS selectors under media queries', function() {
         assertComputed(document.querySelector('.foo--bar'), '3px');
       });

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -94,7 +94,7 @@
       }
 
       #gc4 {
-        --grand-child-scope-var: 
+        --grand-child-scope-var:
         var(--gc4-scope);
       }
     </style>
@@ -286,7 +286,7 @@
     });
     </script>
   </dom-module>
- 
+
   <dom-module id="x-scope">
     <style>
       :host {
@@ -439,14 +439,14 @@
     }
   </style>
   <template>
-    
+
   </template>
   <script>
   HTMLImports.whenReady(function() {
     Polymer({
       is: 'x-inside'
     });
-  });  
+  });
   </script>
 </dom-module>
 
@@ -679,7 +679,7 @@
   // test('var values can be overridden by subsequent concrete properties', function() {
   //   assertComputed(styled.$.overridesConcrete, '4px');
   // });
-  
+
 });
 
 </script>