Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 5615983

Browse files
ThomasBurlesonThomasBurleson
committed
fix(auto-prefixer): resolve perf impacts as reported by LightHouse
* 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
1 parent beb5ed0 commit 5615983

File tree

3 files changed

+72
-184
lines changed

3 files changed

+72
-184
lines changed

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,7 @@ describe('flex directive', () => {
303303
`)
304304
.not.toHaveCssStyle({
305305
'flex-direction': 'row',
306+
'flex': '1 1 100%',
306307
'max-height': '37%',
307308
});
308309
});
@@ -316,18 +317,21 @@ describe('flex directive', () => {
316317

317318
expectDomForQuery(template, "[fxFlex]")
318319
.toHaveCssStyle({
320+
'flex': '1 1 100%',
319321
'max-height': '37%',
320322
});
321323
});
322324

323325
it('should set max-width for `fxFlex="<%val>"`', () => {
324326
expectDOMFrom(`<div fxFlex="37%"></div>`).toHaveCssStyle({
327+
'flex': '1 1 100%',
325328
'max-width': '37%',
326329
});
327330
});
328331

329332
it('should set max-width for `fxFlex="2%"` usage', () => {
330333
expectDOMFrom(`<div fxFlex="2%"></div>`).toHaveCssStyle({
334+
'flex': '1 1 100%',
331335
'max-width': '2%',
332336
});
333337
});
@@ -349,15 +353,15 @@ describe('flex directive', () => {
349353
fixture.detectChanges();
350354

351355
expectNativeEl(fixture).toHaveCssStyle({
352-
'flex': '1 1 50%',
356+
'flex': '1 1 100%',
353357
'max-width': '50%'
354358
});
355359

356360
matchMedia.activate('sm', true);
357361
fixture.detectChanges();
358362

359363
expectNativeEl(fixture).toHaveCssStyle({
360-
'flex': '1 1 33%',
364+
'flex': '1 1 100%',
361365
'max-width': '33%'
362366
});
363367
});

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

+41-79
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,14 @@ describe('auto-prefixer for ', () => {
2525
it('should apply prefixes for display', () => {
2626
let input = {"display": "flex"};
2727
let actual = applyCssPrefixes(input);
28+
2829
expect(Array.isArray(actual['display'])).toBeTruthy();
29-
expect(actual['display'][0]).toEqual('-webkit-box');
30-
expect(actual['display'][4]).toEqual('flex');
30+
31+
// `display:flex` should be last
32+
expect(actual['display'][0]).toEqual('-webkit-flex');
33+
expect(actual['display'][1]).toEqual('flex');
3134
});
35+
3236
});
3337

3438
/**
@@ -39,8 +43,7 @@ describe('auto-prefixer for ', () => {
3943
it('should apply prefixes for single values', () => {
4044
let input = {"flex": "100"};
4145
let expected = extendObject({}, input, {
42-
'-ms-flex': "100",
43-
'-webkit-box-flex': "100"
46+
'-webkit-flex': "100"
4447
});
4548
let actual = applyCssPrefixes(input);
4649
checkCssPrefix("flex", actual, expected);
@@ -49,8 +52,7 @@ describe('auto-prefixer for ', () => {
4952
it('should apply prefixes for multiple values', () => {
5053
let input = {"flex": "2 1 50%"};
5154
let expected = extendObject({}, input, {
52-
'-ms-flex': "2 1 50%",
53-
'-webkit-box-flex': "2"
55+
'-webkit-flex': "2 1 50%"
5456
});
5557
let actual = applyCssPrefixes(input);
5658
checkCssPrefix("flex", actual, expected);
@@ -66,9 +68,7 @@ describe('auto-prefixer for ', () => {
6668
it('should apply prefixes for value == "row"', () => {
6769
let input = {"flex-direction": "row"};
6870
let expected = extendObject({}, input, {
69-
'-ms-flex-direction': "row",
70-
'-webkit-box-orient': "horizontal",
71-
'-webkit-box-direction': "normal"
71+
'-webkit-flex-direction': "row"
7272
});
7373
let actual = applyCssPrefixes(input);
7474
checkCssPrefix("flex-direction", actual, expected);
@@ -77,9 +77,7 @@ describe('auto-prefixer for ', () => {
7777
it('should apply prefixes for value == "row-reverse"', () => {
7878
let input = {"flex-direction": "row-reverse"};
7979
let expected = extendObject({}, input, {
80-
'-ms-flex-direction': "row-reverse",
81-
'-webkit-box-orient': "horizontal",
82-
'-webkit-box-direction': "reverse"
80+
'-webkit-flex-direction': "row-reverse"
8381
});
8482
let actual = applyCssPrefixes(input);
8583
checkCssPrefix("flex-direction", actual, expected);
@@ -88,9 +86,7 @@ describe('auto-prefixer for ', () => {
8886
it('should apply prefixes for value == "column"', () => {
8987
let input = {"flex-direction": "column"};
9088
let expected = extendObject({}, input, {
91-
'-ms-flex-direction': "column",
92-
'-webkit-box-orient': "vertical",
93-
'-webkit-box-direction': "normal"
89+
'-webkit-flex-direction': "column"
9490
});
9591
let actual = applyCssPrefixes(input);
9692
checkCssPrefix("flex-direction", actual, expected);
@@ -99,9 +95,7 @@ describe('auto-prefixer for ', () => {
9995
it('should apply prefixes for value == "column-reverse"', () => {
10096
let input = {"flex-direction": "column-reverse"};
10197
let expected = extendObject({}, input, {
102-
'-ms-flex-direction': "column-reverse",
103-
'-webkit-box-orient': "vertical",
104-
'-webkit-box-direction': "reverse"
98+
'-webkit-flex-direction': "column-reverse"
10599
});
106100
let actual = applyCssPrefixes(input);
107101
checkCssPrefix("flex-direction", actual, expected);
@@ -117,7 +111,7 @@ describe('auto-prefixer for ', () => {
117111
it('should apply a prefix', () => {
118112
let input = {"flex-wrap": "nowrap"};
119113
let expected = extendObject({}, input, {
120-
"-ms-flex-wrap": "nowrap"
114+
'-webkit-flex-wrap' : 'nowrap'
121115
});
122116
let actual = applyCssPrefixes(input);
123117
checkCssPrefix("flex-wrap", actual, expected);
@@ -131,20 +125,15 @@ describe('auto-prefixer for ', () => {
131125

132126
it('should apply a prefix', () => {
133127
let input = {"order": "1"};
134-
let expected = extendObject({}, input, {
135-
"-ms-flex-order": "1",
136-
"-webkit-box-ordinal-group": "2"
137-
});
128+
let expected = extendObject({}, input);
138129
let actual = applyCssPrefixes(input);
139130
checkCssPrefix("order", actual, expected);
140131
});
141132

142133
it('should apply a prefix', () => {
143134
let input = {"order": "invalid"};
144135
let expected = extendObject({}, input, {
145-
"order": "0",
146-
"-ms-flex-order": "0",
147-
"-webkit-box-ordinal-group": "1"
136+
"order": "0"
148137
});
149138
let actual = applyCssPrefixes(input);
150139
checkCssPrefix("order", actual, expected);
@@ -161,8 +150,7 @@ describe('auto-prefixer for ', () => {
161150
it('should apply a prefix', () => {
162151
let input = {"justify-content": "flex-start"};
163152
let expected = extendObject({}, input, {
164-
"-ms-flex-pack": "start",
165-
"-webkit-box-pack": "start"
153+
"-webkit-justify-content": "flex-start"
166154
});
167155
let actual = applyCssPrefixes(input);
168156
checkCssPrefix("justify-content", actual, expected);
@@ -171,8 +159,7 @@ describe('auto-prefixer for ', () => {
171159
it('should apply a prefix', () => {
172160
let input = {"justify-content": "flex-end"};
173161
let expected = extendObject({}, input, {
174-
"-ms-flex-pack": "end",
175-
"-webkit-box-pack": "end"
162+
"-webkit-justify-content": "flex-end"
176163
});
177164
let actual = applyCssPrefixes(input);
178165
checkCssPrefix("justify-content", actual, expected);
@@ -181,8 +168,7 @@ describe('auto-prefixer for ', () => {
181168
it('should apply a prefix', () => {
182169
let input = {"justify-content": "center"};
183170
let expected = extendObject({}, input, {
184-
"-ms-flex-pack": "center",
185-
"-webkit-box-pack": "center"
171+
"-webkit-justify-content": "center"
186172
});
187173
let actual = applyCssPrefixes(input);
188174
checkCssPrefix("justify-content", actual, expected);
@@ -197,8 +183,7 @@ describe('auto-prefixer for ', () => {
197183
it('should apply a prefix', () => {
198184
let input = {"align-items": "flex-start"};
199185
let expected = extendObject({}, input, {
200-
"-ms-flex-align": "start",
201-
"-webkit-box-align": "start"
186+
"-webkit-align-items": "flex-start"
202187
});
203188
let actual = applyCssPrefixes(input);
204189
checkCssPrefix("align-items", actual, expected);
@@ -207,8 +192,7 @@ describe('auto-prefixer for ', () => {
207192
it('should apply a prefix', () => {
208193
let input = {"align-items": "flex-end"};
209194
let expected = extendObject({}, input, {
210-
"-ms-flex-align": "end",
211-
"-webkit-box-align": "end"
195+
"-webkit-align-items": "flex-end"
212196
});
213197
let actual = applyCssPrefixes(input);
214198
checkCssPrefix("align-items", actual, expected);
@@ -217,8 +201,7 @@ describe('auto-prefixer for ', () => {
217201
it('should apply a prefix', () => {
218202
let input = {"align-items": "center"};
219203
let expected = extendObject({}, input, {
220-
"-ms-flex-align": "center",
221-
"-webkit-box-align": "center"
204+
"-webkit-align-items": "center"
222205
});
223206
let actual = applyCssPrefixes(input);
224207
checkCssPrefix("align-items", actual, expected);
@@ -236,7 +219,7 @@ describe('auto-prefixer for ', () => {
236219
it('should apply a prefix', () => {
237220
let input = {"align-self": "flex-start"};
238221
let expected = extendObject({}, input, {
239-
"-ms-flex-item-align": "start"
222+
'-webkit-align-self' : 'flex-start'
240223
});
241224
let actual = applyCssPrefixes(input);
242225
checkCssPrefix("align-self", actual, expected);
@@ -245,7 +228,7 @@ describe('auto-prefixer for ', () => {
245228
it('should apply a prefix', () => {
246229
let input = {"align-self": "flex-end"};
247230
let expected = extendObject({}, input, {
248-
"-ms-flex-item-align": "end"
231+
'-webkit-align-self' : 'flex-end'
249232
});
250233
let actual = applyCssPrefixes(input);
251234
checkCssPrefix("align-self", actual, expected);
@@ -254,7 +237,7 @@ describe('auto-prefixer for ', () => {
254237
it('should apply a prefix', () => {
255238
let input = {"align-self": "center"};
256239
let expected = extendObject({}, input, {
257-
"-ms-flex-item-align": "center"
240+
'-webkit-align-self' : 'center'
258241
});
259242
let actual = applyCssPrefixes(input);
260243
checkCssPrefix("align-self", actual, expected);
@@ -270,7 +253,7 @@ describe('auto-prefixer for ', () => {
270253
it('should apply a prefix', () => {
271254
let input = {"align-content": "flex-start"};
272255
let expected = extendObject({}, input, {
273-
"-ms-flex-line-pack": "start"
256+
'-webkit-align-content': 'flex-start'
274257
});
275258
let actual = applyCssPrefixes(input);
276259
checkCssPrefix("align-content", actual, expected);
@@ -279,7 +262,7 @@ describe('auto-prefixer for ', () => {
279262
it('should apply a prefix', () => {
280263
let input = {"align-content": "flex-end"};
281264
let expected = extendObject({}, input, {
282-
"-ms-flex-line-pack": "end"
265+
'-webkit-align-content' : 'flex-end'
283266
});
284267
let actual = applyCssPrefixes(input);
285268
checkCssPrefix("align-content", actual, expected);
@@ -288,7 +271,7 @@ describe('auto-prefixer for ', () => {
288271
it('should apply a prefix', () => {
289272
let input = {"align-content": "center"};
290273
let expected = extendObject({}, input, {
291-
"-ms-flex-line-pack": "center"
274+
'-webkit-align-content': 'center'
292275
});
293276
let actual = applyCssPrefixes(input);
294277
checkCssPrefix("align-content", actual, expected);
@@ -297,7 +280,7 @@ describe('auto-prefixer for ', () => {
297280
it('should apply a prefix', () => {
298281
let input = {"align-content": "stretch"};
299282
let expected = extendObject({}, input, {
300-
"-ms-flex-line-pack": "stretch"
283+
'-webkit-align-content': 'stretch'
301284
});
302285
let actual = applyCssPrefixes(input);
303286
checkCssPrefix("align-content", actual, expected);
@@ -310,50 +293,29 @@ describe('auto-prefixer for ', () => {
310293
/**
311294
* Internal checks to `expect().toEqual()`
312295
*/
313-
function checkCssPrefix(iKey, actual, expected) {
314-
expect(actual[iKey]).toEqual(expected[iKey]);
315-
switch (iKey) {
296+
function checkCssPrefix(key, actual, expected) {
297+
expect(actual[key]).toEqual(expected[key]);
298+
switch (key) {
316299
case 'display':
317-
expect(actual['display']).toEqual(expected[iKey]);
318-
break;
319-
case 'flex':
320-
expect(actual['-ms-flex']).toEqual(expected['-ms-flex']);
321-
expect(actual['-webkit-box-flex']).toEqual(expected['-webkit-box-flex'].split(" ")[0]);
300+
expect(actual['display']).toEqual(expected[key]);
322301
break;
323302

303+
case 'flex':
324304
case 'flex-direction':
325-
expect(actual['-ms-flex-direction']).toEqual(expected['-ms-flex-direction']);
326-
expect(actual['-webkit-box-orient']).toEqual(expected['-webkit-box-orient']);
327-
expect(actual['-webkit-box-direction']).toEqual(expected['-webkit-box-direction']);
328-
break;
329-
330305
case 'flex-wrap':
331-
expect(actual['-ms-flex-wrap']).toEqual(expected['-ms-flex-wrap']);
332-
break;
333-
334-
case 'order':
335-
expect(actual['-ms-flex-order']).toEqual(expected['-ms-flex-order']);
336-
expect(actual['-webkit-box-ordinal-group']).toEqual(expected['-webkit-box-ordinal-group']);
337-
break;
338-
306+
case 'flex-grow':
307+
case 'flex-shrink':
308+
case 'flex-basis':
309+
case 'flex-flow':
339310
case 'justify-content':
340-
expect(actual['-ms-flex-pack']).toEqual(expected['-ms-flex-pack']);
341-
expect(actual['-webkit-box-pack']).toEqual(expected['-webkit-box-pack']);
342-
break;
343-
344311
case 'align-items':
345-
expect(actual['-ms-flex-align']).toEqual(expected['-ms-flex-align']);
346-
expect(actual['-webkit-box-align']).toEqual(expected['-webkit-box-align']);
347-
break;
348-
349312
case 'align-self':
350-
expect(actual['-ms-flex-item-align']).toEqual(expected['-ms-flex-item-align']);
351-
break;
352-
353313
case 'align-content':
354-
expect(actual['-ms-flex-line-pack']).toEqual(expected['-ms-flex-line-pack']);
314+
expect(actual[key]).toEqual(expected['-webkit-' + key]);
355315
break;
356316

357-
317+
case 'order':
318+
expect(actual[key]).toEqual(expected[key]);
319+
break;
358320
}
359321
}

0 commit comments

Comments
 (0)