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