@mapsight/vector-style-compiler 8.0.0

package/README.md

@@ -0,0 +1,366 @@
+# Mapsight vector styles
+
+Creates JavaScript-Code that can be used as a styleFunction in mapsight by
+transforming a subset of CSS.
+
+## How it Works
+
+The package compiles a CSS subset into a JavaScript module providing an efficient OpenLayers `styleFunction` with built-in caching.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                         DEVELOPER WORKFLOW                      │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  Define styles in CSS subset (supports custom properties):     │
+│                                                                 │
+│    * { fill-color: red; }                                      │
+│    #myStyle { circle-radius: 5; }                              │
+│    :selected { stroke-color: green; }                          │
+│    [state="hover"] { fill-color: orange; }                     │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────────┐
+│              COMPILE TIME (CSS → JavaScript)                    │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  Input: CSS string                                              │
+│  Output: JavaScript function that renders to OL Styles         │
+│                                                                 │
+│  Pipeline:                                                      │
+│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐            │
+│  │CSS String│→ │Parse to │→ │Build    │→ │Generate │            │
+│  │          │  │Rules    │  │Tree     │  │Code     │            │
+│  └─────────┘  └─────────┘  └─────────┘  └─────────┘            │
+│                                              ↓                  │
+│                                         ┌──────────────┐         │
+│                                         │Wrap in       │         │
+│                                         │Template:     │         │
+│                                         │ import OL    │         │
+│                                         │ import cache │         │
+│                                         │ export fn   │         │
+│                                         └──────────────┘         │
+│                                              ↓                  │
+│                                         Pre-compiled            │
+│                                      JavaScript Module          │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────────┐
+│              RUNTIME (Features → OL Styles)                     │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  Input: Feature (geometry + properties), Environment            │
+│  Output: Array of OL Style objects                              │
+│                                                                 │
+│  For each feature:                                              │
+│                                                                 │
+│  1. Filter feature properties                                   │
+│  2. Compute hashes (env, props, geometry type)                  │
+│  3. Check 3-level LRU cache                                     │
+│  4. Execute declarationFunction if cache miss                  │
+│  5. Build OL Style objects                                      │
+│  6. Return styles                                               │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Supported CSS Syntax
+
+### Supported Selector Types
+
+```css
+/* Universal selector (any feature) */
+* { ... }
+
+/* Style selector (ID) */
+#myStyleName { ... }
+
+/* State selector (pseudo-class) */
+::selected { ... }
+::highlighted { ... }
+
+/* Props selector (attribute) */
+[state="hover"] { ... }                   /* Simple equality */
+[props|name="Road"] { ... }               /* Access nested props */
+[geometry|type="Point"] { ... }           /* Check geometry type */
+[env|zoom="5"] { ... }                    /* Access environment */
+[|js="props['id'] > 100"] { ... }         /* JavaScript expression */
+
+/* Negation */
+:not([state="hover"]) { ... }
+:not([geometry|type="LineString"]) { ... }
+
+/* Combinations (space = AND) */
+#myStyle [state="hover"] { ... }          /* myStyle AND state==hover */
+[geometry|type="Point"] .icon { ... }     /* Geometry AND group */
+```
+
+### Property Examples
+
+```css
+/* MapBox-like custom properties */
+fill-color: red;
+fill-color: attr(color); /* From props['color'] */
+fill-color: attr(--env-primaryColor); /* From env['primaryColor'] */
+
+circle-radius: 5;
+circle-radius: calc(zoom * 2 + 3); /* JavaScript expression */
+
+stroke-color: replace("pattern", "X", "attr(id)"); /* String replace */
+
+text-text: attr(--env-title); /* Dynamic text */
+
+/* Complex nested properties */
+icon-src: "path/to/icon.png";
+icon-sizex: 32;
+icon-sizey: 32;
+icon-offsetx: attr(offsetX);
+```
+
+See full list of supported properties in [Custom CSS properties](#custom-css-properties).
+
+## Caching
+
+High-level 3-level LRU caching strategy:
+
+- **Level 1 (Coarse)**: env + geometry type + props (~95% hit, size 100)
+- **Level 2 (Fine)**: declaration hashes (~92% hit, size 100)
+- **Level 3**: OL Style objects (clone, ~98% hit, size 100)
+
+**Example** (10k features, 50 styles, 10 zooms):
+
+- 9500 L1 hits: instant
+- 400 L1 miss → L2 hit: fast clone/construct
+- 100 full execution
+
+Average <1μs/feature, configurable sizes.
+
+## Docs
+
+### Custom CSS properties
+
+<!-- CUSTOM_CSS_PROPERTIES_DOCS: -->
+
+#### circle-fill-color
+
+Description:
+
+Since version: v0.0.0
+
+#### circle-radius
+
+Description:
+
+Since version: v0.0.0
+
+#### circle-stroke-color
+
+Description:
+
+Since version: v0.0.0
+
+#### circle-stroke-width
+
+Description:
+
+Since version: v0.0.0
+
+#### fill-color
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-anchorx
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-anchory
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-offsetx
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-offsety
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-opacity
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-scale
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-sizex
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-sizey
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-snaptopixel
+
+Description:
+
+Since version: v0.0.0
+
+#### icon-src
+
+Description:
+
+Since version: v0.0.0
+
+#### image-circle-fill-color
+
+Description:
+
+Since version: v0.0.0
+
+#### image-circle-radius
+
+Description:
+
+Since version: v0.0.0
+
+#### image-type
+
+Description:
+
+Since version: v0.0.0
+
+#### stroke-color
+
+Description:
+
+Since version: v0.0.0
+
+#### stroke-linedash
+
+Description:
+
+Since version: v0.0.0
+
+#### text-alignment
+
+Description:
+
+Since version: v0.0.0
+
+#### text-fill-color
+
+Description:
+
+Since version: v0.0.0
+
+#### text-font
+
+Description:
+
+Since version: v0.0.0
+
+#### text-offsetx
+
+Description:
+
+Since version: v0.0.0
+
+#### text-offsety
+
+Description:
+
+Since version: v0.0.0
+
+#### text-placement
+
+Description:
+
+Since version: v0.0.0
+
+#### text-stroke-color
+
+Description:
+
+Since version: v0.0.0
+
+#### text-stroke-width
+
+Description:
+
+Since version: v0.0.0
+
+#### text-testalign
+
+Description:
+
+Since version: v0.0.0
+
+#### text-text
+
+Description:
+
+Since version: v0.0.0
+
+#### text-textalign
+
+Description:
+
+Since version: v0.0.0
+
+#### text-textbaseline
+
+Description:
+
+Since version: v0.0.0
+
+#### zindex
+
+Description:
+
+Since version: v0.0.0
+
+<!-- :CUSTOM_CSS_PROPERTIES_DOCS -->
+
+#### Adding the custom properties to WebStorm/PHPStorm/IntelliJ
+
+Go to `Settings -> Editor -> Inspections` and search for `Unknown CSS property`. Then add the following string under `Options -> Custom CSS Properties`:
+
+<code>
+
+<!-- CUSTOM_CSS_PROPERTIES_LIST: -->
+
+circle-fill-color,circle-radius,circle-stroke-color,circle-stroke-width,fill-color,icon-anchorx,icon-anchory,icon-offsetx,icon-offsety,icon-opacity,icon-scale,icon-sizex,icon-sizey,icon-snaptopixel,icon-src,image-circle-fill-color,image-circle-radius,image-type,stroke-color,stroke-linedash,text-alignment,text-fill-color,text-font,text-offsetx,text-offsety,text-placement,text-stroke-color,text-stroke-width,text-testalign,text-text,text-textalign,text-textbaseline,zindex<!-- :CUSTOM_CSS_PROPERTIES_LIST -->
+</code>
+
+## Benchmarking
+
+- `pnpm bench`
+    - Runs the canonical workload simulation benchmark across `nodejs`, `chromium`, `firefox`, and `webkit` via headless Playwright.
+    - Includes memory output for all engines (`nodejs` heap usage; browser memory via OS RSS sampling on the Playwright browser process using `pidusage`).
+    - Browser RSS is process-level memory (not JS-heap-only), so use it for trend/comparison signals.
+    - For stronger GC signal in Node, run with exposed GC:
+        - `NODE_OPTIONS=--expose-gc pnpm bench`
+    - You can increase run length / repeat count for more stable memory trends:
+        - `BENCH_WORKLOAD_ROUNDS=30 BENCH_WORKLOAD_TICKS=500 pnpm bench`

package/bin/vector-style-compiler.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import "../dist/cli.js";

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/js/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,83 @@
+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.js";
+const debounceAsync = (fn, delay) => {
+    let timer;
+    return () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn().catch(console.error);
+        }, delay);
+    };
+};
+async function compile(input, opts) {
+    let css;
+    if (input.endsWith(".scss") || input.endsWith(".sass")) {
+        const result = sass.compile(input, {
+            loadPaths: [
+                "node_modules",
+                ...opts.include.map((p) => path.resolve(p)),
+            ],
+            style: "expanded",
+            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 = {
+    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}...`);
+}
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/js/cli.ts"],"names":[],"mappings":"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"}

package/dist/cssToRules/mapDeclaration.d.ts

@@ -0,0 +1,16 @@
+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;
+//# sourceMappingURL=mapDeclaration.d.ts.map

package/dist/cssToRules/mapDeclaration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapDeclaration.d.ts","sourceRoot":"","sources":["../../src/js/cssToRules/mapDeclaration.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,IAAI,cAAc,EAAC,MAAM,KAAK,CAAC;AAEvD,OAAO,QAAQ,MAAM,eAAe,CAAC;AAErC,MAAM,MAAM,eAAe,GAAG;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;CAAC,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,GAAG,eAAe,CAAC;CACjD;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,GAAG;QAC/C,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CACrC,WAAW,EAAE,cAAc,GACzB,WAAW,CAyBb"}

package/dist/cssToRules/mapDeclaration.js

@@ -0,0 +1,24 @@
+import mapValue from "./mapValue.js";
+export default function mapDeclaration(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 = {};
+    let current = result;
+    for (let i = 0; i < keyParts.length - 1; i++) {
+        const part = keyParts[i];
+        const next = {};
+        current[part] = next;
+        current = next;
+    }
+    const lastPart = keyParts[keyParts.length - 1];
+    current[lastPart] = { value };
+    return {
+        declaration: result,
+        __meta: { name: keyParts[0], ...valueMeta },
+    };
+}
+//# sourceMappingURL=mapDeclaration.js.map

package/dist/cssToRules/mapDeclaration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapDeclaration.js","sourceRoot":"","sources":["../../src/js/cssToRules/mapDeclaration.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,eAAe,CAAC;AAerC,MAAM,CAAC,OAAO,UAAU,cAAc,CACrC,WAA2B;IAE3B,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAE/D,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;IACpD,CAAC;IAED,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjD,oBAAoB;IACpB,MAAM,MAAM,GAAoB,EAAE,CAAC;IACnC,IAAI,OAAO,GAAoB,MAAM,CAAC;IACtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC9C,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAE,CAAC;QAC1B,MAAM,IAAI,GAAoB,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QACrB,OAAO,GAAG,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAC,KAAK,EAAC,CAAC;IAE5B,OAAO;QACN,WAAW,EAAE,MAAM;QACnB,MAAM,EAAE,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAE,EAAE,GAAG,SAAS,EAAC;KAC1C,CAAC;AACH,CAAC"}

package/dist/cssToRules/mapRule.d.ts

@@ -0,0 +1,41 @@
+import type css from "css";
+import type { DeclarationNode } from "./mapDeclaration.ts";
+export default function mapRule(rule: css.Rule): {
+    conditions: {
+        style: string | undefined;
+        state: string | undefined;
+        group: string;
+        checks: ({
+            type: "js";
+            expression: string;
+            negate: boolean;
+        } | {
+            type: "geometryType";
+            value: string;
+            negate: boolean;
+        } | {
+            type: "value";
+            target: "props" | "env";
+            path: string[];
+            value?: string | number | null;
+            negate: boolean;
+        })[] | undefined;
+        __meta: {
+            stateNames: string[];
+            styleProps: string[];
+            stylePropExpressions: string[];
+        };
+    }[];
+    declarations: {
+        [x: string]: DeclarationNode;
+    };
+    __meta: {
+        styleNames: string[];
+        stateNames: string[];
+        groupNames: string[];
+        declarationNames: string[];
+        styleProps: string[];
+        stylePropExpressions: string[];
+    };
+}[];
+//# sourceMappingURL=mapRule.d.ts.map

package/dist/cssToRules/mapRule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapRule.d.ts","sourceRoot":"","sources":["../../src/js/cssToRules/mapRule.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAO3B,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAQzD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkF7C"}

package/dist/cssToRules/mapRule.js

@@ -0,0 +1,60 @@
+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.js";
+import mapDeclaration from "./mapDeclaration.js";
+import mapSelector from "./mapSelector.js";
+const isDeclaration = (val) => val.type === "declaration";
+export default function mapRule(rule) {
+    const declarations = rule.declarations
+        ?.filter(isDeclaration)
+        .map(mapDeclaration)
+        .filter((a) => !!a) ?? [];
+    const mergedDeclaration = 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 = {};
+    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,
+                ],
+            },
+        };
+    });
+}
+//# sourceMappingURL=mapRule.js.map

package/dist/cssToRules/mapRule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapRule.js","sourceRoot":"","sources":["../../src/js/cssToRules/mapRule.ts"],"names":[],"mappings":"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"}

package/dist/cssToRules/mapSelector.d.ts

@@ -0,0 +1,27 @@
+export type Selector = ReturnType<typeof mapSelector>;
+export default function mapSelector(selector: string): {
+    style: string | undefined;
+    state: string | undefined;
+    group: string;
+    checks: ({
+        type: "js";
+        expression: string;
+        negate: boolean;
+    } | {
+        type: "geometryType";
+        value: string;
+        negate: boolean;
+    } | {
+        type: "value";
+        target: "props" | "env";
+        path: string[];
+        value?: string | number | null;
+        negate: boolean;
+    })[] | undefined;
+    __meta: {
+        stateNames: string[];
+        styleProps: string[];
+        stylePropExpressions: string[];
+    };
+};
+//# sourceMappingURL=mapSelector.d.ts.map

package/dist/cssToRules/mapSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapSelector.d.ts","sourceRoot":"","sources":["../../src/js/cssToRules/mapSelector.ts"],"names":[],"mappings":"AAeA,MAAM,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,QAAQ,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;EA4DnD"}