ferrovue 0.6.0 → 0.7.0

package/dist/plugins/scoped.d.ts

@@ -4,9 +4,19 @@ import { type Plugin } from "../plugin.ts";
 interface ScopedRun {
     mode: ScopeIdMode;
     viteRoot: string;
+    production: boolean;
     ids: Map<Component, string>;
+    cssVars: Map<Component, {
+        id: string;
+        vars: string[];
+    }>;
     slotted: Set<Component>;
 }
 export declare function scopeIdOf(comp: Component): string | null;
+/** The id `@vitejs/plugin-vue` gives a component, `descriptor.id`: a hash of its path from Vite's
+ * root, followed by its source unless `mode` hashes the path alone. */
+export declare function componentId(file: string, source: string, mode: ScopeIdMode, viteRoot: string): string;
+/** The component's id, `componentId`, as the configuration computes it. */
+export declare function scopeHash(file: string, source: string): string;
 export declare const scoped: Plugin<ScopedRun>;
 export {};

package/dist/plugins/scoped.js

@@ -7,14 +7,20 @@ import { runOf } from "../plugin.js";
 export function scopeIdOf(comp) {
     return runOf(scoped).ids.get(comp) ?? null;
 }
-function scopeHash(file, source) {
-    const { mode, viteRoot } = runOf(scoped);
+/** The id `@vitejs/plugin-vue` gives a component, `descriptor.id`: a hash of its path from Vite's
+ * root, followed by its source unless `mode` hashes the path alone. */
+export function componentId(file, source, mode, viteRoot) {
     const path = relative(viteRoot, resolvePath(file)).split(sep).join("/");
     return createHash("sha256")
         .update(mode === "filepath" ? path : path + source)
         .digest("hex")
         .slice(0, 8);
 }
+/** The component's id, `componentId`, as the configuration computes it. */
+export function scopeHash(file, source) {
+    const { mode, viteRoot } = runOf(scoped);
+    return componentId(file, source, mode, viteRoot);
+}
 function flowOf(comp, ssr, children) {
     const calls = [];
     const outlets = [];
@@ -106,19 +112,26 @@ export const scoped = {
     configure: (config, root) => ({
         mode: config.scopeId ?? "filepath-source",
         viteRoot: resolvePath(root, config.viteRoot ?? "."),
+        production: config.isProduction ?? true,
         ids: new Map(),
+        cssVars: new Map(),
         slotted: new Set(),
     }),
     sfc(comp, descriptor, file, source) {
         const run = runOf(scoped);
+        const hash = descriptor.styles.some((st) => st.scoped) || descriptor.cssVars.length ? scopeHash(file, source) : null;
         if (descriptor.styles.some((st) => st.scoped))
-            run.ids.set(comp, `data-v-${scopeHash(file, source)}`);
+            run.ids.set(comp, `data-v-${hash}`);
+        if (descriptor.cssVars.length)
+            run.cssVars.set(comp, { id: `data-v-${hash}`, vars: descriptor.cssVars });
         if (descriptor.slotted)
             run.slotted.add(comp);
     },
     templateOptions(comp) {
+        const run = runOf(scoped);
         const id = scopeIdOf(comp);
-        return { id: id ?? comp.name, scoped: id !== null, slotted: runOf(scoped).slotted.has(comp) };
+        const vars = run.cssVars.get(comp);
+        return { id: id ?? vars?.id ?? comp.name, scoped: id !== null, slotted: run.slotted.has(comp), ssrCssVars: vars?.vars ?? [], isProd: run.production };
     },
     analyse: (read) => scopeFlow(read),
     childIds,

package/dist/plugins/shared-types.js

@@ -1,7 +1,8 @@
 import { ctx } from "../context.js";
 import { typesSource } from "../rust.js";
+import { typeWritten } from "../typescript.js";
 import {} from "../plugin.js";
 export const sharedTypes = {
     name: "types",
-    modules: () => (ctx.typeStructs.size || ctx.typeConsts.size ? [["types.rs", typesSource()]] : []),
+    modules: () => ([...ctx.typeStructs.keys()].some(typeWritten) || ctx.typeConsts.size ? [["types.rs", typesSource()]] : []),
 };

package/dist/plugins/stores.js

@@ -1,8 +1,9 @@
-import { parse as parseJs } from "@babel/parser";
-import { readdirSync, readFileSync } from "node:fs";
-import { basename, dirname, join, relative, resolve } from "node:path";
+import { readFileSync } from "node:fs";
+import { basename, dirname, join, resolve } from "node:path";
+import { relativePath } from "../paths.js";
 import { absence, blankComponent, BOOL, fail, failIn, FLOAT, GenError, INT, opt, sameTy, snake, STR, tagAst, UNDEF } from "../model.js";
 import { ctx } from "../context.js";
+import { listDir, parseTs } from "../files.js";
 import { ONE_NOTHING, structOf, tyOfTs, typesImports } from "../typescript.js";
 import { patternNames, setupStatement } from "../script.js";
 import { expr, fieldVal } from "../expr.js";
@@ -17,12 +18,12 @@ function storeImport(comp, from) {
 }
 function readStores(root, dir) {
     const run = runOf(piniaStores);
-    const files = readdirSync(join(root, dir)).filter((f) => f.endsWith(".ts") && !f.endsWith(".test.ts")).toSorted();
+    const files = listDir(root, dir, "stores").filter((f) => f.endsWith(".ts") && !f.endsWith(".test.ts")).toSorted();
     for (const f of files) {
         const path = join(root, dir, f);
-        const comp = storeHome(relative(root, path));
+        const comp = storeHome(relativePath(root, path));
         comp.source = readFileSync(path, "utf8");
-        const ast = parseJs(comp.source, { sourceType: "module", plugins: ["typescript"] }).program.body;
+        const ast = parseTs(comp);
         tagAst(ast, "source");
         typesImports(comp, ast);
         const decls = ast.map((st) => (st.type === "ExportNamedDeclaration" ? st.declaration : st)).filter(Boolean);

package/dist/rust.d.ts

@@ -1,11 +1,19 @@
 import { type Component, type N, type Struct, type Ty } from "./model.ts";
 export declare function needsLifetime(ty: Ty, comp: Component, seen?: Set<string>): boolean;
 export declare function structLifetime(st: Struct, comp: Component): boolean;
+export declare function localTy(ty: Ty, comp: Component): string;
 export declare function rustTy(ty: Ty, comp: Component): string;
 export declare function structSource(st: Struct, comp: Component, doc: string): string;
+/** The version of generated code this compiler writes, which `mod.rs` hands `ferrovue::__compat!`:
+ * the highest version the `ferrovue` crate of the same release supports. RELEASING.md says when
+ * it changes. */
+export declare const GENERATED_VERSION = 1;
+/** How every file ferrovue writes begins. */
+export declare const GENERATED = "// @generated by ferrovue";
 export declare function header(source: string, edit?: string): string;
 export declare function textLen(comp: Component, place: string, ty: Ty, seen?: Set<string>): string[];
 export declare function isIsland(comp: Component): boolean;
-export declare function componentSource(comp: Component, ast: N[], ssr: string, components: Map<string, Component>): string;
+/** The component's module, built once nothing the server renders reaches more of its interfaces. */
+export declare function componentSource(comp: Component, ast: N[], ssr: string, components: Map<string, Component>): () => string;
 export declare function modSource(comps: Component[], modules: string[]): string;
 export declare function typesSource(): string;

package/dist/rust.js

@@ -2,11 +2,12 @@ import { parse as parseJs } from "@babel/parser";
 import { basename } from "node:path";
 import { blankComponent, fail, GenError, rustStr, snake, tagAst, takesAttrs } from "./model.js";
 import { ctx, INLINE_HTML } from "./context.js";
-import { lookupStruct } from "./typescript.js";
+import { lookupStruct, typeWritten } from "./typescript.js";
 import { childOf } from "./expr.js";
 import { Emitter } from "./emitter.js";
 import { occurrences } from "./parens.js";
 import { statements } from "./template.js";
+import { inlineCssVars } from "./styles.js";
 import { slotFieldBorrows, slotFieldTy, slotTypeName } from "./slots.js";
 import { extraParams, fieldInit, takesSlots } from "./children.js";
 import { paramsOf, renderParams, slotContextOf, slotFieldsOf } from "./plugin.js";
@@ -39,6 +40,9 @@ export function needsLifetime(ty, comp, seen = new Set()) {
 export function structLifetime(st, comp) {
     return st.fields.some((f) => needsLifetime(f.ty, comp, new Set([st.name])));
 }
+export function localTy(ty, comp) {
+    return rustTy(ty, comp).replace(/\bCow<'a, /g, "std::borrow::Cow<").replace(/'a\b/g, "'_");
+}
 export function rustTy(ty, comp) {
     switch (ty.k) {
         case "str":
@@ -134,8 +138,14 @@ ${fields}
 }
 ${ctx.builders ? `\n${builderSource(st, comp, life)}\n` : ""}`;
 }
+/** The version of generated code this compiler writes, which `mod.rs` hands `ferrovue::__compat!`:
+ * the highest version the `ferrovue` crate of the same release supports. RELEASING.md says when
+ * it changes. */
+export const GENERATED_VERSION = 1;
+/** How every file ferrovue writes begins. */
+export const GENERATED = "// @generated by ferrovue";
 export function header(source, edit = "the `.vue` file") {
-    return `// @generated by ferrovue from ${source}. Do not edit: change ${edit} and run
+    return `${GENERATED} from ${source}. Do not edit: change ${edit} and run
 // \`ferrovue\`.
 `;
 }
@@ -174,8 +184,14 @@ export function textLen(comp, place, ty, seen = new Set()) {
             return [];
     }
 }
+function manyArgs(count) {
+    return count > 7 ? "#[allow(clippy::too_many_arguments)]\n" : "";
+}
+function renderParamCount(comp) {
+    return (takesSlots(comp) ? 1 : 0) + paramsOf(comp).length;
+}
 function renderSource(comp, life, args, e) {
-    const doc = "/// Write the component's server render into `out`.\n";
+    const doc = `/// Write the component's server render into \`out\`.\n${manyArgs(2 + renderParamCount(comp))}`;
     const props = e.reads("props", 0) ? "props" : "_props";
     const unread = (name) => {
         const shadow = e.lines.findIndex((l) => l.trimStart().startsWith(`let ${name} = `));
@@ -194,13 +210,14 @@ function renderSource(comp, life, args, e) {
 
 /// [\`render\`], with ${what}.
 #[doc(hidden)]
-pub fn render_scoped(out: &mut String, ${props}: &Props${life}${extraParams(comp, unread)}, ${attrs}: ${ty}) {
+${manyArgs(3 + renderParamCount(comp))}pub fn render_scoped(out: &mut String, ${props}: &Props${life}${extraParams(comp, unread)}, ${attrs}: ${ty}) {
 ${e.lines.join("\n")}
 }`;
 }
 export function isIsland(comp) {
     return !takesSlots(comp) && comp.takes.size === 0;
 }
+/** The component's module, built once nothing the server renders reaches more of its interfaces. */
 export function componentSource(comp, ast, ssr, components) {
     if (takesAttrs(comp) && comp.inheritAttrs && comp.attrsDropped) {
         fail(comp, "FV0416", `a root \`<Transition>\` or \`<KeepAlive>\` around a \`v-if\` in ${comp.name}, which a parent passes attributes: Vue's server drops them, where its client puts them on the element; set \`inheritAttrs: false\` and bind \`$attrs\` on the element`, comp.attrsDropped);
@@ -216,7 +233,7 @@ export function componentSource(comp, ast, ssr, components) {
     const opening = [...preludes.flatMap((p) => p.before), ...lets, ...preludes.flatMap((p) => p.after)];
     for (const l of opening)
         e.stmt(l);
-    statements(scope, e, fn.body.body);
+    statements(scope, e, inlineCssVars(comp, fn.body.body));
     for (let i = opening.length - 1; i >= 0; i--) {
         const name = /^let (\w+)/.exec(opening[i])?.[1];
         if (name !== undefined && !e.reads(name, i + 1))
@@ -232,11 +249,6 @@ export function componentSource(comp, ast, ssr, components) {
     const named = life ? "<'a>" : "";
     const owned = life ? "<'a>" : "";
     const ownedLife = life ? "'a" : "'static";
-    const structs = [...comp.structs.values()]
-        .filter((st) => st.name !== "Props" && !st.slot)
-        .map((st) => structSource(st, comp, `/// \`${st.name}\` in \`${basename(comp.file)}\`.\n`))
-        .join("\n");
-    const usesCow = /Cow</.test(structs + structSource(comp.props, comp, ""));
     const plain = isIsland(comp);
     const context = slotContextOf(comp);
     const contextTys = context.map((p) => `, ${p.ty}`).join("");
@@ -310,20 +322,28 @@ pub fn into_island${owned}(props: Props${named}) -> fv::Html<${ownedLife}, Props
 }
 `
         : `/// The component's markup, for a maud page that shows it.
-pub fn html${gen}(props: &'p Props${named}${params}) -> fv::Html<'p, Props${named}, impl Fn(&mut String, &Props${named}) + 'p> {
+${manyArgs(1 + renderParamCount(comp))}pub fn html${gen}(props: &'p Props${named}${params}) -> fv::Html<'p, Props${named}, impl Fn(&mut String, &Props${named}) + 'p> {
     fv::Html::markup(props, move |out: &mut String, props: &Props${named}| render(out, props${args}))
 }
 `;
-    return `${header(comp.file)}
+    const render = renderSource(comp, life, args, e);
+    return () => {
+        const structs = [...comp.structs.values()]
+            .filter((st) => st.name !== "Props" && !st.slot && (!comp.typeDecls.has(st.name) || comp.reached.has(st.name)))
+            .map((st) => structSource(st, comp, `/// \`${st.name}\` in \`${basename(comp.file)}\`.\n`))
+            .join("\n");
+        const usesCow = /Cow</.test(structs + structSource(comp.props, comp, ""));
+        return `${header(comp.file)}
 ${usesCow ? "use std::borrow::Cow;\n\n" : ""}use ferrovue as fv;
 
 /// The component's name, as \`data-island\` carries it.
 pub const NAME: &str = ${rustStr(comp.name)};
 
 ${structs ? structs + "\n" : ""}${structSource(comp.props, comp, `/// The props \`${basename(comp.file)}\` declares.\n`)}
-${slotsStruct}${renderSource(comp, life, args, e)}
+${slotsStruct}${render}
 
 ${wrappers}`;
+    };
 }
 function readsFixture(c) {
     return takesSlots(c) || paramsOf(c).some((p) => p.test.fixture);
@@ -401,6 +421,8 @@ ${defaults.map((d) => `${d}\n\n`).join("")}    fn slot(&self, name: &str) -> Opt
 ${ctx.builders ? "// `into_` forms, `NAME`, a constructor and a setter per optional prop) and an app calls only what\n// it needs." : "// `into_` forms and `NAME`) and an app calls only what it needs."}
 #![allow(dead_code)]
 
+ferrovue::__compat!(${GENERATED_VERSION});
+
 ${comps.map((c) => `pub mod ${c.module};`).join("\n")}${modules.map((m) => `\npub mod ${m.replace(/\.rs$/, "")};`).join("")}
 ${fixture}
 ${renderParams()
@@ -420,8 +442,9 @@ ${arms}
 }
 export function typesSource() {
     const home = blankComponent("types", "types", "types", ctx.typeStructs);
-    const files = [...new Set([...ctx.typeFiles.values(), ...[...ctx.typeConsts.values()].map((c) => c.file)])].toSorted();
-    const structs = [...ctx.typeStructs.values()]
+    const written = [...ctx.typeStructs.values()].filter((st) => typeWritten(st.name));
+    const files = [...new Set([...written.map((st) => ctx.typeFiles.get(st.name)), ...[...ctx.typeConsts.values()].map((c) => c.file)])].toSorted();
+    const structs = written
         .map((st) => structSource(st, home, `/// \`${st.name}\` in \`${ctx.typeFiles.get(st.name)}\`.\n`))
         .join("\n");
     const consts = [...ctx.typeConsts.values()].map((c) => `${c.text}\n`).join("");

package/dist/schema.d.ts

@@ -0,0 +1,25 @@
+/** A key or option that still works and goes in the next major release. */
+export interface Deprecation {
+    /** The version that deprecated it. */
+    since: string;
+    /** What to write instead, as the warning names it: `` `router.routes` ``. */
+    use: string;
+}
+/** The part of JSON Schema (draft-07) that describes `ferrovue.config.json`, with `deprecated` naming
+ * what replaces a key. Descriptions come from the TSDoc of `Config` when `schema.json` is written. */
+export interface Schema {
+    type?: "string" | "boolean" | "integer" | "object" | "array";
+    enum?: readonly string[];
+    default?: unknown;
+    minimum?: number;
+    items?: Schema;
+    properties?: Record<string, Schema>;
+    required?: readonly string[];
+    additionalProperties?: false | Schema;
+    oneOf?: readonly Schema[];
+    deprecated?: Deprecation;
+}
+/** The types a helper or twin takes, as the configuration spells them. */
+export declare const TYPE_NAMES: readonly string[];
+/** What `ferrovue.config.json` may hold: the keys the compiler reads, their types and defaults. */
+export declare const CONFIG_SCHEMA: Schema;

package/dist/schema.js

@@ -0,0 +1,73 @@
+const STRING = { type: "string" };
+/** The types a helper or twin takes, as the configuration spells them. */
+export const TYPE_NAMES = ["string", "string?", "int", "int?", "float", "float?", "bool"];
+const TYPE_NAME = { type: "string", enum: TYPE_NAMES };
+const ROUTES = { oneOf: [STRING, { type: "object", properties: { pages: STRING }, required: ["pages"], additionalProperties: false }] };
+/** What `ferrovue.config.json` may hold: the keys the compiler reads, their types and defaults. */
+export const CONFIG_SCHEMA = {
+    type: "object",
+    properties: {
+        $schema: STRING,
+        components: STRING,
+        out: STRING,
+        helpers: {
+            type: "object",
+            properties: {
+                module: STRING,
+                functions: {
+                    type: "object",
+                    additionalProperties: {
+                        type: "object",
+                        properties: { rust: STRING, params: { type: "array", items: TYPE_NAME }, returns: TYPE_NAME, maxLen: { type: "integer", minimum: 0, default: 0 } },
+                        required: ["rust", "params", "returns"],
+                        additionalProperties: false,
+                    },
+                },
+            },
+            required: ["module", "functions"],
+            additionalProperties: false,
+        },
+        twins: {
+            type: "object",
+            additionalProperties: {
+                type: "object",
+                properties: { rust: STRING, props: { type: "object", additionalProperties: TYPE_NAME }, slots: { type: "array", items: STRING } },
+                required: ["rust"],
+                additionalProperties: false,
+            },
+        },
+        trustedHtml: STRING,
+        routes: ROUTES,
+        router: {
+            type: "object",
+            properties: {
+                routes: ROUTES,
+                base: { type: "string", default: "" },
+                linkActiveClass: { type: "string", default: "router-link-active" },
+                linkExactActiveClass: { type: "string", default: "router-link-exact-active" },
+            },
+            required: ["routes"],
+            additionalProperties: false,
+        },
+        stores: STRING,
+        clientDirectives: { type: "array", items: STRING },
+        i18n: {
+            type: "object",
+            properties: { messages: STRING, locale: { type: "string", default: "en" }, fallbackLocale: { oneOf: [STRING, { type: "array", items: STRING }] } },
+            required: ["messages"],
+            additionalProperties: false,
+        },
+        scopeId: { type: "string", enum: ["filepath", "filepath-source"], default: "filepath-source" },
+        viteRoot: { type: "string", default: "." },
+        isProduction: { type: "boolean", default: true },
+        cssModules: {
+            type: "object",
+            properties: { generateScopedName: STRING, hashPrefix: { type: "string", default: "" }, context: STRING },
+            required: ["generateScopedName"],
+            additionalProperties: false,
+        },
+        builders: { type: "boolean", default: true },
+    },
+    required: ["components", "out"],
+    additionalProperties: false,
+};

package/dist/script.js

@@ -3,8 +3,8 @@ import { fail, nothing, GenError, snake, takesAttrs, UNDEF } from "./model.js";
 import { CONFIG_FILE, ctx } from "./context.js";
 import { definePropsType, resolveImport, tyOfTs } from "./typescript.js";
 import { constOfDecl, declareConsts } from "./constants.js";
-import { rustTy } from "./rust.js";
-import { expr, fieldVal } from "./expr.js";
+import { localTy } from "./rust.js";
+import { expr, fieldVal, typedBy } from "./expr.js";
 import { collected, heldList } from "./lists.js";
 import { bare, operand, UNARY } from "./parens.js";
 import { known } from "./narrowing.js";
@@ -53,8 +53,8 @@ export function setupSource(init) {
         return setupSource(init.expression);
     return init;
 }
-function localTy(ty, comp) {
-    return rustTy(ty, comp).replace(/\bCow<'a, /g, "std::borrow::Cow<").replace(/'a\b/g, "'_");
+function statedTy(init) {
+    return init.type === "TSAsExpression" || init.type === "TSSatisfiesExpression" ? init.typeAnnotation : undefined;
 }
 function emptyRef(comp, init) {
     if (init?.type !== "CallExpression" || init.callee.type !== "Identifier" || !["ref", "shallowRef"].includes(init.callee.name))
@@ -281,10 +281,12 @@ export function scopeFor(comp, ast, components) {
                 scope.propsIdent = local;
                 continue;
             }
-            const source = setupSource(init0);
             const isRef = init0.type === "CallExpression" && init0.callee.type === "Identifier" && ["ref", "shallowRef", "computed"].includes(init0.callee.name);
             if (isRef)
                 scope.refs.add(local);
+            const typed = isRef ? init0.typeParameters?.params?.[0] : (d.id.typeAnnotation?.typeAnnotation ?? statedTy(init0));
+            const untyped = setupSource(init0);
+            const source = untyped && typed ? typedBy(untyped, typed) : untyped;
             let v;
             try {
                 const empty = emptyRef(comp, init0);
@@ -306,6 +308,11 @@ export function scopeFor(comp, ast, components) {
             }
             const name = `s_${snake(local).replace(/^r#/, "")}`;
             const lone = v.lone ? { lone: true } : {};
+            if (v.slice) {
+                lets.push(`let ${name} = ${bare(v.code)};`);
+                scope.setup.set(local, { code: name, ty: v.ty, slice: true, ...lone });
+                continue;
+            }
             if (v.ty.k === "list" && v.iter !== undefined) {
                 lets.push(`let ${name} = ${collected(v)};`);
                 scope.setup.set(local, heldList(name, v.ty.of, v.lone));

package/dist/slots.js

@@ -87,6 +87,8 @@ export function slotFieldValue(s, v, n) {
             if (v.ty.of.k === "opt" || nothing(v.ty.of))
                 break;
             return v.code;
+        default:
+            break;
     }
     return fail(s.comp, "FV0911", "a slot prop is a string, a number, a boolean, an object or a list", n);
 }

package/dist/ssr.js

@@ -1,7 +1,27 @@
 import { readFileSync } from "node:fs";
 import { compileScript, compileTemplate, parse as parseSfc } from "@vue/compiler-sfc";
+import { getEscapedCssVarName } from "@vue/shared";
 import * as vue from "vue";
 import * as serverRenderer from "vue/server-renderer";
+const KEY = /(?:^|[{,])\s*"((?:[^"\\]|\\.)*)"\s*:/g;
+function cssVarNames(file, component, count) {
+    const text = ["setup", "ssrRender"]
+        .map((k) => component[k])
+        .map((f) => (typeof f === "function" ? f.toString() : ""))
+        .join("\n");
+    const keys = (start) => {
+        const at = start.exec(text);
+        return at ? [...text.slice(at.index + at[0].length - 1).matchAll(KEY)].slice(0, count).map((m) => m[1]) : [];
+    };
+    const server = keys(/_cssVars = \{\s*style:\s*\{/);
+    if (server.length === count && server.every((n) => n.startsWith(":--")))
+        return server.map((n) => n.slice(3));
+    const client = keys(/useCssVars\)?\(\s*\(?_ctx\)?\s*=>\s*\(\{/);
+    if (client.length !== count) {
+        throw new Error(`${file}: \`v-bind()\` in \`<style>\`: the component holds none of the variables \`@vitejs/plugin-vue\` names; load it through the plugin`);
+    }
+    return client.map((k) => getEscapedCssVarName(JSON.parse(`"${k}"`), true));
+}
 /** Give a component compiled for the browser the `ssrRender` its SSR build would have. */
 export function attachSsrRender(file, name, component) {
     const { descriptor } = parseSfc(readFileSync(file, "utf8"), { filename: file });
@@ -10,20 +30,38 @@ export function attachSsrRender(file, name, component) {
     if (!scopeId && descriptor.styles.some((st) => st.scoped)) {
         throw new Error(`${file}: a \`<style scoped>\` component without \`__scopeId\`: load it through \`@vitejs/plugin-vue\``);
     }
-    const { code } = compileTemplate({
+    const varNames = descriptor.cssVars.length ? cssVarNames(file, component, descriptor.cssVars.length) : [];
+    let named = 0;
+    const code = compileTemplate({
         source: descriptor.template.content,
         filename: file,
         id: scopeId ?? name,
         scoped: !!scopeId,
         slotted: descriptor.slotted,
         ssr: true,
-        ssrCssVars: [],
-        compilerOptions: script ? { bindingMetadata: script.bindings } : {},
-    });
+        ssrCssVars: descriptor.cssVars,
+        isProd: true,
+        compilerOptions: script?.bindings ? { bindingMetadata: script.bindings } : {},
+    }).code.replace(/^(\s*)":--[^"]*":/gm, (_, indent) => `${indent}":--${varNames[named++]}":`);
     const body = code
         .replace(/import \{([^}]*)\} from "vue"/g, (_, names) => `const {${names.replace(/ as /g, ": ")}} = __vue;`)
         .replace(/import \{([^}]*)\} from "vue\/server-renderer"/g, (_, names) => `const {${names.replace(/ as /g, ": ")}} = __sr;`)
         .replace("export function ssrRender", "return function ssrRender");
     // eslint-disable-next-line @typescript-eslint/no-implied-eval
     component.ssrRender = new Function("__vue", "__sr", body)(vue, serverRenderer);
+    const declared = /\n {2}const _cssVars = (\{ style: \{[^]*?\n\}\})\n/.exec(code)?.[1];
+    if (declared !== undefined)
+        exposeCssVars(component, body.slice(0, body.indexOf("return function ssrRender")), declared);
+}
+function exposeCssVars(component, imports, declared) {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    const vars = new Function("__vue", "__sr", `${imports}return (_ctx, $props, $setup) => (${declared}).style;`)(vue, serverRenderer);
+    const setup = component.setup;
+    component.setup = (props, ctx) => {
+        const instance = vue.getCurrentInstance();
+        if (instance && !instance.getCssVars) {
+            instance.getCssVars = () => Object.fromEntries(Object.entries(vars(instance.proxy, instance.props, instance.setupState)).map(([k, v]) => [k.slice(3).replace(/\\(.)/g, "$1"), v]));
+        }
+        return setup?.(props, ctx);
+    };
 }

package/dist/styles.d.ts

@@ -1,5 +1,9 @@
-import { type N, type Scope } from "./model.ts";
+import { type Component, type N, type Scope } from "./model.ts";
 import { Emitter } from "./emitter.ts";
+/** Put the object Vue's server compiler declares as `_cssVars`, the `v-bind()` variables in
+ * `<style>`, in place of each use of it in the compiled template's statements, with each value
+ * marked to be written as `ssrRenderStyle` writes a variable. */
+export declare function inlineCssVars(comp: Component, body: N[]): N[];
 export declare function mergedStyle(s: Scope, e: Emitter, n: N): void;
 export declare function styleAttr(s: Scope, n: N): string;
 export interface StyleItem {