Skip to content

Commit

Permalink
fix(auto-prefixer): resolve perf impacts as reported by LightHouse (#283
Browse files Browse the repository at this point in the history 
)

* 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
  • Loading branch information
@ThomasBurleson @tinayuangao
ThomasBurleson authored and tinayuangao committed May 25, 2017
1 parent f5558de commit bc0c900
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 188 deletions.
8 changes: 6 additions & 2 deletions src/lib/flexbox/api/flex.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,7 @@ describe('flex directive', () => {
`)
.not.toHaveCssStyle({
'flex-direction': 'row',
'flex': '1 1 100%',
'max-height': '37%',
});
});
Expand All @@ -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%',
});
});
Expand All @@ -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%'
});
});
Expand Down
122 changes: 42 additions & 80 deletions src/lib/utils/auto-prefixer.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

});

/**
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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;


}
}
Loading

0 comments on commit bc0c900

Please sign in to comment.