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.
- package/CHANGELOG.md +999 -0
- package/README.md +0 -3
- package/bin/autoprefixer +11 -11
- package/data/prefixes.js +799 -545
- package/lib/at-rule.js +23 -50
- package/lib/autoprefixer.js +108 -97
- package/lib/brackets.js +31 -44
- package/lib/browsers.js +54 -71
- package/lib/declaration.js +122 -178
- package/lib/hacks/align-content.js +24 -54
- package/lib/hacks/align-items.js +23 -53
- package/lib/hacks/align-self.js +32 -60
- package/lib/hacks/animation.js +11 -29
- package/lib/hacks/appearance.js +19 -35
- package/lib/hacks/backdrop-filter.js +16 -31
- package/lib/hacks/background-clip.js +19 -36
- package/lib/hacks/background-size.js +16 -31
- package/lib/hacks/block-logical.js +28 -36
- package/lib/hacks/border-image.js +9 -27
- package/lib/hacks/border-radius.js +22 -44
- package/lib/hacks/break-props.js +38 -51
- package/lib/hacks/color-adjust.js +11 -30
- package/lib/hacks/cross-fade.js +29 -48
- package/lib/hacks/display-flex.js +32 -61
- package/lib/hacks/display-grid.js +12 -32
- package/lib/hacks/filter-value.js +8 -25
- package/lib/hacks/filter.js +13 -27
- package/lib/hacks/flex-basis.js +21 -54
- package/lib/hacks/flex-direction.js +41 -77
- package/lib/hacks/flex-flow.js +33 -61
- package/lib/hacks/flex-grow.js +16 -43
- package/lib/hacks/flex-shrink.js +21 -54
- package/lib/hacks/flex-spec.js +7 -10
- package/lib/hacks/flex-wrap.js +11 -32
- package/lib/hacks/flex.js +27 -58
- package/lib/hacks/fullscreen.js +10 -30
- package/lib/hacks/gradient.js +240 -330
- package/lib/hacks/grid-area.js +25 -43
- package/lib/hacks/grid-column-align.js +14 -34
- package/lib/hacks/grid-end.js +30 -45
- package/lib/hacks/grid-row-align.js +14 -34
- package/lib/hacks/grid-row-column.js +20 -39
- package/lib/hacks/grid-rows-columns.js +75 -99
- package/lib/hacks/grid-start.js +17 -39
- package/lib/hacks/grid-template-areas.js +59 -76
- package/lib/hacks/grid-template.js +40 -61
- package/lib/hacks/grid-utils.js +686 -716
- package/lib/hacks/image-rendering.js +24 -47
- package/lib/hacks/image-set.js +10 -30
- package/lib/hacks/inline-logical.js +26 -32
- package/lib/hacks/intrinsic.js +40 -53
- package/lib/hacks/justify-content.js +26 -57
- package/lib/hacks/mask-border.js +28 -36
- package/lib/hacks/mask-composite.js +41 -57
- package/lib/hacks/order.js +22 -52
- package/lib/hacks/overscroll-behavior.js +16 -37
- package/lib/hacks/pixelated.js +16 -40
- package/lib/hacks/place-self.js +18 -41
- package/lib/hacks/placeholder-shown.js +9 -28
- package/lib/hacks/placeholder.js +15 -38
- package/lib/hacks/text-decoration-skip-ink.js +14 -29
- package/lib/hacks/text-decoration.js +20 -31
- package/lib/hacks/text-emphasis-position.js +9 -28
- package/lib/hacks/transform-decl.js +43 -69
- package/lib/hacks/user-select.js +19 -27
- package/lib/hacks/writing-mode.js +19 -36
- package/lib/info.js +63 -93
- package/lib/old-selector.js +39 -60
- package/lib/old-value.js +17 -25
- package/lib/prefixer.js +83 -110
- package/lib/prefixes.js +233 -336
- package/lib/processor.js +420 -416
- package/lib/resolution.js +62 -98
- package/lib/selector.js +91 -139
- package/lib/supports.js +194 -246
- package/lib/transition.js +170 -265
- package/lib/utils.js +49 -72
- package/lib/value.js +77 -116
- package/lib/vendor.js +14 -0
- package/package.json +23 -12
package/lib/hacks/grid-utils.js
CHANGED
|
@@ -1,281 +1,250 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
-
|
|
33
|
-
|
|
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
|
-
|
|
40
|
-
|
|
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
|
-
|
|
68
|
-
var values = [];
|
|
69
|
-
var current = 0;
|
|
70
|
-
values[current] = [];
|
|
55
|
+
function parse (decl) {
|
|
56
|
+
let node = parser(decl.value)
|
|
71
57
|
|
|
72
|
-
|
|
73
|
-
|
|
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(
|
|
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:
|
|
77
|
+
prop: `-ms-${prop}`,
|
|
92
78
|
value: value.toString()
|
|
93
|
-
})
|
|
79
|
+
})
|
|
94
80
|
}
|
|
95
|
-
}
|
|
81
|
+
}
|
|
96
82
|
|
|
83
|
+
// Track transforms
|
|
97
84
|
|
|
98
|
-
function prefixTrackProp(
|
|
99
|
-
|
|
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(
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
result
|
|
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
|
-
|
|
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
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
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
|
-
|
|
119
|
+
return val.join(' ')
|
|
152
120
|
}
|
|
153
121
|
|
|
154
|
-
return
|
|
122
|
+
return `(${size.join('')})[${count.join('')}]`
|
|
155
123
|
}
|
|
156
124
|
|
|
157
|
-
function prefixTrackValue(
|
|
158
|
-
|
|
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
|
-
|
|
166
|
-
})
|
|
167
|
-
});
|
|
130
|
+
value: transformRepeat(node, { gap })
|
|
131
|
+
})
|
|
168
132
|
}
|
|
169
|
-
|
|
170
133
|
if (gap && node.type === 'space') {
|
|
171
|
-
return nodes.concat(
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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(
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
if (
|
|
205
|
-
|
|
206
|
-
getColumns(line).forEach(
|
|
207
|
-
if (DOTS.test(area)) return
|
|
208
|
-
|
|
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
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
column.
|
|
220
|
-
column.
|
|
221
|
-
|
|
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
|
-
|
|
233
|
-
|
|
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(
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
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
|
-
|
|
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
|
-
|
|
259
|
-
|
|
260
|
-
|
|
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
|
-
|
|
264
|
-
|
|
265
|
-
|
|
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
|
|
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
|
-
}
|
|
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
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
if (
|
|
306
|
-
|
|
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
|
-
}
|
|
319
|
-
|
|
320
|
-
|
|
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
|
-
|
|
344
|
-
|
|
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
|
|
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
|
-
|
|
371
|
-
|
|
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
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
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
|
-
}
|
|
405
|
-
// return index of that item
|
|
406
|
-
|
|
364
|
+
return true
|
|
365
|
+
}
|
|
407
366
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
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
|
-
|
|
419
|
-
|
|
420
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
446
|
-
|
|
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
|
-
|
|
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
|
|
465
|
-
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
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
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
|
-
|
|
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
|
-
|
|
458
|
+
let gridTemplatesData = parseGridTemplatesData(css)
|
|
499
459
|
|
|
460
|
+
// return undefined if no declarations found
|
|
500
461
|
if (gridTemplatesData.length === 0) {
|
|
501
|
-
return undefined
|
|
502
|
-
}
|
|
462
|
+
return undefined
|
|
463
|
+
}
|
|
503
464
|
|
|
465
|
+
// we need to store the rules that we will insert later
|
|
466
|
+
let rulesToInsert = {}
|
|
504
467
|
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
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
|
-
|
|
516
|
-
var value = gridArea.value; // found the data that matches grid-area identifier
|
|
477
|
+
let gridAreaRuleIndex = css.index(gridAreaMedia || gridAreaRule)
|
|
517
478
|
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
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
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
505
|
+
let lastRuleIsSet = false
|
|
542
506
|
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
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)/,
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
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
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
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
|
-
|
|
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
|
-
|
|
643
|
-
|
|
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
|
-
})
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
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
|
-
|
|
679
|
-
|
|
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
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
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
|
-
|
|
714
|
-
|
|
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
|
-
|
|
720
|
-
|
|
721
|
-
|
|
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
|
-
|
|
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
|
-
|
|
735
|
-
|
|
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
|
-
}
|
|
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
|
-
})
|
|
736
|
+
return undefined
|
|
737
|
+
})
|
|
757
738
|
|
|
739
|
+
// warn user if we didn't find template
|
|
758
740
|
if (!gridTemplateFound && duplicatesFound) {
|
|
759
|
-
decl.warn(
|
|
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
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
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(
|
|
783
|
-
d.warn(
|
|
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
|
-
}
|
|
789
|
-
|
|
780
|
+
return undefined
|
|
781
|
+
}
|
|
790
782
|
|
|
791
|
-
|
|
792
|
-
var gap = {}; // try to find gap
|
|
783
|
+
// Gap utils
|
|
793
784
|
|
|
794
|
-
|
|
795
|
-
|
|
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
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
gap.
|
|
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
|
-
|
|
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
|
|
811
|
+
return []
|
|
822
812
|
}
|
|
813
|
+
let parsed = parser(params)
|
|
814
|
+
let prop
|
|
815
|
+
let value
|
|
823
816
|
|
|
824
|
-
|
|
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
|
-
|
|
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
|
-
|
|
846
|
-
|
|
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
|
-
|
|
867
|
-
}, false);
|
|
855
|
+
return false
|
|
856
|
+
}, false)
|
|
868
857
|
|
|
869
858
|
if (idx) {
|
|
870
|
-
result = splitSelectorArrB[0].every(
|
|
871
|
-
return arr.every(
|
|
872
|
-
|
|
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(
|
|
883
|
-
return byCommaArr.every(
|
|
884
|
-
return bySpaceArr.every(
|
|
885
|
-
|
|
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
|
-
|
|
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
|
-
}
|
|
899
|
+
return false
|
|
900
|
+
}
|
|
912
901
|
|
|
902
|
+
// e.g ['min-width']
|
|
903
|
+
let [prop] = parseMediaParams(mediaRule.params)
|
|
913
904
|
|
|
914
|
-
|
|
915
|
-
prop = _parseMediaParams[0];
|
|
905
|
+
let lastBySpace = splitSelectorArr[0]
|
|
916
906
|
|
|
917
|
-
|
|
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
|
-
|
|
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
|
-
|
|
924
|
-
|
|
925
|
-
|
|
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
|
-
}
|
|
930
|
-
|
|
920
|
+
return false
|
|
921
|
+
}
|
|
931
922
|
|
|
932
|
-
|
|
933
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
})
|
|
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(
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
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 (
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
})
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
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(
|
|
1077
|
-
|
|
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
|
-
|
|
1083
|
-
|
|
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
|
-
|
|
1063
|
+
// change rule selector
|
|
1064
|
+
node.selector = nodeSelector
|
|
1090
1065
|
|
|
1091
|
-
|
|
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
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
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
|
|
1109
|
-
translate
|
|
1110
|
-
parseTemplate
|
|
1111
|
-
parseGridAreas
|
|
1112
|
-
warnMissedAreas
|
|
1113
|
-
insertAreas
|
|
1114
|
-
insertDecl
|
|
1115
|
-
prefixTrackProp
|
|
1116
|
-
prefixTrackValue
|
|
1117
|
-
getGridGap
|
|
1118
|
-
warnGridGap
|
|
1119
|
-
warnTemplateSelectorNotFound
|
|
1120
|
-
warnIfGridRowColumnExists
|
|
1121
|
-
inheritGridGap
|
|
1122
|
-
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
|
+
}
|