Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
quarto-dev
GitHub Repository: quarto-dev/quarto-cli
Path: blob/main/tools/sass-variable-explainer/value-types.ts
6433 views
1
import { withType } from "./ast-utils.ts";
2
import { namedColors, units } from "./css-information.ts";
3
4
const typedImmediateValues: Record<string, any> = {
5
false: { type: "boolean", value: false },
6
true: { type: "boolean", value: true },
7
null: { type: "null", value: null },
8
}
9
10
export const fixImmediateTypes = (outer: any) =>
11
withType(outer, (node: any) => {
12
if (node.type === "identifier" && typedImmediateValues[node.value]) {
13
return {...node, ...typedImmediateValues[node.value]};
14
}
15
return node;
16
});
17
18
export const tagNamedColors = (outer: any) =>
19
withType(outer, (node: any) => {
20
if (node.type !== "identifier" || !namedColors.has(node?.value)) {
21
return node;
22
}
23
return {
24
...node,
25
type: "named_color",
26
};
27
});
28
29
export const tagColorConstructors = (outer: any) =>
30
withType(outer, (node: any) => {
31
if (node.type !== "function") {
32
return node;
33
}
34
const name = node.children[0].value;
35
if (node.children[0].type !== "identifier" || !name) {
36
return node;
37
}
38
const colorConstructors = new Set([
39
"rgb", "rgba", "hsl", "hsla",
40
]);
41
if (colorConstructors.has(name)) {
42
return {
43
...node,
44
valueType: "color",
45
};
46
}
47
return node;
48
});
49
50
// this also finds percentages
51
export const findDimensionValues = (outer: any) =>
52
withType(outer, (node: any) => {
53
const replace = (value: any[]) => {
54
const newValues = [];
55
for (let i = 0; i < value.length; ++i) {
56
const thisValue = value[i];
57
const nextValue = value[i + 1];
58
if (thisValue?.type === "number" &&
59
nextValue?.type === "identifier" &&
60
units.has(nextValue?.value)) {
61
newValues.push({
62
...thisValue,
63
type: "dimension",
64
unit: nextValue.value,
65
});
66
++i;
67
} else if (thisValue?.type === "number" &&
68
nextValue?.type === "operator" &&
69
nextValue?.value === "%") {
70
// this might be chancy if there's stuff like (3 % 2) floating around
71
// I couldn't find any in our .scss files, but :grimace:
72
newValues.push({
73
...thisValue,
74
type: "percentage",
75
});
76
++i;
77
} else {
78
newValues.push(thisValue);
79
}
80
}
81
return newValues;
82
}
83
if (node.type === "value" && Array.isArray(node.value)) {
84
return {
85
...node,
86
value: replace(node.value),
87
};
88
}
89
if (node.type === "node_group") {
90
return {
91
...node,
92
children: replace(node.children),
93
}
94
}
95
return node;
96
// if (node?.type !== "value") {
97
// return node;
98
// }
99
// const value = node?.value;
100
// if (!Array.isArray(value)) {
101
// return node;
102
// }
103
// const newValues = [];
104
// for (let i = 0; i < value.length; ++i) {
105
// const thisValue = value[i];
106
// const nextValue = value[i + 1];
107
// if (thisValue?.type === "number" &&
108
// nextValue?.type === "identifier" &&
109
// units.has(nextValue?.value)) {
110
// newValues.push({
111
// ...thisValue,
112
// type: "dimension",
113
// unit: nextValue.value,
114
// });
115
// ++i;
116
// } else if (thisValue?.type === "number" &&
117
// nextValue?.type === "operator" &&
118
// nextValue?.value === "%") {
119
// // this might be chancy if there's stuff like (3 % 2) floating around
120
// // I couldn't find any in our .scss files, but :grimace:
121
// newValues.push({
122
// ...thisValue,
123
// type: "percentage",
124
// });
125
// ++i;
126
// } else {
127
// newValues.push(thisValue);
128
// }
129
// }
130
// return {
131
// ...node,
132
// value: newValues,
133
// };
134
});
135
136