@mapsight/vector-style-compiler 8.0.0

package/src/data/custom-css-properties.json

@@ -0,0 +1,200 @@
+[
+	{
+		"name": "circle-fill-color",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "circle-radius",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "circle-stroke-color",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "circle-stroke-width",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "fill-color",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-anchorx",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-anchory",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-offsetx",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-offsety",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-opacity",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-scale",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-sizex",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-sizey",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-snaptopixel",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "icon-src",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "image-circle-fill-color",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "image-circle-radius",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "image-type",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "stroke-color",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "stroke-linedash",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-alignment",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-fill-color",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-font",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-offsetx",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-offsety",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-placement",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-stroke-color",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-stroke-width",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-testalign",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-text",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-textalign",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "text-textbaseline",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	},
+	{
+		"name": "zindex",
+		"description": "",
+		"deprecated": false,
+		"sinceVersion": "v0.0.0"
+	}
+]

package/src/js/cli.ts

@@ -0,0 +1,98 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import {parseArgs} from "node:util";
+
+import {watch} from "chokidar";
+import * as sass from "sass";
+
+import vectorStyleCompiler from "./index.ts";
+
+interface CliOptions {
+	output: string;
+	name: string;
+	include: string[];
+	watch: boolean;
+}
+
+const debounceAsync = (fn: () => Promise<void>, delay: number) => {
+	let timer: NodeJS.Timeout;
+	return () => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			fn().catch(console.error);
+		}, delay);
+	};
+};
+
+async function compile(input: string, opts: CliOptions) {
+	let css: string;
+	if (input.endsWith(".scss") || input.endsWith(".sass")) {
+		const result = sass.compile(input, {
+			loadPaths: [
+				"node_modules",
+				...opts.include.map((p: string) => path.resolve(p)),
+			],
+			style: "expanded" as const,
+			quietDeps: true,
+			silenceDeprecations: ["legacy-js-api"],
+			sourceMap: false,
+		});
+		css = result.css.toString();
+	} else {
+		css = await fs.readFile(input, "utf8");
+	}
+	const outDir = path.resolve(opts.output);
+	const cssPath = path.join(outDir, `${opts.name}.css`);
+	const jsPath = path.join(outDir, `${opts.name}.js`);
+	await fs.mkdir(outDir, {recursive: true});
+	await fs.writeFile(cssPath, css);
+	const js = vectorStyleCompiler(css);
+	await fs.writeFile(jsPath, js);
+	console.log(`Updated: ${cssPath}, ${jsPath}`);
+}
+
+const {values, positionals} = parseArgs({
+	options: {
+		output: {
+			type: "string",
+			short: "o",
+			default: "tmp/mapsight-vector-styles",
+		},
+		name: {
+			type: "string",
+			short: "n",
+			default: "default",
+		},
+		include: {
+			type: "string",
+			short: "i",
+			default: "node_modules",
+		},
+		watch: {
+			type: "boolean",
+			default: false,
+		},
+	},
+	allowPositionals: true,
+});
+
+const input = positionals[0];
+
+if (!input) {
+	throw new Error("input SCSS or CSS file is required");
+}
+
+const options: CliOptions = {
+	output: values.output,
+	name: values.name,
+	include: values.include.split(","),
+	watch: values.watch,
+};
+
+await compile(input, options);
+
+if (options.watch) {
+	const debouncedCompile = debounceAsync(() => compile(input, options), 300);
+	watch(input).on("change", debouncedCompile);
+	console.log(`Watching ${input}...`);
+}

package/src/js/cssToRules/mapDeclaration.ts

@@ -0,0 +1,45 @@
+import type {Declaration as CssDeclaration} from "css";
+
+import mapValue from "./mapValue.ts";
+
+export type DeclarationLeaf = {value: string | number | null};
+
+export interface DeclarationNode {
+	[key: string]: DeclarationNode | DeclarationLeaf;
+}
+
+export type Declaration = {
+	declaration: DeclarationNode;
+	__meta: ReturnType<typeof mapValue>["__meta"] & {
+		name: string;
+	};
+};
+
+export default function mapDeclaration(
+	declaration: CssDeclaration,
+): Declaration {
+	const {value, __meta: valueMeta} = mapValue(declaration.value);
+
+	if (!declaration.property) {
+		throw new Error("Declaration is lacking property");
+	}
+
+	const keyParts = declaration.property.split("-");
+
+	// build deep object
+	const result: DeclarationNode = {};
+	let current: DeclarationNode = result;
+	for (let i = 0; i < keyParts.length - 1; i++) {
+		const part = keyParts[i]!;
+		const next: DeclarationNode = {};
+		current[part] = next;
+		current = next;
+	}
+	const lastPart = keyParts[keyParts.length - 1]!;
+	current[lastPart] = {value};
+
+	return {
+		declaration: result,
+		__meta: {name: keyParts[0]!, ...valueMeta},
+	};
+}

package/src/js/cssToRules/mapRule.ts

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,161 @@
+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;
+}