autoprefixer 9.8.7 → 10.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/CHANGELOG.md +999 -0
  2. package/README.md +0 -3
  3. package/bin/autoprefixer +11 -11
  4. package/data/prefixes.js +799 -545
  5. package/lib/at-rule.js +23 -50
  6. package/lib/autoprefixer.js +108 -97
  7. package/lib/brackets.js +31 -44
  8. package/lib/browsers.js +54 -71
  9. package/lib/declaration.js +122 -178
  10. package/lib/hacks/align-content.js +24 -54
  11. package/lib/hacks/align-items.js +23 -53
  12. package/lib/hacks/align-self.js +32 -60
  13. package/lib/hacks/animation.js +11 -29
  14. package/lib/hacks/appearance.js +19 -35
  15. package/lib/hacks/backdrop-filter.js +16 -31
  16. package/lib/hacks/background-clip.js +19 -36
  17. package/lib/hacks/background-size.js +16 -31
  18. package/lib/hacks/block-logical.js +28 -36
  19. package/lib/hacks/border-image.js +9 -27
  20. package/lib/hacks/border-radius.js +22 -44
  21. package/lib/hacks/break-props.js +38 -51
  22. package/lib/hacks/color-adjust.js +11 -30
  23. package/lib/hacks/cross-fade.js +29 -48
  24. package/lib/hacks/display-flex.js +32 -61
  25. package/lib/hacks/display-grid.js +12 -32
  26. package/lib/hacks/filter-value.js +8 -25
  27. package/lib/hacks/filter.js +13 -27
  28. package/lib/hacks/flex-basis.js +21 -54
  29. package/lib/hacks/flex-direction.js +41 -77
  30. package/lib/hacks/flex-flow.js +33 -61
  31. package/lib/hacks/flex-grow.js +16 -43
  32. package/lib/hacks/flex-shrink.js +21 -54
  33. package/lib/hacks/flex-spec.js +7 -10
  34. package/lib/hacks/flex-wrap.js +11 -32
  35. package/lib/hacks/flex.js +27 -58
  36. package/lib/hacks/fullscreen.js +10 -30
  37. package/lib/hacks/gradient.js +240 -330
  38. package/lib/hacks/grid-area.js +25 -43
  39. package/lib/hacks/grid-column-align.js +14 -34
  40. package/lib/hacks/grid-end.js +30 -45
  41. package/lib/hacks/grid-row-align.js +14 -34
  42. package/lib/hacks/grid-row-column.js +20 -39
  43. package/lib/hacks/grid-rows-columns.js +75 -99
  44. package/lib/hacks/grid-start.js +17 -39
  45. package/lib/hacks/grid-template-areas.js +59 -76
  46. package/lib/hacks/grid-template.js +40 -61
  47. package/lib/hacks/grid-utils.js +686 -716
  48. package/lib/hacks/image-rendering.js +24 -47
  49. package/lib/hacks/image-set.js +10 -30
  50. package/lib/hacks/inline-logical.js +26 -32
  51. package/lib/hacks/intrinsic.js +40 -53
  52. package/lib/hacks/justify-content.js +26 -57
  53. package/lib/hacks/mask-border.js +28 -36
  54. package/lib/hacks/mask-composite.js +41 -57
  55. package/lib/hacks/order.js +22 -52
  56. package/lib/hacks/overscroll-behavior.js +16 -37
  57. package/lib/hacks/pixelated.js +16 -40
  58. package/lib/hacks/place-self.js +18 -41
  59. package/lib/hacks/placeholder-shown.js +9 -28
  60. package/lib/hacks/placeholder.js +15 -38
  61. package/lib/hacks/text-decoration-skip-ink.js +14 -29
  62. package/lib/hacks/text-decoration.js +20 -31
  63. package/lib/hacks/text-emphasis-position.js +9 -28
  64. package/lib/hacks/transform-decl.js +43 -69
  65. package/lib/hacks/user-select.js +19 -27
  66. package/lib/hacks/writing-mode.js +19 -36
  67. package/lib/info.js +63 -93
  68. package/lib/old-selector.js +39 -60
  69. package/lib/old-value.js +17 -25
  70. package/lib/prefixer.js +83 -110
  71. package/lib/prefixes.js +233 -336
  72. package/lib/processor.js +420 -416
  73. package/lib/resolution.js +62 -98
  74. package/lib/selector.js +91 -139
  75. package/lib/supports.js +194 -246
  76. package/lib/transition.js +170 -265
  77. package/lib/utils.js +49 -72
  78. package/lib/value.js +77 -116
  79. package/lib/vendor.js +14 -0
  80. package/package.json +23 -12
@@ -1,281 +1,250 @@
1
- "use strict";
2
-
3
- function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
4
-
5
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
6
-
7
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
8
-
9
- var parser = require('postcss-value-parser');
10
-
11
- var list = require('postcss').list;
12
-
13
- var uniq = require('../utils').uniq;
14
-
15
- var escapeRegexp = require('../utils').escapeRegexp;
16
-
17
- var splitSelector = require('../utils').splitSelector;
18
-
19
- function convert(value) {
20
- if (value && value.length === 2 && value[0] === 'span' && parseInt(value[1], 10) > 0) {
21
- return [false, parseInt(value[1], 10)];
1
+ let parser = require('postcss-value-parser')
2
+ let list = require('postcss').list
3
+
4
+ let uniq = require('../utils').uniq
5
+ let escapeRegexp = require('../utils').escapeRegexp
6
+ let splitSelector = require('../utils').splitSelector
7
+
8
+ function convert (value) {
9
+ if (
10
+ value &&
11
+ value.length === 2 &&
12
+ value[0] === 'span' &&
13
+ parseInt(value[1], 10) > 0
14
+ ) {
15
+ return [false, parseInt(value[1], 10)]
22
16
  }
23
17
 
24
18
  if (value && value.length === 1 && parseInt(value[0], 10) > 0) {
25
- return [parseInt(value[0], 10), false];
19
+ return [parseInt(value[0], 10), false]
26
20
  }
27
21
 
28
- return [false, false];
22
+ return [false, false]
29
23
  }
30
24
 
31
- function translate(values, startIndex, endIndex) {
32
- var startValue = values[startIndex];
33
- var endValue = values[endIndex];
25
+ function translate (values, startIndex, endIndex) {
26
+ let startValue = values[startIndex]
27
+ let endValue = values[endIndex]
34
28
 
35
29
  if (!startValue) {
36
- return [false, false];
30
+ return [false, false]
37
31
  }
38
32
 
39
- var _convert = convert(startValue),
40
- start = _convert[0],
41
- spanStart = _convert[1];
42
-
43
- var _convert2 = convert(endValue),
44
- end = _convert2[0],
45
- spanEnd = _convert2[1];
33
+ let [start, spanStart] = convert(startValue)
34
+ let [end, spanEnd] = convert(endValue)
46
35
 
47
36
  if (start && !endValue) {
48
- return [start, false];
37
+ return [start, false]
49
38
  }
50
39
 
51
40
  if (spanStart && end) {
52
- return [end - spanStart, spanStart];
41
+ return [end - spanStart, spanStart]
53
42
  }
54
43
 
55
44
  if (start && spanEnd) {
56
- return [start, spanEnd];
45
+ return [start, spanEnd]
57
46
  }
58
47
 
59
48
  if (start && end) {
60
- return [start, end - start];
49
+ return [start, end - start]
61
50
  }
62
51
 
63
- return [false, false];
52
+ return [false, false]
64
53
  }
65
54
 
66
- function parse(decl) {
67
- var node = parser(decl.value);
68
- var values = [];
69
- var current = 0;
70
- values[current] = [];
55
+ function parse (decl) {
56
+ let node = parser(decl.value)
71
57
 
72
- for (var _iterator = _createForOfIteratorHelperLoose(node.nodes), _step; !(_step = _iterator()).done;) {
73
- var i = _step.value;
58
+ let values = []
59
+ let current = 0
60
+ values[current] = []
74
61
 
62
+ for (let i of node.nodes) {
75
63
  if (i.type === 'div') {
76
- current += 1;
77
- values[current] = [];
64
+ current += 1
65
+ values[current] = []
78
66
  } else if (i.type === 'word') {
79
- values[current].push(i.value);
67
+ values[current].push(i.value)
80
68
  }
81
69
  }
82
70
 
83
- return values;
71
+ return values
84
72
  }
85
73
 
86
- function insertDecl(decl, prop, value) {
87
- if (value && !decl.parent.some(function (i) {
88
- return i.prop === "-ms-" + prop;
89
- })) {
74
+ function insertDecl (decl, prop, value) {
75
+ if (value && !decl.parent.some(i => i.prop === `-ms-${prop}`)) {
90
76
  decl.cloneBefore({
91
- prop: "-ms-" + prop,
77
+ prop: `-ms-${prop}`,
92
78
  value: value.toString()
93
- });
79
+ })
94
80
  }
95
- } // Track transforms
81
+ }
96
82
 
83
+ // Track transforms
97
84
 
98
- function prefixTrackProp(_ref) {
99
- var prop = _ref.prop,
100
- prefix = _ref.prefix;
101
- return prefix + prop.replace('template-', '');
85
+ function prefixTrackProp ({ prop, prefix }) {
86
+ return prefix + prop.replace('template-', '')
102
87
  }
103
88
 
104
- function transformRepeat(_ref2, _ref3) {
105
- var nodes = _ref2.nodes;
106
- var gap = _ref3.gap;
107
-
108
- var _nodes$reduce = nodes.reduce(function (result, node) {
109
- if (node.type === 'div' && node.value === ',') {
110
- result.key = 'size';
111
- } else {
112
- result[result.key].push(parser.stringify(node));
89
+ function transformRepeat ({ nodes }, { gap }) {
90
+ let { count, size } = nodes.reduce(
91
+ (result, node) => {
92
+ if (node.type === 'div' && node.value === ',') {
93
+ result.key = 'size'
94
+ } else {
95
+ result[result.key].push(parser.stringify(node))
96
+ }
97
+ return result
98
+ },
99
+ {
100
+ key: 'count',
101
+ size: [],
102
+ count: []
113
103
  }
104
+ )
114
105
 
115
- return result;
116
- }, {
117
- key: 'count',
118
- size: [],
119
- count: []
120
- }),
121
- count = _nodes$reduce.count,
122
- size = _nodes$reduce.size; // insert gap values
123
-
124
-
106
+ // insert gap values
125
107
  if (gap) {
126
- var _ret = function () {
127
- size = size.filter(function (i) {
128
- return i.trim();
129
- });
130
- var val = [];
131
-
132
- var _loop = function _loop(i) {
133
- size.forEach(function (item, index) {
134
- if (index > 0 || i > 1) {
135
- val.push(gap);
136
- }
137
-
138
- val.push(item);
139
- });
140
- };
141
-
142
- for (var i = 1; i <= count; i++) {
143
- _loop(i);
144
- }
145
-
146
- return {
147
- v: val.join(' ')
148
- };
149
- }();
108
+ size = size.filter(i => i.trim())
109
+ let val = []
110
+ for (let i = 1; i <= count; i++) {
111
+ size.forEach((item, index) => {
112
+ if (index > 0 || i > 1) {
113
+ val.push(gap)
114
+ }
115
+ val.push(item)
116
+ })
117
+ }
150
118
 
151
- if (typeof _ret === "object") return _ret.v;
119
+ return val.join(' ')
152
120
  }
153
121
 
154
- return "(" + size.join('') + ")[" + count.join('') + "]";
122
+ return `(${size.join('')})[${count.join('')}]`
155
123
  }
156
124
 
157
- function prefixTrackValue(_ref4) {
158
- var value = _ref4.value,
159
- gap = _ref4.gap;
160
- var result = parser(value).nodes.reduce(function (nodes, node) {
125
+ function prefixTrackValue ({ value, gap }) {
126
+ let result = parser(value).nodes.reduce((nodes, node) => {
161
127
  if (node.type === 'function' && node.value === 'repeat') {
162
128
  return nodes.concat({
163
129
  type: 'word',
164
- value: transformRepeat(node, {
165
- gap: gap
166
- })
167
- });
130
+ value: transformRepeat(node, { gap })
131
+ })
168
132
  }
169
-
170
133
  if (gap && node.type === 'space') {
171
- return nodes.concat({
172
- type: 'space',
173
- value: ' '
174
- }, {
175
- type: 'word',
176
- value: gap
177
- }, node);
134
+ return nodes.concat(
135
+ {
136
+ type: 'space',
137
+ value: ' '
138
+ },
139
+ {
140
+ type: 'word',
141
+ value: gap
142
+ },
143
+ node
144
+ )
178
145
  }
146
+ return nodes.concat(node)
147
+ }, [])
179
148
 
180
- return nodes.concat(node);
181
- }, []);
182
- return parser.stringify(result);
183
- } // Parse grid-template-areas
149
+ return parser.stringify(result)
150
+ }
184
151
 
152
+ // Parse grid-template-areas
185
153
 
186
- var DOTS = /^\.+$/;
154
+ let DOTS = /^\.+$/
187
155
 
188
- function track(start, end) {
189
- return {
190
- start: start,
191
- end: end,
192
- span: end - start
193
- };
156
+ function track (start, end) {
157
+ return { start, end, span: end - start }
194
158
  }
195
159
 
196
- function getColumns(line) {
197
- return line.trim().split(/\s+/g);
160
+ function getColumns (line) {
161
+ return line.trim().split(/\s+/g)
198
162
  }
199
163
 
200
- function parseGridAreas(_ref5) {
201
- var rows = _ref5.rows,
202
- gap = _ref5.gap;
203
- return rows.reduce(function (areas, line, rowIndex) {
204
- if (gap.row) rowIndex *= 2;
205
- if (line.trim() === '') return areas;
206
- getColumns(line).forEach(function (area, columnIndex) {
207
- if (DOTS.test(area)) return;
208
- if (gap.column) columnIndex *= 2;
164
+ function parseGridAreas ({ rows, gap }) {
165
+ return rows.reduce((areas, line, rowIndex) => {
166
+ if (gap.row) rowIndex *= 2
167
+
168
+ if (line.trim() === '') return areas
169
+
170
+ getColumns(line).forEach((area, columnIndex) => {
171
+ if (DOTS.test(area)) return
172
+
173
+ if (gap.column) columnIndex *= 2
209
174
 
210
175
  if (typeof areas[area] === 'undefined') {
211
176
  areas[area] = {
212
177
  column: track(columnIndex + 1, columnIndex + 2),
213
178
  row: track(rowIndex + 1, rowIndex + 2)
214
- };
179
+ }
215
180
  } else {
216
- var _areas$area = areas[area],
217
- column = _areas$area.column,
218
- row = _areas$area.row;
219
- column.start = Math.min(column.start, columnIndex + 1);
220
- column.end = Math.max(column.end, columnIndex + 2);
221
- column.span = column.end - column.start;
222
- row.start = Math.min(row.start, rowIndex + 1);
223
- row.end = Math.max(row.end, rowIndex + 2);
224
- row.span = row.end - row.start;
181
+ let { column, row } = areas[area]
182
+
183
+ column.start = Math.min(column.start, columnIndex + 1)
184
+ column.end = Math.max(column.end, columnIndex + 2)
185
+ column.span = column.end - column.start
186
+
187
+ row.start = Math.min(row.start, rowIndex + 1)
188
+ row.end = Math.max(row.end, rowIndex + 2)
189
+ row.span = row.end - row.start
225
190
  }
226
- });
227
- return areas;
228
- }, {});
229
- } // Parse grid-template
191
+ })
230
192
 
193
+ return areas
194
+ }, {})
195
+ }
231
196
 
232
- function testTrack(node) {
233
- return node.type === 'word' && /^\[.+]$/.test(node.value);
197
+ // Parse grid-template
198
+
199
+ function testTrack (node) {
200
+ return node.type === 'word' && /^\[.+]$/.test(node.value)
234
201
  }
235
202
 
236
- function verifyRowSize(result) {
203
+ function verifyRowSize (result) {
237
204
  if (result.areas.length > result.rows.length) {
238
- result.rows.push('auto');
205
+ result.rows.push('auto')
239
206
  }
240
-
241
- return result;
207
+ return result
242
208
  }
243
209
 
244
- function parseTemplate(_ref6) {
245
- var decl = _ref6.decl,
246
- gap = _ref6.gap;
247
- var gridTemplate = parser(decl.value).nodes.reduce(function (result, node) {
248
- var type = node.type,
249
- value = node.value;
250
- if (testTrack(node) || type === 'space') return result; // area
210
+ function parseTemplate ({ decl, gap }) {
211
+ let gridTemplate = parser(decl.value).nodes.reduce(
212
+ (result, node) => {
213
+ let { type, value } = node
251
214
 
252
- if (type === 'string') {
253
- result = verifyRowSize(result);
254
- result.areas.push(value);
255
- } // values and function
215
+ if (testTrack(node) || type === 'space') return result
256
216
 
217
+ // area
218
+ if (type === 'string') {
219
+ result = verifyRowSize(result)
220
+ result.areas.push(value)
221
+ }
257
222
 
258
- if (type === 'word' || type === 'function') {
259
- result[result.key].push(parser.stringify(node));
260
- } // divider(/)
223
+ // values and function
224
+ if (type === 'word' || type === 'function') {
225
+ result[result.key].push(parser.stringify(node))
226
+ }
261
227
 
228
+ // divider(/)
229
+ if (type === 'div' && value === '/') {
230
+ result.key = 'columns'
231
+ result = verifyRowSize(result)
232
+ }
262
233
 
263
- if (type === 'div' && value === '/') {
264
- result.key = 'columns';
265
- result = verifyRowSize(result);
234
+ return result
235
+ },
236
+ {
237
+ key: 'rows',
238
+ columns: [],
239
+ rows: [],
240
+ areas: []
266
241
  }
242
+ )
267
243
 
268
- return result;
269
- }, {
270
- key: 'rows',
271
- columns: [],
272
- rows: [],
273
- areas: []
274
- });
275
244
  return {
276
245
  areas: parseGridAreas({
277
246
  rows: gridTemplate.areas,
278
- gap: gap
247
+ gap
279
248
  }),
280
249
  columns: prefixTrackValue({
281
250
  value: gridTemplate.columns.join(' '),
@@ -285,8 +254,10 @@ function parseTemplate(_ref6) {
285
254
  value: gridTemplate.rows.join(' '),
286
255
  gap: gap.row
287
256
  })
288
- };
289
- } // Insert parsed grid areas
257
+ }
258
+ }
259
+
260
+ // Insert parsed grid areas
290
261
 
291
262
  /**
292
263
  * Get an array of -ms- prefixed props and values
@@ -295,377 +266,395 @@ function parseTemplate(_ref6) {
295
266
  * @param {Boolean} [addColumnSpan] should we add grid-column-span value?
296
267
  * @return {Array<Object>}
297
268
  */
298
-
299
-
300
- function getMSDecls(area, addRowSpan, addColumnSpan) {
301
- if (addRowSpan === void 0) {
302
- addRowSpan = false;
303
- }
304
-
305
- if (addColumnSpan === void 0) {
306
- addColumnSpan = false;
269
+ function getMSDecls (area, addRowSpan = false, addColumnSpan = false) {
270
+ let result = [
271
+ {
272
+ prop: '-ms-grid-row',
273
+ value: String(area.row.start)
274
+ }
275
+ ]
276
+ if (area.row.span > 1 || addRowSpan) {
277
+ result.push({
278
+ prop: '-ms-grid-row-span',
279
+ value: String(area.row.span)
280
+ })
307
281
  }
308
-
309
- return [].concat({
310
- prop: '-ms-grid-row',
311
- value: String(area.row.start)
312
- }, area.row.span > 1 || addRowSpan ? {
313
- prop: '-ms-grid-row-span',
314
- value: String(area.row.span)
315
- } : [], {
282
+ result.push({
316
283
  prop: '-ms-grid-column',
317
284
  value: String(area.column.start)
318
- }, area.column.span > 1 || addColumnSpan ? {
319
- prop: '-ms-grid-column-span',
320
- value: String(area.column.span)
321
- } : []);
285
+ })
286
+ if (area.column.span > 1 || addColumnSpan) {
287
+ result.push({
288
+ prop: '-ms-grid-column-span',
289
+ value: String(area.column.span)
290
+ })
291
+ }
292
+ return result
322
293
  }
323
294
 
324
- function getParentMedia(parent) {
295
+ function getParentMedia (parent) {
325
296
  if (parent.type === 'atrule' && parent.name === 'media') {
326
- return parent;
297
+ return parent
327
298
  }
328
-
329
299
  if (!parent.parent) {
330
- return false;
300
+ return false
331
301
  }
332
-
333
- return getParentMedia(parent.parent);
302
+ return getParentMedia(parent.parent)
334
303
  }
304
+
335
305
  /**
336
306
  * change selectors for rules with duplicate grid-areas.
337
307
  * @param {Array<Rule>} rules
338
308
  * @param {Array<String>} templateSelectors
339
309
  * @return {Array<Rule>} rules with changed selectors
340
310
  */
341
-
342
-
343
- function changeDuplicateAreaSelectors(ruleSelectors, templateSelectors) {
344
- ruleSelectors = ruleSelectors.map(function (selector) {
345
- var selectorBySpace = list.space(selector);
346
- var selectorByComma = list.comma(selector);
311
+ function changeDuplicateAreaSelectors (ruleSelectors, templateSelectors) {
312
+ ruleSelectors = ruleSelectors.map(selector => {
313
+ let selectorBySpace = list.space(selector)
314
+ let selectorByComma = list.comma(selector)
347
315
 
348
316
  if (selectorBySpace.length > selectorByComma.length) {
349
- selector = selectorBySpace.slice(-1).join('');
317
+ selector = selectorBySpace.slice(-1).join('')
350
318
  }
319
+ return selector
320
+ })
321
+
322
+ return ruleSelectors.map(ruleSelector => {
323
+ let newSelector = templateSelectors.map((tplSelector, index) => {
324
+ let space = index === 0 ? '' : ' '
325
+ return `${space}${tplSelector} > ${ruleSelector}`
326
+ })
351
327
 
352
- return selector;
353
- });
354
- return ruleSelectors.map(function (ruleSelector) {
355
- var newSelector = templateSelectors.map(function (tplSelector, index) {
356
- var space = index === 0 ? '' : ' ';
357
- return "" + space + tplSelector + " > " + ruleSelector;
358
- });
359
- return newSelector;
360
- });
328
+ return newSelector
329
+ })
361
330
  }
331
+
362
332
  /**
363
333
  * check if selector of rules are equal
364
334
  * @param {Rule} ruleA
365
335
  * @param {Rule} ruleB
366
336
  * @return {Boolean}
367
337
  */
368
-
369
-
370
- function selectorsEqual(ruleA, ruleB) {
371
- return ruleA.selectors.some(function (sel) {
372
- return ruleB.selectors.some(function (s) {
373
- return s === sel;
374
- });
375
- });
338
+ function selectorsEqual (ruleA, ruleB) {
339
+ return ruleA.selectors.some(sel => {
340
+ return ruleB.selectors.some(s => s === sel)
341
+ })
376
342
  }
343
+
377
344
  /**
378
345
  * Parse data from all grid-template(-areas) declarations
379
346
  * @param {Root} css css root
380
347
  * @return {Object} parsed data
381
348
  */
349
+ function parseGridTemplatesData (css) {
350
+ let parsed = []
382
351
 
383
-
384
- function parseGridTemplatesData(css) {
385
- var parsed = []; // we walk through every grid-template(-areas) declaration and store
352
+ // we walk through every grid-template(-areas) declaration and store
386
353
  // data with the same area names inside the item
387
-
388
- css.walkDecls(/grid-template(-areas)?$/, function (d) {
389
- var rule = d.parent;
390
- var media = getParentMedia(rule);
391
- var gap = getGridGap(d);
392
- var inheritedGap = inheritGridGap(d, gap);
393
-
394
- var _parseTemplate = parseTemplate({
395
- decl: d,
396
- gap: inheritedGap || gap
397
- }),
398
- areas = _parseTemplate.areas;
399
-
400
- var areaNames = Object.keys(areas); // skip node if it doesn't have areas
401
-
354
+ css.walkDecls(/grid-template(-areas)?$/, d => {
355
+ let rule = d.parent
356
+ let media = getParentMedia(rule)
357
+ let gap = getGridGap(d)
358
+ let inheritedGap = inheritGridGap(d, gap)
359
+ let { areas } = parseTemplate({ decl: d, gap: inheritedGap || gap })
360
+ let areaNames = Object.keys(areas)
361
+
362
+ // skip node if it doesn't have areas
402
363
  if (areaNames.length === 0) {
403
- return true;
404
- } // check parsed array for item that include the same area names
405
- // return index of that item
406
-
364
+ return true
365
+ }
407
366
 
408
- var index = parsed.reduce(function (acc, _ref7, idx) {
409
- var allAreas = _ref7.allAreas;
410
- var hasAreas = allAreas && areaNames.some(function (area) {
411
- return allAreas.includes(area);
412
- });
413
- return hasAreas ? idx : acc;
414
- }, null);
367
+ // check parsed array for item that include the same area names
368
+ // return index of that item
369
+ let index = parsed.reduce((acc, { allAreas }, idx) => {
370
+ let hasAreas = allAreas && areaNames.some(area => allAreas.includes(area))
371
+ return hasAreas ? idx : acc
372
+ }, null)
415
373
 
416
374
  if (index !== null) {
417
375
  // index is found, add the grid-template data to that item
418
- var _parsed$index = parsed[index],
419
- allAreas = _parsed$index.allAreas,
420
- rules = _parsed$index.rules; // check if rule has no duplicate area names
376
+ let { allAreas, rules } = parsed[index]
377
+
378
+ // check if rule has no duplicate area names
379
+ let hasNoDuplicates = rules.some(r => {
380
+ return r.hasDuplicates === false && selectorsEqual(r, rule)
381
+ })
421
382
 
422
- var hasNoDuplicates = rules.some(function (r) {
423
- return r.hasDuplicates === false && selectorsEqual(r, rule);
424
- });
425
- var duplicatesFound = false; // check need to gather all duplicate area names
383
+ let duplicatesFound = false
426
384
 
427
- var duplicateAreaNames = rules.reduce(function (acc, r) {
385
+ // check need to gather all duplicate area names
386
+ let duplicateAreaNames = rules.reduce((acc, r) => {
428
387
  if (!r.params && selectorsEqual(r, rule)) {
429
- duplicatesFound = true;
430
- return r.duplicateAreaNames;
388
+ duplicatesFound = true
389
+ return r.duplicateAreaNames
431
390
  }
432
-
433
391
  if (!duplicatesFound) {
434
- areaNames.forEach(function (name) {
392
+ areaNames.forEach(name => {
435
393
  if (r.areas[name]) {
436
- acc.push(name);
394
+ acc.push(name)
437
395
  }
438
- });
396
+ })
439
397
  }
398
+ return uniq(acc)
399
+ }, [])
440
400
 
441
- return uniq(acc);
442
- }, []); // update grid-row/column-span values for areas with duplicate
401
+ // update grid-row/column-span values for areas with duplicate
443
402
  // area names. @see #1084 and #1146
444
-
445
- rules.forEach(function (r) {
446
- areaNames.forEach(function (name) {
447
- var area = r.areas[name];
448
-
403
+ rules.forEach(r => {
404
+ areaNames.forEach(name => {
405
+ let area = r.areas[name]
449
406
  if (area && area.row.span !== areas[name].row.span) {
450
- areas[name].row.updateSpan = true;
407
+ areas[name].row.updateSpan = true
451
408
  }
452
409
 
453
410
  if (area && area.column.span !== areas[name].column.span) {
454
- areas[name].column.updateSpan = true;
411
+ areas[name].column.updateSpan = true
455
412
  }
456
- });
457
- });
458
- parsed[index].allAreas = uniq([].concat(allAreas, areaNames));
413
+ })
414
+ })
415
+
416
+ parsed[index].allAreas = uniq([...allAreas, ...areaNames])
459
417
  parsed[index].rules.push({
460
418
  hasDuplicates: !hasNoDuplicates,
461
419
  params: media.params,
462
420
  selectors: rule.selectors,
463
421
  node: rule,
464
- duplicateAreaNames: duplicateAreaNames,
465
- areas: areas
466
- });
422
+ duplicateAreaNames,
423
+ areas
424
+ })
467
425
  } else {
468
426
  // index is NOT found, push the new item to the parsed array
469
427
  parsed.push({
470
428
  allAreas: areaNames,
471
429
  areasCount: 0,
472
- rules: [{
473
- hasDuplicates: false,
474
- duplicateRules: [],
475
- params: media.params,
476
- selectors: rule.selectors,
477
- node: rule,
478
- duplicateAreaNames: [],
479
- areas: areas
480
- }]
481
- });
430
+ rules: [
431
+ {
432
+ hasDuplicates: false,
433
+ duplicateRules: [],
434
+ params: media.params,
435
+ selectors: rule.selectors,
436
+ node: rule,
437
+ duplicateAreaNames: [],
438
+ areas
439
+ }
440
+ ]
441
+ })
482
442
  }
483
443
 
484
- return undefined;
485
- });
486
- return parsed;
444
+ return undefined
445
+ })
446
+
447
+ return parsed
487
448
  }
449
+
488
450
  /**
489
451
  * insert prefixed grid-area declarations
490
452
  * @param {Root} css css root
491
453
  * @param {Function} isDisabled check if the rule is disabled
492
454
  * @return {void}
493
455
  */
494
-
495
-
496
- function insertAreas(css, isDisabled) {
456
+ function insertAreas (css, isDisabled) {
497
457
  // parse grid-template declarations
498
- var gridTemplatesData = parseGridTemplatesData(css); // return undefined if no declarations found
458
+ let gridTemplatesData = parseGridTemplatesData(css)
499
459
 
460
+ // return undefined if no declarations found
500
461
  if (gridTemplatesData.length === 0) {
501
- return undefined;
502
- } // we need to store the rules that we will insert later
462
+ return undefined
463
+ }
503
464
 
465
+ // we need to store the rules that we will insert later
466
+ let rulesToInsert = {}
504
467
 
505
- var rulesToInsert = {};
506
- css.walkDecls('grid-area', function (gridArea) {
507
- var gridAreaRule = gridArea.parent;
508
- var hasPrefixedRow = gridAreaRule.first.prop === '-ms-grid-row';
509
- var gridAreaMedia = getParentMedia(gridAreaRule);
468
+ css.walkDecls('grid-area', gridArea => {
469
+ let gridAreaRule = gridArea.parent
470
+ let hasPrefixedRow = gridAreaRule.first.prop === '-ms-grid-row'
471
+ let gridAreaMedia = getParentMedia(gridAreaRule)
510
472
 
511
473
  if (isDisabled(gridArea)) {
512
- return undefined;
474
+ return undefined
513
475
  }
514
476
 
515
- var gridAreaRuleIndex = gridAreaMedia ? css.index(gridAreaMedia) : css.index(gridAreaRule);
516
- var value = gridArea.value; // found the data that matches grid-area identifier
477
+ let gridAreaRuleIndex = css.index(gridAreaMedia || gridAreaRule)
517
478
 
518
- var data = gridTemplatesData.filter(function (d) {
519
- return d.allAreas.includes(value);
520
- })[0];
479
+ let value = gridArea.value
480
+ // found the data that matches grid-area identifier
481
+ let data = gridTemplatesData.filter(d => d.allAreas.includes(value))[0]
521
482
 
522
483
  if (!data) {
523
- return true;
484
+ return true
524
485
  }
525
486
 
526
- var lastArea = data.allAreas[data.allAreas.length - 1];
527
- var selectorBySpace = list.space(gridAreaRule.selector);
528
- var selectorByComma = list.comma(gridAreaRule.selector);
529
- var selectorIsComplex = selectorBySpace.length > 1 && selectorBySpace.length > selectorByComma.length; // prevent doubling of prefixes
487
+ let lastArea = data.allAreas[data.allAreas.length - 1]
488
+ let selectorBySpace = list.space(gridAreaRule.selector)
489
+ let selectorByComma = list.comma(gridAreaRule.selector)
490
+ let selectorIsComplex =
491
+ selectorBySpace.length > 1 &&
492
+ selectorBySpace.length > selectorByComma.length
530
493
 
494
+ // prevent doubling of prefixes
531
495
  if (hasPrefixedRow) {
532
- return false;
533
- } // create the empty object with the key as the last area name
534
- // e.g if we have templates with "a b c" values, "c" will be the last area
535
-
496
+ return false
497
+ }
536
498
 
499
+ // create the empty object with the key as the last area name
500
+ // e.g if we have templates with "a b c" values, "c" will be the last area
537
501
  if (!rulesToInsert[lastArea]) {
538
- rulesToInsert[lastArea] = {};
502
+ rulesToInsert[lastArea] = {}
539
503
  }
540
504
 
541
- var lastRuleIsSet = false; // walk through every grid-template rule data
505
+ let lastRuleIsSet = false
542
506
 
543
- for (var _iterator2 = _createForOfIteratorHelperLoose(data.rules), _step2; !(_step2 = _iterator2()).done;) {
544
- var rule = _step2.value;
545
- var area = rule.areas[value];
546
- var hasDuplicateName = rule.duplicateAreaNames.includes(value); // if we can't find the area name, update lastRule and continue
507
+ // walk through every grid-template rule data
508
+ for (let rule of data.rules) {
509
+ let area = rule.areas[value]
510
+ let hasDuplicateName = rule.duplicateAreaNames.includes(value)
547
511
 
512
+ // if we can't find the area name, update lastRule and continue
548
513
  if (!area) {
549
- var lastRuleIndex = css.index(rulesToInsert[lastArea].lastRule);
550
-
514
+ let lastRuleIndex = css.index(rulesToInsert[lastArea].lastRule)
551
515
  if (gridAreaRuleIndex > lastRuleIndex) {
552
- rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule;
516
+ rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule
553
517
  }
518
+ continue
519
+ }
554
520
 
555
- continue;
556
- } // for grid-templates inside media rule we need to create empty
521
+ // for grid-templates inside media rule we need to create empty
557
522
  // array to push prefixed grid-area rules later
558
-
559
-
560
523
  if (rule.params && !rulesToInsert[lastArea][rule.params]) {
561
- rulesToInsert[lastArea][rule.params] = [];
524
+ rulesToInsert[lastArea][rule.params] = []
562
525
  }
563
526
 
564
527
  if ((!rule.hasDuplicates || !hasDuplicateName) && !rule.params) {
565
528
  // grid-template has no duplicates and not inside media rule
566
- getMSDecls(area, false, false).reverse().forEach(function (i) {
567
- return gridAreaRule.prepend(Object.assign(i, {
568
- raws: {
569
- between: gridArea.raws.between
570
- }
571
- }));
572
- });
573
- rulesToInsert[lastArea].lastRule = gridAreaRule;
574
- lastRuleIsSet = true;
575
- } else if (rule.hasDuplicates && !rule.params && !selectorIsComplex) {
576
- (function () {
577
- // grid-template has duplicates and not inside media rule
578
- var cloned = gridAreaRule.clone();
579
- cloned.removeAll();
580
- getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
581
- return cloned.prepend(Object.assign(i, {
582
- raws: {
583
- between: gridArea.raws.between
584
- }
585
- }));
586
- });
587
- cloned.selectors = changeDuplicateAreaSelectors(cloned.selectors, rule.selectors);
588
-
589
- if (rulesToInsert[lastArea].lastRule) {
590
- rulesToInsert[lastArea].lastRule.after(cloned);
591
- }
592
529
 
593
- rulesToInsert[lastArea].lastRule = cloned;
594
- lastRuleIsSet = true;
595
- })();
596
- } else if (rule.hasDuplicates && !rule.params && selectorIsComplex && gridAreaRule.selector.includes(rule.selectors[0])) {
530
+ getMSDecls(area, false, false)
531
+ .reverse()
532
+ .forEach(i =>
533
+ gridAreaRule.prepend(
534
+ Object.assign(i, {
535
+ raws: {
536
+ between: gridArea.raws.between
537
+ }
538
+ })
539
+ )
540
+ )
541
+
542
+ rulesToInsert[lastArea].lastRule = gridAreaRule
543
+ lastRuleIsSet = true
544
+ } else if (rule.hasDuplicates && !rule.params && !selectorIsComplex) {
545
+ // grid-template has duplicates and not inside media rule
546
+ let cloned = gridAreaRule.clone()
547
+ cloned.removeAll()
548
+
549
+ getMSDecls(area, area.row.updateSpan, area.column.updateSpan)
550
+ .reverse()
551
+ .forEach(i =>
552
+ cloned.prepend(
553
+ Object.assign(i, {
554
+ raws: {
555
+ between: gridArea.raws.between
556
+ }
557
+ })
558
+ )
559
+ )
560
+
561
+ cloned.selectors = changeDuplicateAreaSelectors(
562
+ cloned.selectors,
563
+ rule.selectors
564
+ )
565
+
566
+ if (rulesToInsert[lastArea].lastRule) {
567
+ rulesToInsert[lastArea].lastRule.after(cloned)
568
+ }
569
+ rulesToInsert[lastArea].lastRule = cloned
570
+ lastRuleIsSet = true
571
+ } else if (
572
+ rule.hasDuplicates &&
573
+ !rule.params &&
574
+ selectorIsComplex &&
575
+ gridAreaRule.selector.includes(rule.selectors[0])
576
+ ) {
597
577
  // grid-template has duplicates and not inside media rule
598
578
  // and the selector is complex
599
- gridAreaRule.walkDecls(/-ms-grid-(row|column)/, function (d) {
600
- return d.remove();
601
- });
602
- getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
603
- return gridAreaRule.prepend(Object.assign(i, {
604
- raws: {
605
- between: gridArea.raws.between
606
- }
607
- }));
608
- });
579
+ gridAreaRule.walkDecls(/-ms-grid-(row|column)/, d => d.remove())
580
+ getMSDecls(area, area.row.updateSpan, area.column.updateSpan)
581
+ .reverse()
582
+ .forEach(i =>
583
+ gridAreaRule.prepend(
584
+ Object.assign(i, {
585
+ raws: {
586
+ between: gridArea.raws.between
587
+ }
588
+ })
589
+ )
590
+ )
609
591
  } else if (rule.params) {
610
- (function () {
611
- // grid-template is inside media rule
612
- // if we're inside media rule, we need to store prefixed rules
613
- // inside rulesToInsert object to be able to preserve the order of media
614
- // rules and merge them easily
615
- var cloned = gridAreaRule.clone();
616
- cloned.removeAll();
617
- getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
618
- return cloned.prepend(Object.assign(i, {
619
- raws: {
620
- between: gridArea.raws.between
621
- }
622
- }));
623
- });
624
-
625
- if (rule.hasDuplicates && hasDuplicateName) {
626
- cloned.selectors = changeDuplicateAreaSelectors(cloned.selectors, rule.selectors);
627
- }
628
-
629
- cloned.raws = rule.node.raws;
592
+ // grid-template is inside media rule
593
+ // if we're inside media rule, we need to store prefixed rules
594
+ // inside rulesToInsert object to be able to preserve the order of media
595
+ // rules and merge them easily
596
+ let cloned = gridAreaRule.clone()
597
+ cloned.removeAll()
598
+
599
+ getMSDecls(area, area.row.updateSpan, area.column.updateSpan)
600
+ .reverse()
601
+ .forEach(i =>
602
+ cloned.prepend(
603
+ Object.assign(i, {
604
+ raws: {
605
+ between: gridArea.raws.between
606
+ }
607
+ })
608
+ )
609
+ )
610
+
611
+ if (rule.hasDuplicates && hasDuplicateName) {
612
+ cloned.selectors = changeDuplicateAreaSelectors(
613
+ cloned.selectors,
614
+ rule.selectors
615
+ )
616
+ }
630
617
 
631
- if (css.index(rule.node.parent) > gridAreaRuleIndex) {
632
- // append the prefixed rules right inside media rule
633
- // with grid-template
634
- rule.node.parent.append(cloned);
635
- } else {
636
- // store the rule to insert later
637
- rulesToInsert[lastArea][rule.params].push(cloned);
638
- } // set new rule as last rule ONLY if we didn't set lastRule for
639
- // this grid-area before
618
+ cloned.raws = rule.node.raws
640
619
 
620
+ if (css.index(rule.node.parent) > gridAreaRuleIndex) {
621
+ // append the prefixed rules right inside media rule
622
+ // with grid-template
623
+ rule.node.parent.append(cloned)
624
+ } else {
625
+ // store the rule to insert later
626
+ rulesToInsert[lastArea][rule.params].push(cloned)
627
+ }
641
628
 
642
- if (!lastRuleIsSet) {
643
- rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule;
644
- }
645
- })();
629
+ // set new rule as last rule ONLY if we didn't set lastRule for
630
+ // this grid-area before
631
+ if (!lastRuleIsSet) {
632
+ rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule
633
+ }
646
634
  }
647
635
  }
648
636
 
649
- return undefined;
650
- }); // append stored rules inside the media rules
651
-
652
- Object.keys(rulesToInsert).forEach(function (area) {
653
- var data = rulesToInsert[area];
654
- var lastRule = data.lastRule;
655
- Object.keys(data).reverse().filter(function (p) {
656
- return p !== 'lastRule';
657
- }).forEach(function (params) {
658
- if (data[params].length > 0 && lastRule) {
659
- lastRule.after({
660
- name: 'media',
661
- params: params
662
- });
663
- lastRule.next().append(data[params]);
664
- }
665
- });
666
- });
667
- return undefined;
637
+ return undefined
638
+ })
639
+
640
+ // append stored rules inside the media rules
641
+ Object.keys(rulesToInsert).forEach(area => {
642
+ let data = rulesToInsert[area]
643
+ let lastRule = data.lastRule
644
+ Object.keys(data)
645
+ .reverse()
646
+ .filter(p => p !== 'lastRule')
647
+ .forEach(params => {
648
+ if (data[params].length > 0 && lastRule) {
649
+ lastRule.after({ name: 'media', params })
650
+ lastRule.next().append(data[params])
651
+ }
652
+ })
653
+ })
654
+
655
+ return undefined
668
656
  }
657
+
669
658
  /**
670
659
  * Warn user if grid area identifiers are not found
671
660
  * @param {Object} areas
@@ -673,22 +662,20 @@ function insertAreas(css, isDisabled) {
673
662
  * @param {Result} result
674
663
  * @return {void}
675
664
  */
665
+ function warnMissedAreas (areas, decl, result) {
666
+ let missed = Object.keys(areas)
676
667
 
677
-
678
- function warnMissedAreas(areas, decl, result) {
679
- var missed = Object.keys(areas);
680
- decl.root().walkDecls('grid-area', function (gridArea) {
681
- missed = missed.filter(function (e) {
682
- return e !== gridArea.value;
683
- });
684
- });
668
+ decl.root().walkDecls('grid-area', gridArea => {
669
+ missed = missed.filter(e => e !== gridArea.value)
670
+ })
685
671
 
686
672
  if (missed.length > 0) {
687
- decl.warn(result, 'Can not find grid areas: ' + missed.join(', '));
673
+ decl.warn(result, 'Can not find grid areas: ' + missed.join(', '))
688
674
  }
689
675
 
690
- return undefined;
676
+ return undefined
691
677
  }
678
+
692
679
  /**
693
680
  * compare selectors with grid-area rule and grid-template rule
694
681
  * show warning if grid-template selector is not found
@@ -697,69 +684,70 @@ function warnMissedAreas(areas, decl, result) {
697
684
  * @param {Result} result
698
685
  * @return {void}
699
686
  */
700
-
701
-
702
- function warnTemplateSelectorNotFound(decl, result) {
703
- var rule = decl.parent;
704
- var root = decl.root();
705
- var duplicatesFound = false; // slice selector array. Remove the last part (for comparison)
706
-
707
- var slicedSelectorArr = list.space(rule.selector).filter(function (str) {
708
- return str !== '>';
709
- }).slice(0, -1); // we need to compare only if selector is complex.
687
+ function warnTemplateSelectorNotFound (decl, result) {
688
+ let rule = decl.parent
689
+ let root = decl.root()
690
+ let duplicatesFound = false
691
+
692
+ // slice selector array. Remove the last part (for comparison)
693
+ let slicedSelectorArr = list
694
+ .space(rule.selector)
695
+ .filter(str => str !== '>')
696
+ .slice(0, -1)
697
+
698
+ // we need to compare only if selector is complex.
710
699
  // e.g '.grid-cell' is simple, but '.parent > .grid-cell' is complex
711
-
712
700
  if (slicedSelectorArr.length > 0) {
713
- var gridTemplateFound = false;
714
- var foundAreaSelector = null;
715
- root.walkDecls(/grid-template(-areas)?$/, function (d) {
716
- var parent = d.parent;
717
- var templateSelectors = parent.selectors;
701
+ let gridTemplateFound = false
702
+ let foundAreaSelector = null
718
703
 
719
- var _parseTemplate2 = parseTemplate({
720
- decl: d,
721
- gap: getGridGap(d)
722
- }),
723
- areas = _parseTemplate2.areas;
704
+ root.walkDecls(/grid-template(-areas)?$/, d => {
705
+ let parent = d.parent
706
+ let templateSelectors = parent.selectors
724
707
 
725
- var hasArea = areas[decl.value]; // find the the matching selectors
726
-
727
- for (var _iterator3 = _createForOfIteratorHelperLoose(templateSelectors), _step3; !(_step3 = _iterator3()).done;) {
728
- var tplSelector = _step3.value;
708
+ let { areas } = parseTemplate({ decl: d, gap: getGridGap(d) })
709
+ let hasArea = areas[decl.value]
729
710
 
711
+ // find the the matching selectors
712
+ for (let tplSelector of templateSelectors) {
730
713
  if (gridTemplateFound) {
731
- break;
714
+ break
732
715
  }
716
+ let tplSelectorArr = list.space(tplSelector).filter(str => str !== '>')
733
717
 
734
- var tplSelectorArr = list.space(tplSelector).filter(function (str) {
735
- return str !== '>';
736
- });
737
- gridTemplateFound = tplSelectorArr.every(function (item, idx) {
738
- return item === slicedSelectorArr[idx];
739
- });
718
+ gridTemplateFound = tplSelectorArr.every(
719
+ (item, idx) => item === slicedSelectorArr[idx]
720
+ )
740
721
  }
741
722
 
742
723
  if (gridTemplateFound || !hasArea) {
743
- return true;
724
+ return true
744
725
  }
745
726
 
746
727
  if (!foundAreaSelector) {
747
- foundAreaSelector = parent.selector;
748
- } // if we found the duplicate area with different selector
749
-
728
+ foundAreaSelector = parent.selector
729
+ }
750
730
 
731
+ // if we found the duplicate area with different selector
751
732
  if (foundAreaSelector && foundAreaSelector !== parent.selector) {
752
- duplicatesFound = true;
733
+ duplicatesFound = true
753
734
  }
754
735
 
755
- return undefined;
756
- }); // warn user if we didn't find template
736
+ return undefined
737
+ })
757
738
 
739
+ // warn user if we didn't find template
758
740
  if (!gridTemplateFound && duplicatesFound) {
759
- decl.warn(result, 'Autoprefixer cannot find a grid-template ' + ("containing the duplicate grid-area \"" + decl.value + "\" ") + ("with full selector matching: " + slicedSelectorArr.join(' ')));
741
+ decl.warn(
742
+ result,
743
+ 'Autoprefixer cannot find a grid-template ' +
744
+ `containing the duplicate grid-area "${decl.value}" ` +
745
+ `with full selector matching: ${slicedSelectorArr.join(' ')}`
746
+ )
760
747
  }
761
748
  }
762
749
  }
750
+
763
751
  /**
764
752
  * warn user if both grid-area and grid-(row|column)
765
753
  * declarations are present in the same rule
@@ -767,72 +755,76 @@ function warnTemplateSelectorNotFound(decl, result) {
767
755
  * @param {Result} result
768
756
  * @return {void}
769
757
  */
770
-
771
-
772
- function warnIfGridRowColumnExists(decl, result) {
773
- var rule = decl.parent;
774
- var decls = [];
775
- rule.walkDecls(/^grid-(row|column)/, function (d) {
776
- if (!d.prop.endsWith('-end') && !d.value.startsWith('span')) {
777
- decls.push(d);
758
+ function warnIfGridRowColumnExists (decl, result) {
759
+ let rule = decl.parent
760
+ let decls = []
761
+ rule.walkDecls(/^grid-(row|column)/, d => {
762
+ if (
763
+ !d.prop.endsWith('-end') &&
764
+ !d.value.startsWith('span') &&
765
+ !d.prop.endsWith('-gap')
766
+ ) {
767
+ decls.push(d)
778
768
  }
779
- });
780
-
769
+ })
781
770
  if (decls.length > 0) {
782
- decls.forEach(function (d) {
783
- d.warn(result, 'You already have a grid-area declaration present in the rule. ' + ("You should use either grid-area or " + d.prop + ", not both"));
784
- });
771
+ decls.forEach(d => {
772
+ d.warn(
773
+ result,
774
+ 'You already have a grid-area declaration present in the rule. ' +
775
+ `You should use either grid-area or ${d.prop}, not both`
776
+ )
777
+ })
785
778
  }
786
779
 
787
- return undefined;
788
- } // Gap utils
789
-
780
+ return undefined
781
+ }
790
782
 
791
- function getGridGap(decl) {
792
- var gap = {}; // try to find gap
783
+ // Gap utils
793
784
 
794
- var testGap = /^(grid-)?((row|column)-)?gap$/;
795
- decl.parent.walkDecls(testGap, function (_ref8) {
796
- var prop = _ref8.prop,
797
- value = _ref8.value;
785
+ function getGridGap (decl) {
786
+ let gap = {}
798
787
 
788
+ // try to find gap
789
+ let testGap = /^(grid-)?((row|column)-)?gap$/
790
+ decl.parent.walkDecls(testGap, ({ prop, value }) => {
799
791
  if (/^(grid-)?gap$/.test(prop)) {
800
- var _parser$nodes = parser(value).nodes,
801
- row = _parser$nodes[0],
802
- column = _parser$nodes[2];
803
- gap.row = row && parser.stringify(row);
804
- gap.column = column ? parser.stringify(column) : gap.row;
792
+ let [row, , column] = parser(value).nodes
793
+
794
+ gap.row = row && parser.stringify(row)
795
+ gap.column = column ? parser.stringify(column) : gap.row
805
796
  }
797
+ if (/^(grid-)?row-gap$/.test(prop)) gap.row = value
798
+ if (/^(grid-)?column-gap$/.test(prop)) gap.column = value
799
+ })
806
800
 
807
- if (/^(grid-)?row-gap$/.test(prop)) gap.row = value;
808
- if (/^(grid-)?column-gap$/.test(prop)) gap.column = value;
809
- });
810
- return gap;
801
+ return gap
811
802
  }
803
+
812
804
  /**
813
805
  * parse media parameters (for example 'min-width: 500px')
814
806
  * @param {String} params parameter to parse
815
807
  * @return {}
816
808
  */
817
-
818
-
819
- function parseMediaParams(params) {
809
+ function parseMediaParams (params) {
820
810
  if (!params) {
821
- return false;
811
+ return []
822
812
  }
813
+ let parsed = parser(params)
814
+ let prop
815
+ let value
823
816
 
824
- var parsed = parser(params);
825
- var prop;
826
- var value;
827
- parsed.walk(function (node) {
817
+ parsed.walk(node => {
828
818
  if (node.type === 'word' && /min|max/g.test(node.value)) {
829
- prop = node.value;
819
+ prop = node.value
830
820
  } else if (node.value.includes('px')) {
831
- value = parseInt(node.value.replace(/\D/g, ''));
821
+ value = parseInt(node.value.replace(/\D/g, ''))
832
822
  }
833
- });
834
- return [prop, value];
823
+ })
824
+
825
+ return [prop, value]
835
826
  }
827
+
836
828
  /**
837
829
  * Compare the selectors and decide if we
838
830
  * need to inherit gap from compared selector or not.
@@ -840,55 +832,52 @@ function parseMediaParams(params) {
840
832
  * @type {String} selB
841
833
  * @return {Boolean}
842
834
  */
835
+ function shouldInheritGap (selA, selB) {
836
+ let result
843
837
 
844
-
845
- function shouldInheritGap(selA, selB) {
846
- var result; // get arrays of selector split in 3-deep array
847
-
848
- var splitSelectorArrA = splitSelector(selA);
849
- var splitSelectorArrB = splitSelector(selB);
838
+ // get arrays of selector split in 3-deep array
839
+ let splitSelectorArrA = splitSelector(selA)
840
+ let splitSelectorArrB = splitSelector(selB)
850
841
 
851
842
  if (splitSelectorArrA[0].length < splitSelectorArrB[0].length) {
852
843
  // abort if selectorA has lower descendant specificity then selectorB
853
844
  // (e.g '.grid' and '.hello .world .grid')
854
- return false;
845
+ return false
855
846
  } else if (splitSelectorArrA[0].length > splitSelectorArrB[0].length) {
856
847
  // if selectorA has higher descendant specificity then selectorB
857
848
  // (e.g '.foo .bar .grid' and '.grid')
858
- var idx = splitSelectorArrA[0].reduce(function (res, _ref9, index) {
859
- var item = _ref9[0];
860
- var firstSelectorPart = splitSelectorArrB[0][0][0];
861
849
 
850
+ let idx = splitSelectorArrA[0].reduce((res, [item], index) => {
851
+ let firstSelectorPart = splitSelectorArrB[0][0][0]
862
852
  if (item === firstSelectorPart) {
863
- return index;
853
+ return index
864
854
  }
865
-
866
- return false;
867
- }, false);
855
+ return false
856
+ }, false)
868
857
 
869
858
  if (idx) {
870
- result = splitSelectorArrB[0].every(function (arr, index) {
871
- return arr.every(function (part, innerIndex) {
872
- return (// because selectorA has more space elements, we need to slice
859
+ result = splitSelectorArrB[0].every((arr, index) => {
860
+ return arr.every(
861
+ (part, innerIndex) =>
862
+ // because selectorA has more space elements, we need to slice
873
863
  // selectorA array by 'idx' number to compare them
874
864
  splitSelectorArrA[0].slice(idx)[index][innerIndex] === part
875
- );
876
- });
877
- });
865
+ )
866
+ })
878
867
  }
879
868
  } else {
880
869
  // if selectorA has the same descendant specificity as selectorB
881
870
  // this condition covers cases such as: '.grid.foo.bar' and '.grid'
882
- result = splitSelectorArrB.some(function (byCommaArr) {
883
- return byCommaArr.every(function (bySpaceArr, index) {
884
- return bySpaceArr.every(function (part, innerIndex) {
885
- return splitSelectorArrA[0][index][innerIndex] === part;
886
- });
887
- });
888
- });
871
+ result = splitSelectorArrB.some(byCommaArr => {
872
+ return byCommaArr.every((bySpaceArr, index) => {
873
+ return bySpaceArr.every(
874
+ (part, innerIndex) => splitSelectorArrA[0][index][innerIndex] === part
875
+ )
876
+ })
877
+ })
889
878
  }
890
879
 
891
- return result;
880
+ return result
892
881
  }
893
882
  /**
894
883
  * inherit grid gap values from the closest rule above
@@ -897,89 +886,88 @@ function shouldInheritGap(selA, selB) {
897
886
  * @param {Object} gap gap values
898
887
  * @return {Object | Boolean} return gap values or false (if not found)
899
888
  */
889
+ function inheritGridGap (decl, gap) {
890
+ let rule = decl.parent
891
+ let mediaRule = getParentMedia(rule)
892
+ let root = rule.root()
900
893
 
894
+ // get an array of selector split in 3-deep array
895
+ let splitSelectorArr = splitSelector(rule.selector)
901
896
 
902
- function inheritGridGap(decl, gap) {
903
- var rule = decl.parent;
904
- var mediaRule = getParentMedia(rule);
905
- var root = rule.root(); // get an array of selector split in 3-deep array
906
-
907
- var splitSelectorArr = splitSelector(rule.selector); // abort if the rule already has gaps
908
-
897
+ // abort if the rule already has gaps
909
898
  if (Object.keys(gap).length > 0) {
910
- return false;
911
- } // e.g ['min-width']
899
+ return false
900
+ }
912
901
 
902
+ // e.g ['min-width']
903
+ let [prop] = parseMediaParams(mediaRule.params)
913
904
 
914
- var _parseMediaParams = parseMediaParams(mediaRule.params),
915
- prop = _parseMediaParams[0];
905
+ let lastBySpace = splitSelectorArr[0]
916
906
 
917
- var lastBySpace = splitSelectorArr[0]; // get escaped value from the selector
907
+ // get escaped value from the selector
918
908
  // if we have '.grid-2.foo.bar' selector, will be '\.grid\-2'
909
+ let escaped = escapeRegexp(lastBySpace[lastBySpace.length - 1][0])
919
910
 
920
- var escaped = escapeRegexp(lastBySpace[lastBySpace.length - 1][0]);
921
- var regexp = new RegExp("(" + escaped + "$)|(" + escaped + "[,.])"); // find the closest rule with the same selector
911
+ let regexp = new RegExp(`(${escaped}$)|(${escaped}[,.])`)
922
912
 
923
- var closestRuleGap;
924
- root.walkRules(regexp, function (r) {
925
- var gridGap; // abort if are checking the same rule
913
+ // find the closest rule with the same selector
914
+ let closestRuleGap
915
+ root.walkRules(regexp, r => {
916
+ let gridGap
926
917
 
918
+ // abort if are checking the same rule
927
919
  if (rule.toString() === r.toString()) {
928
- return false;
929
- } // find grid-gap values
930
-
920
+ return false
921
+ }
931
922
 
932
- r.walkDecls('grid-gap', function (d) {
933
- return gridGap = getGridGap(d);
934
- }); // skip rule without gaps
923
+ // find grid-gap values
924
+ r.walkDecls('grid-gap', d => (gridGap = getGridGap(d)))
935
925
 
926
+ // skip rule without gaps
936
927
  if (!gridGap || Object.keys(gridGap).length === 0) {
937
- return true;
938
- } // skip rules that should not be inherited from
939
-
928
+ return true
929
+ }
940
930
 
931
+ // skip rules that should not be inherited from
941
932
  if (!shouldInheritGap(rule.selector, r.selector)) {
942
- return true;
933
+ return true
943
934
  }
944
935
 
945
- var media = getParentMedia(r);
946
-
936
+ let media = getParentMedia(r)
947
937
  if (media) {
948
938
  // if we are inside media, we need to check that media props match
949
939
  // e.g ('min-width' === 'min-width')
950
- var propToCompare = parseMediaParams(media.params)[0];
951
-
940
+ let propToCompare = parseMediaParams(media.params)[0]
952
941
  if (propToCompare === prop) {
953
- closestRuleGap = gridGap;
954
- return true;
942
+ closestRuleGap = gridGap
943
+ return true
955
944
  }
956
945
  } else {
957
- closestRuleGap = gridGap;
958
- return true;
946
+ closestRuleGap = gridGap
947
+ return true
959
948
  }
960
949
 
961
- return undefined;
962
- }); // if we find the closest gap object
950
+ return undefined
951
+ })
963
952
 
953
+ // if we find the closest gap object
964
954
  if (closestRuleGap && Object.keys(closestRuleGap).length > 0) {
965
- return closestRuleGap;
955
+ return closestRuleGap
966
956
  }
967
-
968
- return false;
957
+ return false
969
958
  }
970
959
 
971
- function warnGridGap(_ref10) {
972
- var gap = _ref10.gap,
973
- hasColumns = _ref10.hasColumns,
974
- decl = _ref10.decl,
975
- result = _ref10.result;
976
- var hasBothGaps = gap.row && gap.column;
977
-
978
- if (!hasColumns && (hasBothGaps || gap.column && !gap.row)) {
979
- delete gap.column;
980
- decl.warn(result, 'Can not implement grid-gap without grid-template-columns');
960
+ function warnGridGap ({ gap, hasColumns, decl, result }) {
961
+ let hasBothGaps = gap.row && gap.column
962
+ if (!hasColumns && (hasBothGaps || (gap.column && !gap.row))) {
963
+ delete gap.column
964
+ decl.warn(
965
+ result,
966
+ 'Can not implement grid-gap without grid-template-columns'
967
+ )
981
968
  }
982
969
  }
970
+
983
971
  /**
984
972
  * normalize the grid-template-rows/columns values
985
973
  * @param {String} str grid-template-rows/columns value
@@ -988,50 +976,46 @@ function warnGridGap(_ref10) {
988
976
  * let normalized = normalizeRowColumn('1fr repeat(2, 20px 50px) 1fr')
989
977
  * normalized // <= ['1fr', '20px', '50px', '20px', '50px', '1fr']
990
978
  */
991
-
992
-
993
- function normalizeRowColumn(str) {
994
- var normalized = parser(str).nodes.reduce(function (result, node) {
979
+ function normalizeRowColumn (str) {
980
+ let normalized = parser(str).nodes.reduce((result, node) => {
995
981
  if (node.type === 'function' && node.value === 'repeat') {
996
- var key = 'count';
997
-
998
- var _node$nodes$reduce = node.nodes.reduce(function (acc, n) {
999
- if (n.type === 'word' && key === 'count') {
1000
- acc[0] = Math.abs(parseInt(n.value));
1001
- return acc;
1002
- }
1003
-
1004
- if (n.type === 'div' && n.value === ',') {
1005
- key = 'value';
1006
- return acc;
1007
- }
982
+ let key = 'count'
1008
983
 
1009
- if (key === 'value') {
1010
- acc[1] += parser.stringify(n);
1011
- }
1012
-
1013
- return acc;
1014
- }, [0, '']),
1015
- count = _node$nodes$reduce[0],
1016
- value = _node$nodes$reduce[1];
984
+ let [count, value] = node.nodes.reduce(
985
+ (acc, n) => {
986
+ if (n.type === 'word' && key === 'count') {
987
+ acc[0] = Math.abs(parseInt(n.value))
988
+ return acc
989
+ }
990
+ if (n.type === 'div' && n.value === ',') {
991
+ key = 'value'
992
+ return acc
993
+ }
994
+ if (key === 'value') {
995
+ acc[1] += parser.stringify(n)
996
+ }
997
+ return acc
998
+ },
999
+ [0, '']
1000
+ )
1017
1001
 
1018
1002
  if (count) {
1019
- for (var i = 0; i < count; i++) {
1020
- result.push(value);
1003
+ for (let i = 0; i < count; i++) {
1004
+ result.push(value)
1021
1005
  }
1022
1006
  }
1023
1007
 
1024
- return result;
1008
+ return result
1025
1009
  }
1026
-
1027
1010
  if (node.type === 'space') {
1028
- return result;
1011
+ return result
1029
1012
  }
1013
+ return result.concat(parser.stringify(node))
1014
+ }, [])
1030
1015
 
1031
- return result.concat(parser.stringify(node));
1032
- }, []);
1033
- return normalized;
1016
+ return normalized
1034
1017
  }
1018
+
1035
1019
  /**
1036
1020
  * Autoplace grid items
1037
1021
  * @param {Declaration} decl
@@ -1041,83 +1025,69 @@ function normalizeRowColumn(str) {
1041
1025
  * @return {void}
1042
1026
  * @see https://github.com/postcss/autoprefixer/issues/1148
1043
1027
  */
1028
+ function autoplaceGridItems (decl, result, gap, autoflowValue = 'row') {
1029
+ let { parent } = decl
1044
1030
 
1031
+ let rowDecl = parent.nodes.find(i => i.prop === 'grid-template-rows')
1032
+ let rows = normalizeRowColumn(rowDecl.value)
1033
+ let columns = normalizeRowColumn(decl.value)
1045
1034
 
1046
- function autoplaceGridItems(decl, result, gap, autoflowValue) {
1047
- if (autoflowValue === void 0) {
1048
- autoflowValue = 'row';
1049
- }
1050
-
1051
- var parent = decl.parent;
1052
- var rowDecl = parent.nodes.find(function (i) {
1053
- return i.prop === 'grid-template-rows';
1054
- });
1055
- var rows = normalizeRowColumn(rowDecl.value);
1056
- var columns = normalizeRowColumn(decl.value); // Build array of area names with dummy values. If we have 3 columns and
1035
+ // Build array of area names with dummy values. If we have 3 columns and
1057
1036
  // 2 rows, filledRows will be equal to ['1 2 3', '4 5 6']
1058
-
1059
- var filledRows = rows.map(function (_, rowIndex) {
1060
- return Array.from({
1061
- length: columns.length
1062
- }, function (v, k) {
1063
- return k + rowIndex * columns.length + 1;
1064
- }).join(' ');
1065
- });
1066
- var areas = parseGridAreas({
1067
- rows: filledRows,
1068
- gap: gap
1069
- });
1070
- var keys = Object.keys(areas);
1071
- var items = keys.map(function (i) {
1072
- return areas[i];
1073
- }); // Change the order of cells if grid-auto-flow value is 'column'
1074
-
1037
+ let filledRows = rows.map((_, rowIndex) => {
1038
+ return Array.from(
1039
+ { length: columns.length },
1040
+ (v, k) => k + rowIndex * columns.length + 1
1041
+ ).join(' ')
1042
+ })
1043
+
1044
+ let areas = parseGridAreas({ rows: filledRows, gap })
1045
+ let keys = Object.keys(areas)
1046
+ let items = keys.map(i => areas[i])
1047
+
1048
+ // Change the order of cells if grid-auto-flow value is 'column'
1075
1049
  if (autoflowValue.includes('column')) {
1076
- items = items.sort(function (a, b) {
1077
- return a.column.start - b.column.start;
1078
- });
1079
- } // Insert new rules
1050
+ items = items.sort((a, b) => a.column.start - b.column.start)
1051
+ }
1080
1052
 
1053
+ // Insert new rules
1054
+ items.reverse().forEach((item, index) => {
1055
+ let { column, row } = item
1056
+ let nodeSelector = parent.selectors
1057
+ .map(sel => sel + ` > *:nth-child(${keys.length - index})`)
1058
+ .join(', ')
1081
1059
 
1082
- items.reverse().forEach(function (item, index) {
1083
- var column = item.column,
1084
- row = item.row;
1085
- var nodeSelector = parent.selectors.map(function (sel) {
1086
- return sel + (" > *:nth-child(" + (keys.length - index) + ")");
1087
- }).join(', '); // create new rule
1060
+ // create new rule
1061
+ let node = parent.clone().removeAll()
1088
1062
 
1089
- var node = parent.clone().removeAll(); // change rule selector
1063
+ // change rule selector
1064
+ node.selector = nodeSelector
1090
1065
 
1091
- node.selector = nodeSelector; // insert prefixed row/column values
1066
+ // insert prefixed row/column values
1067
+ node.append({ prop: '-ms-grid-row', value: row.start })
1068
+ node.append({ prop: '-ms-grid-column', value: column.start })
1092
1069
 
1093
- node.append({
1094
- prop: '-ms-grid-row',
1095
- value: row.start
1096
- });
1097
- node.append({
1098
- prop: '-ms-grid-column',
1099
- value: column.start
1100
- }); // insert rule
1101
-
1102
- parent.after(node);
1103
- });
1104
- return undefined;
1070
+ // insert rule
1071
+ parent.after(node)
1072
+ })
1073
+
1074
+ return undefined
1105
1075
  }
1106
1076
 
1107
1077
  module.exports = {
1108
- parse: parse,
1109
- translate: translate,
1110
- parseTemplate: parseTemplate,
1111
- parseGridAreas: parseGridAreas,
1112
- warnMissedAreas: warnMissedAreas,
1113
- insertAreas: insertAreas,
1114
- insertDecl: insertDecl,
1115
- prefixTrackProp: prefixTrackProp,
1116
- prefixTrackValue: prefixTrackValue,
1117
- getGridGap: getGridGap,
1118
- warnGridGap: warnGridGap,
1119
- warnTemplateSelectorNotFound: warnTemplateSelectorNotFound,
1120
- warnIfGridRowColumnExists: warnIfGridRowColumnExists,
1121
- inheritGridGap: inheritGridGap,
1122
- autoplaceGridItems: autoplaceGridItems
1123
- };
1078
+ parse,
1079
+ translate,
1080
+ parseTemplate,
1081
+ parseGridAreas,
1082
+ warnMissedAreas,
1083
+ insertAreas,
1084
+ insertDecl,
1085
+ prefixTrackProp,
1086
+ prefixTrackValue,
1087
+ getGridGap,
1088
+ warnGridGap,
1089
+ warnTemplateSelectorNotFound,
1090
+ warnIfGridRowColumnExists,
1091
+ inheritGridGap,
1092
+ autoplaceGridItems
1093
+ }