grid-rows-columns.js
3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
let Declaration = require('../declaration')
let {
prefixTrackProp,
prefixTrackValue,
autoplaceGridItems,
getGridGap,
inheritGridGap
} = require('./grid-utils')
let Processor = require('../processor')
class GridRowsColumns extends Declaration {
/**
* Change property name for IE
*/
prefixed(prop, prefix) {
if (prefix === '-ms-') {
return prefixTrackProp({ prop, prefix })
}
return super.prefixed(prop, prefix)
}
/**
* Change IE property back
*/
normalize(prop) {
return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1')
}
insert(decl, prefix, prefixes, result) {
if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes)
let { parent, prop, value } = decl
let isRowProp = prop.includes('rows')
let isColumnProp = prop.includes('columns')
let hasGridTemplate = parent.some(
i => i.prop === 'grid-template' || i.prop === 'grid-template-areas'
)
/**
* Not to prefix rows declaration if grid-template(-areas) is present
*/
if (hasGridTemplate && isRowProp) {
return false
}
let processor = new Processor({ options: {} })
let status = processor.gridStatus(parent, result)
let gap = getGridGap(decl)
gap = inheritGridGap(decl, gap) || gap
let gapValue = isRowProp ? gap.row : gap.column
if ((status === 'no-autoplace' || status === true) && !hasGridTemplate) {
gapValue = null
}
let prefixValue = prefixTrackValue({
value,
gap: gapValue
})
/**
* Insert prefixes
*/
decl.cloneBefore({
prop: prefixTrackProp({ prop, prefix }),
value: prefixValue
})
let autoflow = parent.nodes.find(i => i.prop === 'grid-auto-flow')
let autoflowValue = 'row'
if (autoflow && !processor.disabled(autoflow, result)) {
autoflowValue = autoflow.value.trim()
}
if (status === 'autoplace') {
/**
* Show warning if grid-template-rows decl is not found
*/
let rowDecl = parent.nodes.find(i => i.prop === 'grid-template-rows')
if (!rowDecl && hasGridTemplate) {
return undefined
} else if (!rowDecl && !hasGridTemplate) {
decl.warn(
result,
'Autoplacement does not work without grid-template-rows property'
)
return undefined
}
/**
* Show warning if grid-template-columns decl is not found
*/
let columnDecl = parent.nodes.find(i => {
return i.prop === 'grid-template-columns'
})
if (!columnDecl && !hasGridTemplate) {
decl.warn(
result,
'Autoplacement does not work without grid-template-columns property'
)
}
/**
* Autoplace grid items
*/
if (isColumnProp && !hasGridTemplate) {
autoplaceGridItems(decl, result, gap, autoflowValue)
}
}
return undefined
}
}
GridRowsColumns.names = [
'grid-template-rows',
'grid-template-columns',
'grid-rows',
'grid-columns'
]
module.exports = GridRowsColumns