@kirana-style/angular 0.0.0-stage → 0.1.0

package/schemas/dev-server.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Dev Server Target",
+  "description": "Dev Server target options for Build Facade.",
+  "type": "object",
+  "properties": {
+    "buildTarget": {
+      "type": "string",
+      "description": "A build builder target to serve in the format of `project:target[:configuration]`. You can also pass in more than one configuration name as a comma-separated list. Example: `project:target:production,staging`.",
+      "pattern": "^[^:\\s]*:[^:\\s]*(:[^\\s]+)?$"
+    },
+    "port": {
+      "type": "number",
+      "description": "Port to listen on.",
+      "default": 4200
+    },
+    "host": {
+      "type": "string",
+      "description": "Host to listen on.",
+      "default": "localhost"
+    },
+    "proxyConfig": {
+      "type": "string",
+      "description": "Proxy configuration file. For more information, see https://angular.dev/tools/cli/serve#proxying-to-a-backend-server."
+    },
+    "ssl": {
+      "type": "boolean",
+      "description": "Serve using HTTPS.",
+      "default": false
+    },
+    "sslKey": {
+      "type": "string",
+      "description": "SSL key to use for serving HTTPS."
+    },
+    "sslCert": {
+      "type": "string",
+      "description": "SSL certificate to use for serving HTTPS."
+    },
+    "allowedHosts": {
+      "description": "The hosts that the development server will respond to. This option sets the Vite option of the same name. For further details: https://vite.dev/config/server-options.html#server-allowedhosts",
+      "default": [],
+      "oneOf": [
+        {
+          "type": "array",
+          "description": "A list of hosts that the development server will respond to.",
+          "items": {
+            "type": "string"
+          }
+        },
+        {
+          "type": "boolean",
+          "description": "Indicates that all hosts are allowed. This is not recommended and a security risk."
+        }
+      ]
+    },
+    "define": {
+      "description": "Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries. The value will be used directly. String values must be put in quotes. Identifiers within Angular metadata such as Component Decorators will not be replaced.",
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "headers": {
+      "type": "object",
+      "description": "Custom HTTP headers to be added to all responses.",
+      "propertyNames": {
+        "pattern": "^[-_A-Za-z0-9]+$"
+      },
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Opens the url in default browser.",
+      "default": false,
+      "alias": "o"
+    },
+    "verbose": {
+      "type": "boolean",
+      "description": "Adds more details to output logging."
+    },
+    "liveReload": {
+      "type": "boolean",
+      "description": "Whether to reload the page on change, using live-reload.",
+      "default": true
+    },
+    "servePath": {
+      "type": "string",
+      "description": "The pathname where the application will be served."
+    },
+    "hmr": {
+      "type": "boolean",
+      "description": "Enable hot module replacement. Defaults to the value of 'liveReload'. Currently, only global and component stylesheets are supported."
+    },
+    "watch": {
+      "type": "boolean",
+      "description": "Rebuild on change.",
+      "default": true
+    },
+    "poll": {
+      "type": "number",
+      "description": "Enable and define the file watching poll time period in milliseconds."
+    },
+    "inspect": {
+      "default": false,
+      "description": "Activate debugging inspector. This option only has an effect when 'SSR' or 'SSG' are enabled.",
+      "oneOf": [
+        {
+          "type": "string",
+          "description": "Activate the inspector on host and port in the format of `[[host:]port]`. See the security warning in https://nodejs.org/docs/latest-v22.x/api/cli.html#warning-binding-inspector-to-a-public-ipport-combination-is-insecure regarding the host parameter usage."
+        },
+        { "type": "boolean" }
+      ]
+    },
+    "prebundle": {
+      "description": "Enable and control the Vite-based development server's prebundling capabilities. To enable prebundling, the Angular CLI cache must also be enabled.",
+      "default": true,
+      "oneOf": [
+        { "type": "boolean" },
+        {
+          "type": "object",
+          "properties": {
+            "exclude": {
+              "description": "List of package imports that should not be prebundled by the development server. The packages will be bundled into the application code itself. Note: specifying `@foo/bar` marks all paths within the `@foo/bar` package as excluded, including sub-paths like `@foo/bar/baz`.",
+              "type": "array",
+              "items": { "type": "string" }
+            }
+          },
+          "additionalProperties": false,
+          "required": ["exclude"]
+        }
+      ]
+    }
+  },
+  "additionalProperties": false,
+  "required": ["buildTarget"]
+}

package/src/application.d.ts

@@ -0,0 +1,3 @@
+import { applicationBuilder } from "./builders.ts";
+/** `@kirana-style/angular:application`, loaded by the Angular CLI from builders.json. */
+export default applicationBuilder;

package/src/application.js

@@ -0,0 +1,3 @@
+import { applicationBuilder } from "./builders.js";
+/** `@kirana-style/angular:application`, loaded by the Angular CLI from builders.json. */
+export default applicationBuilder;

package/src/builders.d.ts

@@ -0,0 +1,19 @@
+import type { Builder, BuilderContext, BuilderOutput } from "@angular-devkit/architect";
+import type { ApplicationBuilderOptions, DevServerBuilderOptions } from "@angular/build";
+import type { Mirror } from "./mirror.ts";
+/**
+ * Application options with the mirror's replacements and the stylesheet added. The entry files
+ * (`browser`, `server`) are not replaced: Angular type-checks only the files its tsconfig lists, and
+ * an entry it reads from a replacement it would bundle unchecked. An entry holds no styles in an
+ * Angular app; the components it imports are replaced.
+ */
+export declare function withMirror<Options extends {
+    fileReplacements?: unknown[];
+    styles?: unknown[];
+    browser?: unknown;
+    server?: unknown;
+}>(options: Options, mirror: Mirror): Options;
+export declare function application(options: ApplicationBuilderOptions, context: BuilderContext): AsyncIterable<BuilderOutput>;
+export declare function devServer(options: DevServerBuilderOptions, context: BuilderContext): AsyncIterable<BuilderOutput>;
+export declare const applicationBuilder: Builder;
+export declare const devServerBuilder: Builder;

package/src/builders.js

@@ -0,0 +1,85 @@
+/**
+ * The Angular CLI builders (`@kirana-style/angular:application`, `@kirana-style/angular:dev-server`): Angular's
+ * own, given Kirana's mirror (`mirror.ts`) as `fileReplacements` and its stylesheet in `styles`.
+ *
+ *   "build": { "builder": "@kirana-style/angular:application", "options": { … as before … } }
+ *   "serve": { "builder": "@kirana-style/angular:dev-server", … }
+ *
+ * The dev server is Angular's, run with a context whose build target's options carry the mirror:
+ * Angular reads those options itself and compiles them with its internal application build.
+ */
+import path from "node:path";
+import { createBuilder } from "@angular-devkit/architect";
+import { buildApplication, executeDevServerBuilder } from "@angular/build";
+import { STYLESHEET, createMirror, watchMirror } from "./mirror.js";
+/** The project's source folder, from its configuration (`src` unless it says otherwise). */
+async function sourceRootOf(context) {
+    const project = context.target?.project;
+    const metadata = project ? await context.getProjectMetadata(project) : {};
+    const root = typeof metadata.root === "string" ? metadata.root : "";
+    return typeof metadata.sourceRoot === "string"
+        ? metadata.sourceRoot
+        : path.join(root, "src");
+}
+/**
+ * Application options with the mirror's replacements and the stylesheet added. The entry files
+ * (`browser`, `server`) are not replaced: Angular type-checks only the files its tsconfig lists, and
+ * an entry it reads from a replacement it would bundle unchecked. An entry holds no styles in an
+ * Angular app; the components it imports are replaced.
+ */
+export function withMirror(options, mirror) {
+    const entries = new Set([options.browser, options.server].map((entry) => path.normalize(String(entry))));
+    return {
+        ...options,
+        fileReplacements: [
+            ...(options.fileReplacements ?? []),
+            ...mirror.replacements.filter((replacement) => !entries.has(path.normalize(replacement.replace))),
+        ],
+        styles: [...(options.styles ?? []), STYLESHEET],
+    };
+}
+/** Prints the mirror's warnings and errors through the builder's logger (infos stay quiet). */
+function report(context, mirror) {
+    for (const message of mirror.messages())
+        if (message.startsWith("error"))
+            context.logger.error(message);
+        else if (message.startsWith("warning"))
+            context.logger.warn(message);
+}
+export async function* application(options, context) {
+    const sourceRoot = await sourceRootOf(context);
+    const mirror = await createMirror(context.workspaceRoot, sourceRoot, {
+        minify: options.optimization !== false,
+    });
+    report(context, mirror);
+    const watcher = options.watch
+        ? watchMirror(context.workspaceRoot, sourceRoot, mirror, () => report(context, mirror))
+        : undefined;
+    try {
+        yield* buildApplication(withMirror(options, mirror), context);
+    }
+    finally {
+        watcher?.close();
+    }
+}
+export async function* devServer(options, context) {
+    const sourceRoot = await sourceRootOf(context);
+    const mirror = await createMirror(context.workspaceRoot, sourceRoot);
+    report(context, mirror);
+    const watcher = watchMirror(context.workspaceRoot, sourceRoot, mirror, () => report(context, mirror));
+    // Angular reads the build target's options through the context; these carry the mirror.
+    const getTargetOptions = context.getTargetOptions.bind(context);
+    const wrapped = Object.assign(Object.create(context), {
+        getTargetOptions: async (target) => withMirror(await getTargetOptions(target), mirror),
+    });
+    try {
+        yield* executeDevServerBuilder(options, wrapped);
+    }
+    finally {
+        watcher.close();
+    }
+}
+// Typed as Architect's `Builder`: the inferred type names `@angular-devkit/core`'s `JsonObject`,
+// which this package does not depend on, so a declaration file could not spell it.
+export const applicationBuilder = createBuilder(application);
+export const devServerBuilder = createBuilder(devServer);

package/src/dev-server.d.ts

@@ -0,0 +1,3 @@
+import { devServerBuilder } from "./builders.ts";
+/** `@kirana-style/angular:dev-server`, loaded by the Angular CLI from builders.json. */
+export default devServerBuilder;

package/src/dev-server.js

@@ -0,0 +1,3 @@
+import { devServerBuilder } from "./builders.js";
+/** `@kirana-style/angular:dev-server`, loaded by the Angular CLI from builders.json. */
+export default devServerBuilder;

package/src/fesm2022/directive.d.ts

@@ -0,0 +1,39 @@
+/**
+ * `[sx]` for Angular templates (D-068). A template reaches only its component's members, so `sx`
+ * cannot be compiled away there as it is in JSX and in Vue, Svelte or Astro templates: this
+ * directive merges the handles at runtime with Kirana's runtime instead, and keeps the element's own
+ * classes and styles.
+ *
+ * The class carries Angular's partial declarations (`ɵɵngDeclareFactory`, `ɵɵngDeclareDirective`),
+ * the form `ngc` emits for a library and Angular's linker compiles in every app build. They are
+ * written here rather than generated because this workspace's TypeScript (7) has no JavaScript API
+ * for `ngc` to run on; the Analog and Angular CLI examples build them in CI. The static types are the
+ * ones `ngc` would declare, so templates type-check `[sx]` against `Sx`. The file sits under
+ * `fesm2022/`, the Angular Package Format's folder, because Analog links only files on such a path.
+ */
+import * as i0 from "@angular/core";
+import type { Sx } from "@kirana-style/core";
+import type { Handle } from "@kirana-style/core/internal";
+/** The class-name prefix (`names.prefix`); `k` unless the app provides another (`provideKirana`). */
+export declare const KIRANA_PREFIX: i0.InjectionToken<string>;
+/** Providers for an app whose `kirana.config` sets another class-name prefix. */
+export declare function provideKirana(options: {
+    prefix: string;
+}): i0.Provider[];
+export declare class SxDirective implements i0.OnChanges {
+    #private;
+    /**
+     * The handles: one, or an array with falsy guards (`[styles.card, active && styles.on]`). Compiled
+     * handles are class strings (the Angular CLI builders type-check the compiled copy), so both are
+     * accepted.
+     */
+    sx: Sx | Handle;
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SxDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SxDirective, "[sx]", never, {
+        sx: {
+            alias: "sx";
+            required: false;
+        };
+    }, {}, never, never, true, never>;
+}

package/src/fesm2022/directive.js

@@ -0,0 +1,59 @@
+/**
+ * `[sx]` for Angular templates (D-068). A template reaches only its component's members, so `sx`
+ * cannot be compiled away there as it is in JSX and in Vue, Svelte or Astro templates: this
+ * directive merges the handles at runtime with Kirana's runtime instead, and keeps the element's own
+ * classes and styles.
+ *
+ * The class carries Angular's partial declarations (`ɵɵngDeclareFactory`, `ɵɵngDeclareDirective`),
+ * the form `ngc` emits for a library and Angular's linker compiles in every app build. They are
+ * written here rather than generated because this workspace's TypeScript (7) has no JavaScript API
+ * for `ngc` to run on; the Analog and Angular CLI examples build them in CI. The static types are the
+ * ones `ngc` would declare, so templates type-check `[sx]` against `Sx`. The file sits under
+ * `fesm2022/`, the Angular Package Format's folder, because Analog links only files on such a path.
+ */
+import * as i0 from "@angular/core";
+import { applySx } from "../sx.js";
+/** The class-name prefix (`names.prefix`); `k` unless the app provides another (`provideKirana`). */
+export const KIRANA_PREFIX = new i0.InjectionToken("kirana prefix", {
+    providedIn: "root",
+    factory: () => "k",
+});
+/** Providers for an app whose `kirana.config` sets another class-name prefix. */
+export function provideKirana(options) {
+    return [{ provide: KIRANA_PREFIX, useValue: options.prefix }];
+}
+export class SxDirective {
+    /**
+     * The handles: one, or an array with falsy guards (`[styles.card, active && styles.on]`). Compiled
+     * handles are class strings (the Angular CLI builders type-check the compiled copy), so both are
+     * accepted.
+     */
+    sx;
+    #element = i0.inject(i0.ElementRef).nativeElement;
+    #renderer = i0.inject(i0.Renderer2);
+    #prefix = i0.inject(KIRANA_PREFIX);
+    #applied = { classes: new Set(), styles: new Set() };
+    ngOnChanges() {
+        this.#applied = applySx(this.#renderer, this.#element, this.#applied, this.sx, this.#prefix);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({
+        minVersion: "12.0.0",
+        // A literal, as the linker reads it: the Angular version these were written against.
+        version: "22.2.1",
+        ngImport: i0,
+        type: SxDirective,
+        deps: [],
+        target: i0.ɵɵFactoryTarget.Directive,
+    });
+    static ɵdir = i0.ɵɵngDeclareDirective({
+        minVersion: "14.0.0",
+        // A literal, as the linker reads it: the Angular version these were written against.
+        version: "22.2.1",
+        type: SxDirective,
+        isStandalone: true,
+        selector: "[sx]",
+        inputs: { sx: "sx" },
+        usesOnChanges: true,
+        ngImport: i0,
+    });
+}

package/src/index.d.ts

@@ -0,0 +1,3 @@
+export { KIRANA_PREFIX, SxDirective, provideKirana, } from "./fesm2022/directive.ts";
+export { applySx, runtimeFor } from "./sx.ts";
+export type { Applied, Renderer } from "./sx.ts";

package/src/index.js

@@ -0,0 +1,2 @@
+export { KIRANA_PREFIX, SxDirective, provideKirana, } from "./fesm2022/directive.js";
+export { applySx, runtimeFor } from "./sx.js";

package/src/mirror.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Kirana for the Angular CLI (D-068, `design-notes/angular.md`). Angular's application builder
+ * compiles TypeScript from its own program and offers no hook to change a source first, but it
+ * honours `fileReplacements`, by redirecting module resolution to the replacement file. So the
+ * builders keep a mirror of the source folder in `.kirana/`: every file copied, the ones that hold
+ * styles compiled by Kirana. A replacement's relative imports and `templateUrl`s then resolve inside
+ * the mirror, where every file exists. Every TypeScript file is replaced, the stylesheet is written
+ * beside the mirror, and in watch mode each change is mirrored again — Angular, which watches the
+ * replacements, rebuilds from there.
+ */
+import { watch as fsWatch } from "node:fs";
+/** Where the mirror lives, under the workspace root. */
+export declare const MIRROR = ".kirana";
+/** The stylesheet the builders add to `styles`. */
+export declare const STYLESHEET: string;
+/** Every file under `directory`, relative to it, without installed packages or hidden folders. */
+export declare function walk(directory: string, prefix?: string): string[];
+export type Mirror = {
+    /** `fileReplacements` for every TypeScript file of the source folder. */
+    replacements: {
+        replace: string;
+        with: string;
+    }[];
+    /** Mirrors one changed or deleted file (and what read from it); returns whether anything changed. */
+    update: (file: string) => boolean;
+    /** Diagnostics from the last pass, formatted. */
+    messages: () => string[];
+};
+/** Builds the mirror of `sourceRoot` (relative to `root`) and writes the stylesheet. */
+export declare function createMirror(root: string, sourceRoot: string, options?: {
+    minify?: boolean;
+}): Promise<Mirror>;
+/** Mirrors every change under the source folder until closed (watch builds and the dev server). */
+export declare function watchMirror(root: string, sourceRoot: string, mirror: Mirror, onUpdate: () => void, watch?: typeof fsWatch): {
+    close: () => void;
+};

package/src/mirror.js

@@ -0,0 +1,107 @@
+/**
+ * Kirana for the Angular CLI (D-068, `design-notes/angular.md`). Angular's application builder
+ * compiles TypeScript from its own program and offers no hook to change a source first, but it
+ * honours `fileReplacements`, by redirecting module resolution to the replacement file. So the
+ * builders keep a mirror of the source folder in `.kirana/`: every file copied, the ones that hold
+ * styles compiled by Kirana. A replacement's relative imports and `templateUrl`s then resolve inside
+ * the mirror, where every file exists. Every TypeScript file is replaced, the stylesheet is written
+ * beside the mirror, and in watch mode each change is mirrored again — Angular, which watches the
+ * replacements, rebuilds from there.
+ */
+import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, watch as fsWatch, writeFileSync, } from "node:fs";
+import path from "node:path";
+import { Driver, formatDiagnostic } from "@kirana-style/compiler";
+import { SKIPPED, shouldCompile } from "@kirana-style/compiler/host";
+/** Where the mirror lives, under the workspace root. */
+export const MIRROR = ".kirana";
+/** The stylesheet the builders add to `styles`. */
+export const STYLESHEET = path.join(MIRROR, "kirana.css");
+/** Every file under `directory`, relative to it, without installed packages or hidden folders. */
+export function walk(directory, prefix = "") {
+    const out = [];
+    for (const entry of readdirSync(path.join(directory, prefix), {
+        withFileTypes: true,
+    })) {
+        const relative = path.join(prefix, entry.name);
+        if (entry.isDirectory()) {
+            if (!SKIPPED.has(entry.name) && !entry.name.startsWith("."))
+                out.push(...walk(directory, relative));
+        }
+        else
+            out.push(relative);
+    }
+    return out;
+}
+const SCRIPT = /\.[cm]?tsx?$/;
+/** Builds the mirror of `sourceRoot` (relative to `root`) and writes the stylesheet. */
+export async function createMirror(root, sourceRoot, options = {}) {
+    const driver = await Driver.create({ root });
+    const source = path.join(root, sourceRoot);
+    const target = path.join(root, MIRROR, sourceRoot);
+    const reported = [];
+    const texts = new Map();
+    const mirror = (relative) => {
+        const from = path.join(source, relative);
+        const to = path.join(target, relative);
+        if (!existsSync(from)) {
+            driver.remove(from);
+            rmSync(to, { force: true });
+            return;
+        }
+        mkdirSync(path.dirname(to), { recursive: true });
+        const text = SCRIPT.test(relative) ? readFileSync(from, "utf8") : undefined;
+        if (text === undefined || !shouldCompile(from, text, driver.libraries)) {
+            copyFileSync(from, to);
+            return;
+        }
+        const result = driver.transform(from, text);
+        texts.set(path.relative(root, from).replaceAll("\\", "/"), text);
+        reported.push(...result.diagnostics);
+        writeFileSync(to, result.code ?? text);
+    };
+    const stylesheet = () => {
+        reported.push(...driver.diagnostics());
+        const css = driver.stylesheet(options.minify ?? false);
+        const file = path.join(root, STYLESHEET);
+        const changed = !existsSync(file) || readFileSync(file, "utf8") !== css;
+        if (changed)
+            writeFileSync(file, css);
+        return changed;
+    };
+    rmSync(target, { recursive: true, force: true });
+    const files = walk(source);
+    for (const relative of files)
+        mirror(relative);
+    stylesheet();
+    return {
+        replacements: files
+            .filter((relative) => SCRIPT.test(relative) && !relative.endsWith(".d.ts"))
+            .map((relative) => ({
+            replace: path.join(sourceRoot, relative),
+            with: path.join(MIRROR, sourceRoot, relative),
+        })),
+        update(file) {
+            reported.length = 0;
+            const absolute = path.resolve(root, file);
+            // The changed file, and every module that read a value from it.
+            const affected = [absolute, ...driver.invalidate(absolute)];
+            for (const changed of affected)
+                mirror(path.relative(source, changed));
+            return stylesheet();
+        },
+        messages: () => reported.map((diagnostic) => formatDiagnostic(diagnostic, texts.get(diagnostic.file))),
+    };
+}
+/** Mirrors every change under the source folder until closed (watch builds and the dev server). */
+export function watchMirror(root, sourceRoot, mirror, onUpdate, watch = fsWatch) {
+    return watch(path.join(root, sourceRoot), { recursive: true }, (_, name) => {
+        const relative = String(name);
+        // Editors' swap files and tools' folders are not sources.
+        if (relative
+            .split(/[\\/]/)
+            .some((part) => part.startsWith(".") || SKIPPED.has(part)))
+            return;
+        mirror.update(path.join(sourceRoot, relative));
+        onUpdate();
+    });
+}

package/src/sx.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What `[sx]` does to an element, without Angular: merge the handles with Kirana's runtime (the same
+ * one compiled modules call), then bring the element's classes and custom properties from what the
+ * last value applied to what this one applies. Only what `[sx]` added is ever removed, so the
+ * element's own `class` and `style` stay.
+ */
+import { runtime } from "@kirana-style/core/internal";
+/** The part of Angular's `Renderer2` this needs. */
+export type Renderer = {
+    addClass: (element: unknown, name: string) => void;
+    removeClass: (element: unknown, name: string) => void;
+    setStyle: (element: unknown, name: string, value: string, flags?: number) => void;
+    removeStyle: (element: unknown, name: string, flags?: number) => void;
+};
+/** What the last value applied: its classes and its custom properties. */
+export type Applied = {
+    classes: Set<string>;
+    styles: Set<string>;
+};
+/** `RendererStyleFlags2.DashCase`: the name is a custom property, set as written. */
+export declare const DASH_CASE = 2;
+/** One runtime per class-name prefix, as each compiled module creates one. */
+export declare function runtimeFor(prefix: string): ReturnType<typeof runtime>;
+/** Applies `value` (a handle, or an array of handles and falsy guards); returns what is applied now. */
+export declare function applySx(renderer: Renderer, element: unknown, previous: Applied, value: unknown, prefix: string): Applied;

package/src/sx.js

@@ -0,0 +1,38 @@
+/**
+ * What `[sx]` does to an element, without Angular: merge the handles with Kirana's runtime (the same
+ * one compiled modules call), then bring the element's classes and custom properties from what the
+ * last value applied to what this one applies. Only what `[sx]` added is ever removed, so the
+ * element's own `class` and `style` stay.
+ */
+import { runtime } from "@kirana-style/core/internal";
+/** `RendererStyleFlags2.DashCase`: the name is a custom property, set as written. */
+export const DASH_CASE = 2;
+const runtimes = new Map();
+/** One runtime per class-name prefix, as each compiled module creates one. */
+export function runtimeFor(prefix) {
+    let created = runtimes.get(prefix);
+    if (!created) {
+        created = runtime(prefix, "class");
+        runtimes.set(prefix, created);
+    }
+    return created;
+}
+/** Applies `value` (a handle, or an array of handles and falsy guards); returns what is applied now. */
+export function applySx(renderer, element, previous, value, prefix) {
+    const handles = (Array.isArray(value) ? value : [value]);
+    const props = runtimeFor(prefix).sx(handles, [], []);
+    const classes = new Set((props.class ?? "").split(" ").filter(Boolean));
+    const styles = props.style ?? {};
+    for (const name of previous.classes)
+        if (!classes.has(name))
+            renderer.removeClass(element, name);
+    for (const name of classes)
+        if (!previous.classes.has(name))
+            renderer.addClass(element, name);
+    for (const name of previous.styles)
+        if (!(name in styles))
+            renderer.removeStyle(element, name, DASH_CASE);
+    for (const [name, setting] of Object.entries(styles))
+        renderer.setStyle(element, name, setting, DASH_CASE);
+    return { classes, styles: new Set(Object.keys(styles)) };
+}

package/src/vite.d.ts

@@ -0,0 +1,5 @@
+import type { KiranaViteOptions } from "@kirana-style/vite";
+import type { Plugin } from "vite";
+export type { KiranaViteOptions as KiranaAngularOptions };
+export declare function kiranaAngular(options?: KiranaViteOptions): Plugin[];
+export default kiranaAngular;

package/src/vite.js

@@ -0,0 +1,15 @@
+/**
+ * Kirana for Analog, Angular on Vite (D-068). Angular compiles each TypeScript file from its own
+ * program on disk, so a plugin that ran first would change nothing it reads. This is Kirana's Vite
+ * plugin run after Angular's instead: it compiles the JavaScript Angular emitted for each module,
+ * where `css()` calls and their imports are as written. The stylesheet and its hot updates work as
+ * they do in every Vite app.
+ *
+ *   plugins: [analog(), kiranaAngular()]
+ */
+import kirana from "@kirana-style/vite";
+export function kiranaAngular(options = {}) {
+    const [main, late] = kirana(options);
+    return [{ ...main, enforce: "post" }, late];
+}
+export default kiranaAngular;