# core/converters/diagram.converter.ts

> 40 lines of code and 15 definitions.

Tree: Bane's Lab Build Scripts
Language: typescript
Layer: processing
Canonical: https://banes-lab.com/anatomy/build-scripts#file-build-scripts-core-converters-diagram-converter-ts
Source text: https://banes-lab.com/source/build-scripts/core/converters/diagram.converter.ts.txt

Listed in [core/converters](https://banes-lab.com/api/source/build-scripts/core/converters.md), after [core/converters/config.converter.ts](https://banes-lab.com/source/build-scripts/core/converters/config.converter.ts.md) and before [core/converters/document.converter.ts](https://banes-lab.com/source/build-scripts/core/converters/document.converter.ts.md).

## Definitions

- `themeVariables` (lexical_declaration, line 24, exported)
- `TOKEN_PREFIX` (lexical_declaration, line 6)
- `DECLARATION_END` (lexical_declaration, line 7)
- `ASSIGN` (lexical_declaration, line 8)
- `SVG_OPEN` (lexical_declaration, line 9)
- `tokenValues` (lexical_declaration, line 11, exported)
- `values` (lexical_declaration, line 12, exported)
- `line` (lexical_declaration, line 14, exported)
- `assign` (lexical_declaration, line 15, exported)
- `variables` (lexical_declaration, line 25, exported)
- `value` (lexical_declaration, line 27, exported)
- `withWalk` (lexical_declaration, line 36, exported)
- `order` (lexical_declaration, line 37, exported)
- `at` (lexical_declaration, line 38, exported)
- `end` (lexical_declaration, line 42, exported)

## Contained in

- [core/converters](https://banes-lab.com/anatomy/build-scripts/folder-build-scripts-core-converters.md)

## Uses

- [configuration/strings/diagram.strings.ts](https://banes-lab.com/source/build-scripts/configuration/strings/diagram.strings.ts.md)

## Linked from

- [configuration/strings](https://banes-lab.com/anatomy/build-scripts/folder-build-scripts-configuration-strings.md)

## Source

```typescript
import type { DiagramWalk } from "#types/diagram.types";
import { JSDOM } from "jsdom";
import { THEME_TOKENS } from "#configuration/constants/diagram.constants";
import { undeclaredToken } from "#configuration/strings/diagram.strings";

const TOKEN_PREFIX = "--";
const DECLARATION_END = ";";
const ASSIGN = ":";
const SVG_OPEN = "<svg";

export const tokenValues = function tokenValues(css: string): ReadonlyMap<string, string> {
    const values = new Map<string, string>();
    for (const raw of css.split("\n")) {
        const line = raw.trim();
        const assign = line.indexOf(ASSIGN);
        if (!line.startsWith(TOKEN_PREFIX) || assign === -1 || !line.endsWith(DECLARATION_END)) {
            continue;
        }
        values.set(line.slice(0, assign), line.slice(assign + 1, -DECLARATION_END.length).trim());
    }
    return values;
};

export const themeVariables = function themeVariables(tokens: ReadonlyMap<string, string>): Record<string, string> {
    const variables: Record<string, string> = { background: "transparent" };
    for (const [variable, token] of THEME_TOKENS) {
        const value = tokens.get(token);
        if (value === undefined) {
            throw new Error(undeclaredToken(token));
        }
        variables[variable] = value;
    }
    return variables;
};

export const withWalk = function withWalk(markup: string, walk: DiagramWalk): string {
    const order = walk.orderOf(JSDOM.fragment(markup));
    const at = markup.indexOf(SVG_OPEN);
    if (order.length === 0 || at === -1) {
        return markup;
    }
    const end = at + SVG_OPEN.length;
    return `${markup.slice(0, end)} ${walk.attribute}="${order}"${markup.slice(end)}`;
};
```