grid.js
2.92 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
'use strict';
const joinGridValue = require('../lib/joinGridValue');
/**
* @param {import('postcss-value-parser').ParsedValue} gridAutoFlow
* @return {import('postcss-value-parser').ParsedValue | string}
*/
const normalizeGridAutoFlow = (gridAutoFlow) => {
let newValue = { front: '', back: '' };
let shouldNormalize = false;
gridAutoFlow.walk((node) => {
if (node.value === 'dense') {
shouldNormalize = true;
newValue.back = node.value;
} else if (['row', 'column'].includes(node.value.trim().toLowerCase())) {
shouldNormalize = true;
newValue.front = node.value;
} else {
shouldNormalize = false;
}
});
if (shouldNormalize) {
return `${newValue.front.trim()} ${newValue.back.trim()}`;
}
return gridAutoFlow;
};
/**
* @param {import('postcss-value-parser').ParsedValue} gridGap
* @return {import('postcss-value-parser').ParsedValue | string}
*/
const normalizeGridColumnRowGap = (gridGap) => {
let newValue = { front: '', back: '' };
let shouldNormalize = false;
gridGap.walk((node) => {
// console.log(node);
if (node.value === 'normal') {
shouldNormalize = true;
newValue.front = node.value;
} else {
newValue.back = `${newValue.back} ${node.value}`;
}
});
if (shouldNormalize) {
return `${newValue.front.trim()} ${newValue.back.trim()}`;
}
return gridGap;
};
/**
* @param {import('postcss-value-parser').ParsedValue} grid
* @return {string | string[]}
*/
const normalizeGridColumnRow = (grid) => {
// cant do normalization here using node, so copy it as a string
let gridValue = grid.toString().split('/'); // node -> string value, split -> " 2 / 3 span " -> [' 2','3 span ']
if (gridValue.length > 1) {
return joinGridValue(
gridValue.map((gridLine) => {
let normalizeValue = {
front: '',
back: '',
};
gridLine = gridLine.trim(); // '3 span ' -> '3 span'
gridLine.split(' ').forEach((node) => {
// ['3','span']
if (node === 'span') {
normalizeValue.front = node; // span _
} else {
normalizeValue.back = `${normalizeValue.back} ${node}`; // _ 3
}
});
return `${normalizeValue.front.trim()} ${normalizeValue.back.trim()}`; // span 3
})
// returns "2 / span 3"
);
}
// doing this separating if `/` is not present as while joining('/') , it will add `/` at the end
return gridValue.map((gridLine) => {
let normalizeValue = {
front: '',
back: '',
};
gridLine = gridLine.trim();
gridLine.split(' ').forEach((node) => {
if (node === 'span') {
normalizeValue.front = node;
} else {
normalizeValue.back = `${normalizeValue.back} ${node}`;
}
});
return `${normalizeValue.front.trim()} ${normalizeValue.back.trim()}`;
});
};
module.exports = {
normalizeGridAutoFlow,
normalizeGridColumnRowGap,
normalizeGridColumnRow,
};