@mapsight/vector-style-compiler 8.0.3 → 10.0.0

package/src/js/cssToRules/mapRule.ts

@@ -1,98 +0,0 @@
-import type css from "css";
-
-import unique from "@mapsight/lib-js/array/unique";
-import {isTruthy} from "@mapsight/lib-js/boolean";
-import deepMerge from "@mapsight/lib-js/object/deep-extend";
-
-import uniqueSerialized from "../helpers/uniqueSerialized.ts";
-import type {DeclarationNode} from "./mapDeclaration.ts";
-import mapDeclaration from "./mapDeclaration.ts";
-import mapSelector, {type Selector} from "./mapSelector.ts";
-
-const isDeclaration = (
-	val: css.Declaration | css.Comment,
-): val is css.Declaration => val.type === "declaration";
-
-export default function mapRule(rule: css.Rule) {
-	const declarations =
-		rule.declarations
-			?.filter(isDeclaration)
-			.map(mapDeclaration)
-			.filter((a) => !!a) ?? [];
-
-	const mergedDeclaration: DeclarationNode = deepMerge(
-		{},
-		...declarations.map((a) => a.declaration),
-	);
-
-	// meta data
-	const mergedDeclarationNames = unique(
-		declarations.map((declaration) => declaration.__meta.name),
-	);
-	const mergedStyleProps = unique(
-		declarations.flatMap((declaration) => declaration.__meta.styleProps),
-	);
-	const mergedStylePropExpressions = unique(
-		declarations.flatMap(
-			(declaration) => declaration.__meta.stylePropExpressions,
-		),
-	);
-
-	const selectors = uniqueSerialized(rule.selectors?.map(mapSelector) ?? []);
-	const groupedSelectors: Record<string, Array<Selector>> = {};
-	selectors.forEach((selector) => {
-		const existing = groupedSelectors[selector.group];
-		if (Array.isArray(existing)) {
-			existing.push(selector);
-		} else {
-			groupedSelectors[selector.group] = [selector];
-		}
-	});
-
-	return Object.keys(groupedSelectors).map((group) => {
-		const conditions = uniqueSerialized(groupedSelectors[group]!);
-		const mergedStateNames = unique(
-			conditions.flatMap((condition) => condition.__meta.stateNames),
-		);
-		const mergedConditionStyleProps = unique(
-			conditions.flatMap((condition) => condition.__meta.styleProps),
-		);
-		const mergedConditionStylePropExpressions = unique(
-			conditions.flatMap(
-				(condition) => condition.__meta.stylePropExpressions,
-			),
-		);
-
-		return {
-			conditions: conditions,
-			declarations: {
-				[group]: mergedDeclaration,
-			},
-
-			__meta: {
-				styleNames: unique(
-					conditions
-						.map((condition) => condition.style)
-						.filter(isTruthy),
-				),
-				stateNames: [
-					...unique(
-						conditions
-							.map((condition) => condition.state)
-							.filter(isTruthy),
-					),
-					...mergedStateNames,
-				],
-				groupNames: unique(
-					conditions.map((condition) => condition.group),
-				),
-				declarationNames: mergedDeclarationNames,
-				styleProps: [...mergedConditionStyleProps, ...mergedStyleProps],
-				stylePropExpressions: [
-					...mergedConditionStylePropExpressions,
-					...mergedStylePropExpressions,
-				],
-			},
-		};
-	});
-}

package/src/js/cssToRules/mapSelector.ts

@@ -1,78 +0,0 @@
-import unique from "@mapsight/lib-js/array/unique";
-import {isTruthy} from "@mapsight/lib-js/boolean";
-import {ensureNonNullable} from "@mapsight/lib-js/nonNullable";
-
-import mapSelectorPart from "./mapSelectorPart.ts";
-
-/**
- * Finds
- * A) Words incl. whitespace enclosed by matching single quotes ('), square brackets ([,]), not (:not(,)) or matching double quotes (") and
- * B) Words (groups of non-whitespace characters)
- *
- * @type {RegExp}
- */
-const REGEX_SELECTOR_PART: RegExp = /('.*?'|\[.*?]|:not\(.*?\)|".*?"|\S+)/g;
-
-export type Selector = ReturnType<typeof mapSelector>;
-
-export default function mapSelector(selector: string) {
-	const selectorParts = ensureNonNullable(selector.match(REGEX_SELECTOR_PART))
-		.map((part) => mapSelectorPart(part))
-		.filter(isTruthy);
-	const checks = unique(
-		selectorParts.map((a) => "check" in a && a.check).filter(isTruthy),
-	);
-	const mergedStateNames = unique(
-		selectorParts
-			.map((part) =>
-				"stateNames" in part.__meta
-					? part.__meta.stateNames
-					: undefined,
-			)
-			.filter(isTruthy)
-			.flat(),
-	);
-	const mergedStyleProps = unique(
-		selectorParts
-			.map((part) =>
-				"styleProps" in part.__meta
-					? part.__meta.styleProps
-					: undefined,
-			)
-			.filter(isTruthy)
-			.flat(),
-	);
-	const mergedStylePropExpressions = unique(
-		selectorParts
-			.map((part) =>
-				"stylePropExpressions" in part.__meta
-					? part.__meta.stylePropExpressions
-					: undefined,
-			)
-			.filter(isTruthy)
-			.flat(),
-	);
-
-	let style;
-	let state;
-	let group;
-	for (const part of selectorParts) {
-		if (!state && "group" in part) group = part.group;
-		if (!style && "style" in part) style = part.style;
-		if (!state && "state" in part) state = part.state;
-		if (state && style && group) break;
-	}
-
-	return {
-		style: style,
-		state: state,
-		group: group || "default",
-		checks: checks?.length ? checks : undefined,
-
-		__meta: {
-			stateNames: mergedStateNames,
-			styleProps: mergedStyleProps,
-			stylePropExpressions: mergedStylePropExpressions,
-		},
-	};
-}

package/src/js/cssToRules/mapSelectorPart.ts

@@ -1,161 +0,0 @@
-import trimQuotes from "@mapsight/lib-js/string/trimQuotes";
-
-import mapValue from "./mapValue.ts";
-
-type JsCheck = {
-	type: "js";
-	expression: string;
-	negate: boolean;
-};
-
-type GeometryTypeCheck = {
-	type: "geometryType";
-	value: string;
-	negate: boolean;
-};
-
-type ValueCheck = {
-	type: "value";
-	target: "props" | "env";
-	path: string[];
-	value?: string | number | null;
-	negate: boolean;
-};
-
-export type Check = JsCheck | GeometryTypeCheck | ValueCheck;
-
-function mapAttributeSelectorPart(
-	part: string,
-	negate = false,
-): {
-	check: Check;
-	__meta: {
-		styleProps?: string[];
-		stylePropExpressions?: string[];
-		stateNames?: string[];
-	};
-} {
-	const operands = part
-		.slice(1, -1) // remove square brackets
-		.split("="); // split by first equal sign
-	let leftHandOperand = operands?.shift()?.trim() || "";
-	const rightHandOperand = operands.length
-		? trimQuotes(operands.join("=").trim())
-		: undefined;
-
-	// special case: js expression
-	if (leftHandOperand.startsWith("|js")) {
-		return {
-			check: {
-				type: "js",
-				expression: rightHandOperand || "",
-				negate,
-			},
-			__meta: {},
-		};
-	}
-
-	// special case: geometry type
-	if (leftHandOperand === "geometry|type") {
-		const {value, __meta: valueMeta} = mapValue(rightHandOperand);
-
-		return {
-			check: {
-				type: "geometryType",
-				value: String(value ?? ""),
-				negate,
-			},
-			__meta: valueMeta,
-		};
-	}
-
-	let target: "props" | "env" = "props";
-
-	// env target
-	if (leftHandOperand.startsWith("env|")) {
-		target = "env";
-		leftHandOperand = leftHandOperand.slice(4);
-	} else if (leftHandOperand.startsWith("props|")) {
-		// trim optional prefix
-		leftHandOperand = leftHandOperand.slice(6);
-	}
-
-	// kebab case to dot separated string
-	const path = leftHandOperand.split("-");
-
-	// keep track of props used for styling
-	let stateNames: string[] = [];
-	let styleProps: string[] = [];
-	let stylePropExpressions: string[] = [];
-
-	if (target === "props") {
-		styleProps.push(path[0]!);
-	}
-
-	let value = undefined;
-	if (rightHandOperand !== undefined) {
-		const mappedValue = mapValue(rightHandOperand);
-		value = mappedValue.value;
-		styleProps = styleProps.concat(mappedValue.__meta.styleProps);
-		stylePropExpressions = stylePropExpressions.concat(
-			mappedValue.__meta.stylePropExpressions,
-		);
-
-		if (leftHandOperand === "state") {
-			stateNames = [rightHandOperand];
-		}
-	}
-
-	return {
-		check: {
-			type: "value",
-			target,
-			path,
-			value,
-			negate,
-		},
-		__meta: {
-			stateNames: stateNames,
-			styleProps: styleProps,
-			stylePropExpressions: stylePropExpressions,
-		},
-	};
-}
-
-export default function mapSelectorPart(part: string, negate = false) {
-	// Handle :not(...) negation using recursion
-	if (part.startsWith(":not(") && part.endsWith(")")) {
-		const inner = part.slice(5, -1).trim(); // remove :not( and )
-		return mapSelectorPart(inner, !negate);
-	}
-
-	const firstLetter = part.charAt(0);
-	if (firstLetter === "[") {
-		return mapAttributeSelectorPart(part, negate);
-	}
-
-	if (negate) {
-		throw new Error(
-			"Cannot negate selector part [" + part + "] with :not().",
-		);
-	}
-
-	if (firstLetter === "*") {
-		return {__meta: {}} as const;
-	}
-
-	const rest = part.slice(1);
-	if (firstLetter === ":") {
-		return {state: rest, __meta: {}} as const;
-	}
-
-	if (firstLetter === "#") {
-		return {style: rest, __meta: {}} as const;
-	}
-
-	if (firstLetter === ".") {
-		return {group: rest, __meta: {}} as const;
-	}
-
-	return null;
-}

package/src/js/cssToRules/mapValue.ts

@@ -1,84 +0,0 @@
-import uniq from "lodash/uniq.js";
-
-import {ensureNonNullable} from "@mapsight/lib-js/nonNullable";
-import trimQuotes from "@mapsight/lib-js/string/trimQuotes";
-import isNumberLike from "@mapsight/lib-js/types/isNumberLike";
-
-import type {ReplacerFn} from "../helpers/Replacer.ts";
-import Replacer from "../helpers/Replacer.ts";
-import pathToExpression from "../helpers/pathToExpression.ts";
-
-const replace: ReplacerFn = (_match, parameter) => {
-	const [search, replacement, subject] = parameter
-		.split(",")
-		.map((a) => a.trim())
-		.map(trimQuotes);
-
-	return `' + replace('${search}', '${replacement}', '${subject}') + '`;
-};
-
-const calc: ReplacerFn = (_match, parameter, replacer) => {
-	// parameter is e.g. "%%%0%%% * 5"
-	// Resolve the inner tags back to their actual string representations
-	let resolvedParam = replacer.replace(parameter);
-
-	// Clean up the string concatenations generated by the earlier `attr` pass.
-	// It extracts `props['test']` out of `' + props['test'] + '`
-	resolvedParam = resolvedParam.replace(/' \+ (.*?) \+ '/g, "$1");
-
-	return `' + (${resolvedParam}) + '`;
-};
-
-export default function mapValue(
-	value: string | number | null | undefined | boolean,
-) {
-	const meta = {
-		styleProps: [] as Array<string>,
-		stylePropExpressions: [] as Array<string>,
-	};
-
-	if (!value) {
-		return {value: null, __meta: meta};
-	}
-
-	let valueStr = String(value);
-	if (isNumberLike(value)) {
-		return {value: parseFloat(valueStr), __meta: meta};
-	}
-
-	valueStr = trimQuotes(valueStr);
-	const replacer = new Replacer([
-		[
-			"attr",
-			(_match, parameter) => {
-				const isEnv = parameter.startsWith("--env-");
-				const parameters = parameter.split("-");
-
-				if (isEnv) {
-					const restParameters = parameters.slice(3);
-					return `' + ${pathToExpression("env", restParameters)} + '`;
-				}
-
-				const expression = pathToExpression("props", parameters);
-				meta.styleProps.push(ensureNonNullable(parameters[0]));
-				meta.stylePropExpressions.push(expression);
-				return `' + ${expression} + '`;
-			},
-		],
-		["replace", replace],
-		["calc", calc],
-	]);
-	valueStr = replacer.execute(valueStr);
-	valueStr = valueStr.replace(/'/g, "\\'");
-	valueStr = replacer.replace(valueStr);
-	valueStr = `'${valueStr}'`;
-
-	return {
-		value: valueStr,
-
-		__meta: {
-			styleProps: uniq(meta.styleProps),
-			stylePropExpressions: uniq(meta.stylePropExpressions),
-		},
-	} as const;
-}

package/src/js/cssToRules.ts

@@ -1,49 +0,0 @@
-import type css from "css";
-import {parse} from "css";
-
-import unique from "@mapsight/lib-js/array/unique";
-
-import mapRule from "./cssToRules/mapRule.ts";
-
-type Meta = Record<string, unknown>;
-
-const collectMeta = <
-	TMeta extends Meta,
-	TMetaKey extends keyof TMeta = keyof Meta,
->(
-	vals: Array<{__meta: TMeta}>,
-	key: TMetaKey,
-) => {
-	const values = vals.map((v) => v.__meta[key]).flat();
-
-	return unique(values);
-};
-
-function isRule(val: css.Rule | css.Comment | css.AtRule): val is css.Rule {
-	return val.type === "rule";
-}
-
-// types: rule,
-// ignored types: media, stylesheet, comment, charset, custom-media, document, font-face,
-//                import, keyframes, keyframe, media, namespace, page, supports
-function cssOmToRules(om: css.Stylesheet) {
-	return om.stylesheet?.rules.filter(isRule).flatMap(mapRule) ?? [];
-}
-
-export type Rules = ReturnType<typeof cssToRules>;
-
-export default function cssToRules(content: string) {
-	const om = parse(content);
-	const rules = cssOmToRules(om);
-	return {
-		rules,
-		__meta: {
-			styleNames: collectMeta(rules, "styleNames"),
-			stateNames: collectMeta(rules, "stateNames"),
-			groupNames: collectMeta(rules, "groupNames"),
-			declarationNames: collectMeta(rules, "declarationNames"),
-			styleProps: collectMeta(rules, "styleProps"),
-			stylePropExpressions: collectMeta(rules, "stylePropExpressions"),
-		},
-	};
-}

package/src/js/helpers/Replacer.ts

@@ -1,50 +0,0 @@
-const RE_FUNCTION_PARAMETER = "([^\\)]*?)";
-const RE_DOUBLE_QUOTES_IN_PARIS_ONLY = '(?:(?:[^"]*"){2})*[^"]*$';
-const TAG_DELIMITER = "%%%";
-
-export type ReplacerFn = (
-	match: string,
-	parameter: string,
-	replacer: Replacer,
-) => string;
-
-export default class Replacer {
-	private replacementCounter: number = 0;
-	private replacements: Array<{tag: string; replacement: string}> = [];
-	private functions: Array<(val: string) => string> = [];
-
-	constructor(functions: Array<[string, ReplacerFn]> = []) {
-		functions.forEach(([functionName, replacer]) =>
-			this.addFunction(functionName, replacer),
-		);
-	}
-
-	addFunction(functionName: string, replacer: ReplacerFn) {
-		const regex = new RegExp(
-			`(${functionName}\\(${RE_FUNCTION_PARAMETER}\\))(?=${RE_DOUBLE_QUOTES_IN_PARIS_ONLY})`,
-			"ig",
-		);
-		const fn = (value: string): string =>
-			value.replace(regex, (match, _, parameter) => {
-				const tag =
-					TAG_DELIMITER + this.replacementCounter++ + TAG_DELIMITER;
-				const replacement = replacer(match, parameter as string, this);
-				this.replacements.push({tag, replacement});
-
-				return tag;
-			});
-		this.functions.push(fn);
-	}
-
-	execute(value: string): string {
-		return this.functions.reduce((acc, fn) => fn(acc), value);
-	}
-
-	replace(value: string): string {
-		return this.replacements.reduceRight(
-			(acc, {tag, replacement}) =>
-				acc.replace(new RegExp(tag, "g"), replacement),
-			value,
-		);
-	}
-}

package/src/js/helpers/compileDeclarationBlock.ts

@@ -1,60 +0,0 @@
-export type NodeValue = {value: string | number | boolean | null};
-
-export type BlockTree = {
-	[property: string]: BlockTree | NodeValue | null;
-};
-
-const isValueNode = (node: unknown): node is NodeValue =>
-	node !== null && typeof node === "object" && "value" in node;
-
-const getPropertyAccess = (key: string): string => {
-	const isValidIdentifier = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(key);
-	return isValidIdentifier ? `.${key}` : `["${key}"]`;
-};
-
-/**
- * Compiles a parsed Style AST block into highly optimized JS assignments.
- * @param ast The parsed style block
- * @param rootName The name of the base object (default: "declaration")
- * @param indent String used for indentation
- */
-export function compileDeclarationBlock(
-	ast: BlockTree,
-	rootName: string = "declaration",
-	indent: string = "  ",
-): string {
-	const lines: string[] = [];
-
-	function traverse(node: BlockTree, parentRef: string, path: string[]) {
-		for (const [key, child] of Object.entries(node)) {
-			const access = getPropertyAccess(key);
-
-			if (child === null) {
-				lines.push(`${indent}${parentRef}${access} = null;`);
-				continue;
-			}
-
-			if (isValueNode(child)) {
-				lines.push(
-					`${indent}${parentRef}${access} = { value: ${child.value} };`,
-				);
-			} else {
-				const newPath = [...path, key];
-				const cacheVar =
-					"_" +
-					newPath
-						.map((p) => p.replace(/[^a-zA-Z0-9]/g, ""))
-						.join("_");
-
-				lines.push(
-					`${indent}const ${cacheVar} = (${indent}${parentRef}${access} ??= {});`,
-				);
-
-				traverse(child, cacheVar, newPath);
-			}
-		}
-	}
-
-	traverse(ast, rootName, []);
-	return lines.join("");
-}

package/src/js/helpers/createModulesMapFromDependencies.ts

@@ -1,40 +0,0 @@
-import uniq from "lodash/uniq.js";
-
-import {isTruthy} from "@mapsight/lib-js/boolean";
-
-const IMPORT_PREFIX = "__vectorStyle_";
-
-const OL_IMPORT_PATH_BY_NAME: Record<string, string> = {
-	style: "ol/style/Style",
-	image: "ol/style/Image",
-	icon: "ol/style/Icon",
-	circle: "ol/style/Circle",
-	stroke: "ol/style/Stroke",
-	text: "ol/style/Text",
-	fill: "ol/style/Fill",
-	regularShape: "ol/style/RegularShape",
-};
-
-export default function createModulesMapFromDependencies(
-	declarationNames: Array<string>,
-) {
-	// @TODO: Find a better way?:
-	// special case for circle. we cannot detect fill and stroke if they are used in circle (circle-stroke-color etc.)
-	// this assumes a circle uses fill and stroke (which it might not!)
-	if (declarationNames.indexOf("circle") > -1) {
-		declarationNames.push("stroke");
-		declarationNames.push("fill");
-	}
-
-	const names = uniq(
-		declarationNames
-			.concat(["style"]) /* we always need at least ol.style.Style */
-			.filter(isTruthy),
-	).filter((name) => OL_IMPORT_PATH_BY_NAME[name]);
-
-	// prettier-ignore
-	return {
-		imports: names.map(name => `import ${IMPORT_PREFIX}${name} from '${OL_IMPORT_PATH_BY_NAME[name]}';`).join('\n'),
-		map: `{${names.map(name => `${name}: ${IMPORT_PREFIX}${name},`).join('\n')}}`,
-	};
-}

package/src/js/helpers/ensureObject.ts

@@ -1,17 +0,0 @@
-/** Replaces the value if it's falsy. */
-export default function ensureObject<T extends object, K extends keyof T>(
-	parent: T,
-	key: K,
-	base: T[K],
-): T[K] {
-	if (parent === null || parent === undefined) {
-		return base;
-	}
-
-	if (parent[key]) {
-		return parent[key];
-	}
-
-	parent[key] = base;
-	return base;
-}

package/src/js/helpers/pathToExpression.ts

@@ -1,5 +0,0 @@
-export default function pathToExpression(target: string, path: string[]) {
-	return path.length > 1
-		? `get(${target}, [${path.map((a) => `'${a}'`).join(", ")}])`
-		: `${target}['${path[0]}']`;
-}

package/src/js/helpers/uniqueSerialized.ts

@@ -1,7 +0,0 @@
-import unique from "@mapsight/lib-js/array/unique";
-
-export default function uniqueSerialized<T>(a: Array<T>): Array<T> {
-	return unique(a.map((b) => JSON.stringify(b))).map(
-		(b) => JSON.parse(b) as T,
-	);
-}

package/src/js/index.ts

@@ -1,28 +0,0 @@
-import cssToRules from "./cssToRules.ts";
-import rulesToTree from "./rulesToTree.ts";
-import defaultTemplate, {type Template} from "./template.ts";
-import treeToProgram from "./treeToProgram.ts";
-
-export type Options = {
-	template?: Template;
-	additionalData?: Record<string, string | number>;
-	baseIndent?: number;
-};
-
-export default function compileMapsightVectorStyle(
-	content: string,
-	{
-		template = defaultTemplate,
-		additionalData = {},
-		baseIndent = 2,
-	}: Options = {},
-) {
-	const rules = cssToRules(content);
-	const tree = rulesToTree(rules.rules);
-	return template({
-		__meta: rules.__meta,
-		program1: treeToProgram(tree, "hash", baseIndent),
-		program2: treeToProgram(tree, "declaration", baseIndent),
-		...additionalData,
-	});
-}