fix(auto-prefixer): resolve perf impacts as reported by LightHouse (#283)

* Updated based on output from https://autoprefixer.github.io/
* Removed Mozilla Firefox prefixes as not required for the evergreen browser
* Remove support for IE10 prefixes (`-ms-`); as only IE 11 and Edge are supported
* Remove support for `-webkit-box` required for OLD iOS , Safari 3, BB7
* Fix value transforms for flex-related keys

Fixes #282

Author: ThomasBurleson

src/lib/flexbox/api/flex.spec.ts

@@ -305,6 +305,7 @@ describe('flex directive', () => {
         `)
             .not.toHaveCssStyle({
           'flex-direction': 'row',
+          'flex': '1 1 100%',
           'max-height': '37%',
         });
       });
@@ -318,18 +319,21 @@ describe('flex directive', () => {
 
         expectDomForQuery(template, "[fxFlex]")
             .toHaveCssStyle({
+              'flex': '1 1 100%',
               'max-height': '37%',
             });
       });
 
       it('should set max-width for `fxFlex="<%val>"`', () => {
         expectDOMFrom(`<div fxFlex="37%"></div>`).toHaveCssStyle({
+          'flex': '1 1 100%',
           'max-width': '37%',
         });
       });
 
       it('should set max-width for `fxFlex="2%"` usage', () => {
         expectDOMFrom(`<div fxFlex="2%"></div>`).toHaveCssStyle({
+          'flex': '1 1 100%',
           'max-width': '2%',
         });
       });
@@ -351,15 +355,15 @@ describe('flex directive', () => {
       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveCssStyle({
-        'flex': '1 1 50%',
+        'flex': '1 1 100%',
         'max-width': '50%'
       });
 
       matchMedia.activate('sm', true);
       fixture.detectChanges();
 
       expectNativeEl(fixture).toHaveCssStyle({
-        'flex': '1 1 33%',
+        'flex': '1 1 100%',
         'max-width': '33%'
       });
     });

src/lib/utils/auto-prefixer.spec.ts

@@ -25,10 +25,14 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for display', () => {
       let input = {"display": "flex"};
       let actual = applyCssPrefixes(input);
+
       expect(Array.isArray(actual['display'])).toBeTruthy();
-      expect(actual['display'][0]).toEqual('-webkit-box');
-      expect(actual['display'][4]).toEqual('flex');
+
+      // `display:flex` should be last
+      expect(actual['display'][0]).toEqual('-webkit-flex');
+      expect(actual['display'][1]).toEqual('flex');
     });
+
   });
 
   /**
@@ -39,8 +43,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for single values', () => {
       let input = {"flex": "100"};
       let expected = extendObject({}, input, {
-        '-ms-flex': "100",
-        '-webkit-box-flex': "100"
+        '-webkit-flex': "100"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex", actual, expected);
@@ -49,8 +52,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for multiple values', () => {
       let input = {"flex": "2 1 50%"};
       let expected = extendObject({}, input, {
-        '-ms-flex': "2 1 50%",
-        '-webkit-box-flex': "2"
+        '-webkit-flex': "2 1 50%"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex", actual, expected);
@@ -66,9 +68,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for value == "row"', () => {
       let input = {"flex-direction": "row"};
       let expected = extendObject({}, input, {
-        '-ms-flex-direction': "row",
-        '-webkit-box-orient': "horizontal",
-        '-webkit-box-direction': "normal"
+        '-webkit-flex-direction': "row"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-direction", actual, expected);
@@ -77,9 +77,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for value == "row-reverse"', () => {
       let input = {"flex-direction": "row-reverse"};
       let expected = extendObject({}, input, {
-        '-ms-flex-direction': "row-reverse",
-        '-webkit-box-orient': "horizontal",
-        '-webkit-box-direction': "reverse"
+        '-webkit-flex-direction': "row-reverse"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-direction", actual, expected);
@@ -88,9 +86,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for value == "column"', () => {
       let input = {"flex-direction": "column"};
       let expected = extendObject({}, input, {
-        '-ms-flex-direction': "column",
-        '-webkit-box-orient': "vertical",
-        '-webkit-box-direction': "normal"
+        '-webkit-flex-direction': "column"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-direction", actual, expected);
@@ -99,9 +95,7 @@ describe('auto-prefixer for ', () => {
     it('should apply prefixes for value == "column-reverse"', () => {
       let input = {"flex-direction": "column-reverse"};
       let expected = extendObject({}, input, {
-        '-ms-flex-direction': "column-reverse",
-        '-webkit-box-orient': "vertical",
-        '-webkit-box-direction': "reverse"
+        '-webkit-flex-direction': "column-reverse"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-direction", actual, expected);
@@ -117,7 +111,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"flex-wrap": "nowrap"};
       let expected = extendObject({}, input, {
-        "-ms-flex-wrap": "nowrap"
+        '-webkit-flex-wrap' : 'nowrap'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("flex-wrap", actual, expected);
@@ -132,8 +126,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"order": "1"};
       let expected = extendObject({}, input, {
-        "-ms-flex-order": "1",
-        "-webkit-box-ordinal-group": "2"
+        '-webkit-order' : '1'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("order", actual, expected);
@@ -143,8 +136,7 @@ describe('auto-prefixer for ', () => {
       let input = {"order": "invalid"};
       let expected = extendObject({}, input, {
         "order": "0",
-        "-ms-flex-order": "0",
-        "-webkit-box-ordinal-group": "1"
+        '-webkit-order' : "0"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("order", actual, expected);
@@ -161,8 +153,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"justify-content": "flex-start"};
       let expected = extendObject({}, input, {
-        "-ms-flex-pack": "start",
-        "-webkit-box-pack": "start"
+        "-webkit-justify-content": "flex-start"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("justify-content", actual, expected);
@@ -171,8 +162,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"justify-content": "flex-end"};
       let expected = extendObject({}, input, {
-        "-ms-flex-pack": "end",
-        "-webkit-box-pack": "end"
+        "-webkit-justify-content": "flex-end"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("justify-content", actual, expected);
@@ -181,8 +171,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"justify-content": "center"};
       let expected = extendObject({}, input, {
-        "-ms-flex-pack": "center",
-        "-webkit-box-pack": "center"
+        "-webkit-justify-content": "center"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("justify-content", actual, expected);
@@ -197,8 +186,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-items": "flex-start"};
       let expected = extendObject({}, input, {
-        "-ms-flex-align": "start",
-        "-webkit-box-align": "start"
+        "-webkit-align-items": "flex-start"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-items", actual, expected);
@@ -207,8 +195,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-items": "flex-end"};
       let expected = extendObject({}, input, {
-        "-ms-flex-align": "end",
-        "-webkit-box-align": "end"
+        "-webkit-align-items": "flex-end"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-items", actual, expected);
@@ -217,8 +204,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-items": "center"};
       let expected = extendObject({}, input, {
-        "-ms-flex-align": "center",
-        "-webkit-box-align": "center"
+        "-webkit-align-items": "center"
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-items", actual, expected);
@@ -236,7 +222,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-self": "flex-start"};
       let expected = extendObject({}, input, {
-        "-ms-flex-item-align": "start"
+        '-webkit-align-self' : 'flex-start'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-self", actual, expected);
@@ -245,7 +231,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-self": "flex-end"};
       let expected = extendObject({}, input, {
-        "-ms-flex-item-align": "end"
+        '-webkit-align-self' : 'flex-end'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-self", actual, expected);
@@ -254,7 +240,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-self": "center"};
       let expected = extendObject({}, input, {
-        "-ms-flex-item-align": "center"
+        '-webkit-align-self' : 'center'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-self", actual, expected);
@@ -270,7 +256,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-content": "flex-start"};
       let expected = extendObject({}, input, {
-        "-ms-flex-line-pack": "start"
+        '-webkit-align-content': 'flex-start'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-content", actual, expected);
@@ -279,7 +265,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-content": "flex-end"};
       let expected = extendObject({}, input, {
-        "-ms-flex-line-pack": "end"
+        '-webkit-align-content' : 'flex-end'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-content", actual, expected);
@@ -288,7 +274,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-content": "center"};
       let expected = extendObject({}, input, {
-        "-ms-flex-line-pack": "center"
+        '-webkit-align-content': 'center'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-content", actual, expected);
@@ -297,7 +283,7 @@ describe('auto-prefixer for ', () => {
     it('should apply a prefix', () => {
       let input = {"align-content": "stretch"};
       let expected = extendObject({}, input, {
-        "-ms-flex-line-pack": "stretch"
+        '-webkit-align-content': 'stretch'
       });
       let actual = applyCssPrefixes(input);
       checkCssPrefix("align-content", actual, expected);
@@ -310,50 +296,26 @@ describe('auto-prefixer for ', () => {
 /**
  * Internal checks to `expect().toEqual()`
  */
-function checkCssPrefix(iKey, actual, expected) {
-  expect(actual[iKey]).toEqual(expected[iKey]);
-  switch (iKey) {
+function checkCssPrefix(key, actual, expected) {
+  expect(actual[key]).toEqual(expected[key]);
+  switch (key) {
     case 'display':
-      expect(actual['display']).toEqual(expected[iKey]);
-      break;
-    case 'flex':
-      expect(actual['-ms-flex']).toEqual(expected['-ms-flex']);
-      expect(actual['-webkit-box-flex']).toEqual(expected['-webkit-box-flex'].split(" ")[0]);
-      break;
-
-    case 'flex-direction':
-      expect(actual['-ms-flex-direction']).toEqual(expected['-ms-flex-direction']);
-      expect(actual['-webkit-box-orient']).toEqual(expected['-webkit-box-orient']);
-      expect(actual['-webkit-box-direction']).toEqual(expected['-webkit-box-direction']);
-      break;
-
-    case 'flex-wrap':
-      expect(actual['-ms-flex-wrap']).toEqual(expected['-ms-flex-wrap']);
-      break;
-
-    case 'order':
-      expect(actual['-ms-flex-order']).toEqual(expected['-ms-flex-order']);
-      expect(actual['-webkit-box-ordinal-group']).toEqual(expected['-webkit-box-ordinal-group']);
-      break;
-
-    case 'justify-content':
-      expect(actual['-ms-flex-pack']).toEqual(expected['-ms-flex-pack']);
-      expect(actual['-webkit-box-pack']).toEqual(expected['-webkit-box-pack']);
+      expect(actual['display']).toEqual(expected[key]);
       break;
 
     case 'align-items':
-      expect(actual['-ms-flex-align']).toEqual(expected['-ms-flex-align']);
-      expect(actual['-webkit-box-align']).toEqual(expected['-webkit-box-align']);
-      break;
-
     case 'align-self':
-      expect(actual['-ms-flex-item-align']).toEqual(expected['-ms-flex-item-align']);
-      break;
-
     case 'align-content':
-      expect(actual['-ms-flex-line-pack']).toEqual(expected['-ms-flex-line-pack']);
+    case 'flex':
+    case 'flex-direction':
+    case 'flex-wrap':
+    case 'flex-grow':
+    case 'flex-shrink':
+    case 'flex-basis':
+    case 'flex-flow':
+    case 'justify-content':
+    case 'order':
+      expect(actual[key]).toEqual(expected['-webkit-' + key]);
       break;
-
-
   }
 }