# core/registries/style.registry.ts

> 56 lines of code and 22 definitions.

Tree: Site tree
Language: typescript
Layer: infrastructure
Canonical: https://banes-lab.com/anatomy/tree#file-core-registries-style-registry-ts
Source text: https://banes-lab.com/assets/sources/source.28e7c0c33134da527a70f1621f7192a731ef228ceceb9345fd2a458d45db9697.generated.txt

## Definitions

- `declareStyle` (lexical_declaration, line 57, exported)
- `nonceOf` (lexical_declaration, line 15)
- `declarationOf` (lexical_declaration, line 36)
- `openSheet` (lexical_declaration, line 20)
- `NONCE_SELECTOR` (lexical_declaration, line 4)
- `STYLE_TAG` (lexical_declaration, line 5)
- `TOKEN_PREFIX` (lexical_declaration, line 6)
- `TOKEN_SELECTOR` (lexical_declaration, line 7)
- `EMPTY_BLOCK` (lexical_declaration, line 8)
- `declarations` (lexical_declaration, line 10)
- `sheet` (lexical_declaration, line 11)
- `opened` (lexical_declaration, line 12)
- `issued` (lexical_declaration, line 13)
- `meta` (lexical_declaration, line 16)
- `holder` (lexical_declaration, line 28)
- `{ sheet: made }` (lexical_declaration, line 31)
- `held` (lexical_declaration, line 37)
- `open` (lexical_declaration, line 41)
- `token` (lexical_declaration, line 46)
- `at` (lexical_declaration, line 47)
- `rule` (lexical_declaration, line 48)
- `declaredStyle` (lexical_declaration, line 61, exported)

## Uses

- [core/predicates/document.predicate.ts](https://banes-lab.com/source/tree/core/predicates/document.predicate.ts.md)

## Used by

- [core/observers/element.observer.ts](https://banes-lab.com/source/tree/core/observers/element.observer.ts.md)
- [presentation/components/home.component.ts](https://banes-lab.com/source/tree/presentation/components/home.component.ts.md)
- [presentation/components/reference.component.ts](https://banes-lab.com/source/tree/presentation/components/reference.component.ts.md)
- [presentation/components/stage.component.ts](https://banes-lab.com/source/tree/presentation/components/stage.component.ts.md)
- [presentation/components/step.component.ts](https://banes-lab.com/source/tree/presentation/components/step.component.ts.md)
- [presentation/components/walk.component.ts](https://banes-lab.com/source/tree/presentation/components/walk.component.ts.md)
- [presentation/renderers/chapter.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/chapter.renderer.ts.md)
- [presentation/renderers/diagram.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/diagram.renderer.ts.md)
- [presentation/widgets/reference.widget.ts](https://banes-lab.com/source/tree/presentation/widgets/reference.widget.ts.md)

## Source

```typescript
import { createElement } from "#core/factories/element.factory";
import { isStaticRender } from "#core/predicates/document.predicate";

const NONCE_SELECTOR = "meta[property='csp-nonce']";
const STYLE_TAG = "style";
const TOKEN_PREFIX = "styled-";
const TOKEN_SELECTOR = ".";
const EMPTY_BLOCK = " {}";

const declarations = new WeakMap<Element, CSSStyleDeclaration>();
let sheet: CSSStyleSheet | null = null;
let opened = false;
let issued = 0;

const nonceOf = function nonceOf(): string {
    const meta = document.querySelector(NONCE_SELECTOR);
    return meta instanceof HTMLMetaElement ? meta.nonce : "";
};

const openSheet = function openSheet(): CSSStyleSheet | null {
    if (opened) {
        return sheet;
    }
    opened = true;
    if (isStaticRender()) {
        return null;
    }
    const holder = createElement(STYLE_TAG);
    holder.nonce = nonceOf();
    document.head.append(holder);
    const { sheet: made } = holder;
    sheet = made;
    return sheet;
};

const declarationOf = function declarationOf(element: Element): CSSStyleDeclaration | null {
    const held = declarations.get(element);
    if (held !== undefined) {
        return held;
    }
    const open = openSheet();
    if (open === null) {
        return null;
    }
    issued += 1;
    const token = TOKEN_PREFIX + String(issued);
    const at = open.insertRule(TOKEN_SELECTOR + token + EMPTY_BLOCK, open.cssRules.length);
    const rule = open.cssRules[at];
    if (!(rule instanceof CSSStyleRule)) {
        return null;
    }
    element.classList.add(token);
    declarations.set(element, rule.style);
    return rule.style;
};

export const declareStyle = function declareStyle(element: Element, property: string, value: string): void {
    declarationOf(element)?.setProperty(property, value);
};

export const declaredStyle = function declaredStyle(element: Element, property: string): string {
    return declarations.get(element)?.getPropertyValue(property) ?? "";
};
```