/
grid-rows-columns.js
125 lines (106 loc) · 3.04 KB
/
grid-rows-columns.js
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
import Declaration from "../declaration.js";
import {
autoplaceGridItems,
getGridGap,
inheritGridGap,
prefixTrackProp,
prefixTrackValue,
} from "./grid-utils.js";
import Processor from "../processor.js";
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",
];
export default GridRowsColumns;