@lovrozagar/flare 0.9.2 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lovrozagar/flare",
-	"version": "0.9.2",
+	"version": "0.9.3",
 	"description": "Solid meta-framework. Server-driven, NDJSON streaming, renderToStream.",
 	"keywords": [
 		"flare",

package/src/plugins/dev-server.ts

@@ -1,6 +1,6 @@
 import { readFileSync } from "node:fs";
 import { join, resolve } from "node:path";
-import { hoistHydrationHeadMarkers } from "../ssr/hoist-head-markers.ts";
+import { markSolidHeadStart, moveHeadPrependsAfterSolid } from "../ssr/head-prepend.ts";
 import type { ResolvedEntries, VitePlugin } from "./types.ts";
 
 interface NodeReq {
@@ -210,10 +210,9 @@ export function createDevServerPlugin(entries: ResolvedEntries, _assetsBase: str
 									htmlPath = "/";
 								}
 							}
-							const { html: peeledHtml, tags } = peelInlineTags(html);
-							html = hoistHydrationHeadMarkers(
-								restoreInlineTags(await vite.transformIndexHtml(htmlPath, peeledHtml), tags),
-							);
+							const { html: peeledHtml, tags } = peelInlineTags(markSolidHeadStart(html));
+							const transformed = await vite.transformIndexHtml(htmlPath, peeledHtml);
+							html = moveHeadPrependsAfterSolid(restoreInlineTags(transformed, tags));
 
 							const htmlHeaders: Record<string, string | string[]> = {
 								"content-type": "text/html; charset=utf-8",

package/src/plugins/sx-ast/compose-css.ts

@@ -0,0 +1,92 @@
+/*
+ * Stylesheet composition shared by the build (flare-global.css) and the dev SSR runtime
+ * (virtual:flare-sx-dev-css imports this file into the server runner). No Node imports.
+ */
+
+export const LAYER_PRELUDE = "@layer reset, sx, app, user.lib, user.app, inline;";
+
+/* Tailwind's fallback for browsers without @property: the same initial values, set directly. */
+const PROPERTIES_SUPPORTS =
+	"((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))";
+
+/** Tailwind's element-local stacks (`--tw-shadow`, `--tw-scale-x`, …): never theme values. */
+export function isLocalVar(name: string): boolean {
+	return name.startsWith("--tw-");
+}
+
+function propertiesFallback(properties: Map<string, string>): string {
+	const decls = [...properties].map(([name, rule]) => {
+		const initial = /initial-value:\s*([^;]+);/.exec(rule);
+		return `${name}: ${initial ? initial[1].trim() : "initial"};`;
+	});
+	return `@layer properties { @supports ${PROPERTIES_SUPPORTS} { *, ::before, ::after, ::backdrop { ${decls.join(" ")} } } }`;
+}
+
+/* At-rules last so @media utilities beat earlier base utilities of equal
+ * specificity. classPool insertion order is first-seen across the whole
+ * build, so a later page's `fontSize: 12px` would otherwise override an
+ * earlier `@media (min-width: 1px) { fontSize: 24px }`. */
+function atLast(a: string, b: string): number {
+	return Number(a.trimStart().startsWith("@")) - Number(b.trimStart().startsWith("@"));
+}
+
+/** Compose the final CSS text from the class pool, wrapped in @layer blocks. */
+export function composeCss(
+	classPool: Map<string, string>,
+	layerByClass: Map<string, "sx" | "app">,
+	skip: Set<string>,
+	twPrefaceCss: string,
+	properties: Map<string, string> = new Map(),
+	themeBlock = "",
+): string {
+	const sxRules: string[] = [];
+	const appRules: string[] = [];
+
+	for (const [cls, rule] of classPool) {
+		if (skip.has(cls)) continue;
+		/* istanbul ignore next -- layerByClass is always set alongside classPool in cssEmit */
+		const layer = layerByClass.get(cls) ?? "app";
+		if (layer === "sx") sxRules.push(rule);
+		else appRules.push(rule);
+	}
+
+	sxRules.sort(atLast);
+	appRules.sort(atLast);
+
+	const parts: string[] = [];
+	/* First statement, so the fallback layer ranks below every other layer. */
+	if (properties.size > 0) parts.push("@layer properties;");
+	if (twPrefaceCss) parts.push(twPrefaceCss);
+	if (themeBlock) parts.push(themeBlock);
+	parts.push(LAYER_PRELUDE);
+	if (sxRules.length > 0) parts.push(`@layer sx { ${sxRules.join(" ")} }`);
+	if (appRules.length > 0) parts.push(`@layer app { ${appRules.join(" ")} }`);
+	if (properties.size > 0) {
+		parts.push(...properties.values());
+		parts.push(propertiesFallback(properties));
+	}
+
+	return parts.join("\n");
+}
+
+/**
+ * `@layer theme { :root, :host { … } }` defining the theme vars `referenced` needs: each one and,
+ * transitively, the vars its value references. Locals (`--tw-*`), vars the preface already defines,
+ * and names Tailwind never emitted are skipped. Empty string when nothing is needed.
+ */
+export function themeVarsBlock(referenced: Set<string>, themeVars: Map<string, string>, preface: string): string {
+	const decls: string[] = [];
+	const seen = new Set<string>();
+	const queue = [...referenced];
+	while (queue.length > 0) {
+		const name = queue.shift() as string;
+		if (seen.has(name) || isLocalVar(name)) continue;
+		seen.add(name);
+		if (new RegExp(`${name.replace(/[-]/g, "\\-")}\\s*:`).test(preface)) continue;
+		const value = themeVars.get(name);
+		if (value === undefined) continue;
+		decls.push(`${name}: ${value};`);
+		for (const m of value.matchAll(/var\((--[\w-]+)/g)) queue.push(m[1]);
+	}
+	return decls.length > 0 ? `@layer theme { :root, :host { ${decls.join(" ")} } }` : "";
+}

package/src/plugins/sx-ast/index.ts

@@ -1,16 +1,12 @@
 import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import type { Plugin, ViteDevServer } from "vite";
 import { createThemeCn } from "../cn-theme.ts";
 import type { ThemeCn } from "../cn-theme.ts";
-import {
-	extractDeclarations,
-	extractPrefaceCss,
-	extractPropertyRules,
-	initTailwindCompiler,
-	themeVarsBlock,
-} from "../tw-compile.ts";
+import { extractDeclarations, extractPrefaceCss, extractPropertyRules, initTailwindCompiler } from "../tw-compile.ts";
 import type { TailwindCompiler } from "../tw-compile.ts";
+import { composeCss, themeVarsBlock } from "./compose-css.ts";
 import { rewriteModule } from "./rewrite.ts";
 
 export interface SxStrictOptions {
@@ -59,8 +55,6 @@ export interface SxAstOptions {
 	tw?: boolean;
 }
 
-const LAYER_PRELUDE = "@layer reset, sx, app, user.lib, user.app, inline;";
-
 /** CSS rule pool accumulated across all transforms in a build. */
 interface PluginState {
 	/** className → CSS rule text */
@@ -160,63 +154,6 @@ function resolveLayer(
 	return "app";
 }
 
-/** Compose the final CSS text from the class pool, wrapped in @layer blocks. */
-/* Tailwind's fallback for browsers without @property: the same initial values, set directly. */
-const PROPERTIES_SUPPORTS =
-	"((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))";
-
-function propertiesFallback(properties: Map<string, string>): string {
-	const decls = [...properties].map(([name, rule]) => {
-		const initial = /initial-value:\s*([^;]+);/.exec(rule);
-		return `${name}: ${initial ? initial[1].trim() : "initial"};`;
-	});
-	return `@layer properties { @supports ${PROPERTIES_SUPPORTS} { *, ::before, ::after, ::backdrop { ${decls.join(" ")} } } }`;
-}
-
-function composeCss(
-	classPool: Map<string, string>,
-	layerByClass: Map<string, "sx" | "app">,
-	skip: Set<string>,
-	twPrefaceCss: string,
-	properties: Map<string, string> = new Map(),
-	themeBlock = "",
-): string {
-	const sxRules: string[] = [];
-	const appRules: string[] = [];
-
-	for (const [cls, rule] of classPool) {
-		if (skip.has(cls)) continue;
-		/* istanbul ignore next -- layerByClass is always set alongside classPool in cssEmit */
-		const layer = layerByClass.get(cls) ?? "app";
-		if (layer === "sx") sxRules.push(rule);
-		else appRules.push(rule);
-	}
-
-	/* At-rules last so @media utilities beat earlier base utilities of equal
-	 * specificity. classPool insertion order is first-seen across the whole
-	 * build, so a later page's `fontSize: 12px` would otherwise override an
-	 * earlier `@media (min-width: 1px) { fontSize: 24px }`. */
-	const atLast = (a: string, b: string) =>
-		Number(a.trimStart().startsWith("@")) - Number(b.trimStart().startsWith("@"));
-	sxRules.sort(atLast);
-	appRules.sort(atLast);
-
-	const parts: string[] = [];
-	/* First statement, so the fallback layer ranks below every other layer. */
-	if (properties.size > 0) parts.push("@layer properties;");
-	if (twPrefaceCss) parts.push(twPrefaceCss);
-	if (themeBlock) parts.push(themeBlock);
-	parts.push(LAYER_PRELUDE);
-	if (sxRules.length > 0) parts.push(`@layer sx { ${sxRules.join(" ")} }`);
-	if (appRules.length > 0) parts.push(`@layer app { ${appRules.join(" ")} }`);
-	if (properties.size > 0) {
-		parts.push(...properties.values());
-		parts.push(propertiesFallback(properties));
-	}
-
-	return parts.join("\n");
-}
-
 /* Flare's own `cn` tables module. With a twCssPath, the plugin serves tables compiled from that
    theme in its place, so `cn` merges the app's custom scale names (`rounded-control`). */
 const CN_TABLES_RE = /[\\/]styles[\\/]cn-vendor[\\/]tables\.generated\.ts(?:\?.*)?$/;
@@ -247,6 +184,40 @@ export function createSxAstPlugin(opts: SxAstOptions = {}, assetsBase: string =
 		referencedVars: new Set(),
 	};
 	const referenceVars = opts.themeVars === "reference";
+	/*
+	 * Dev SSR stylesheet: a registry living in the server runtime. Every module the server
+	 * transforms registers its rules when it runs (see transform), so the stylesheet SSR reads
+	 * at render time covers every module evaluated so far. A snapshot of plugin state baked into
+	 * this module would go stale: the runner caches the module after its first import, while the
+	 * pool keeps growing as later routes are first rendered. Composition is shared with the build.
+	 */
+	const devCssModule = (): string => {
+		const themeVars = referenceVars && state.twCompiler ? [...state.twCompiler.themeVars] : null;
+		const composeCssPath = fileURLToPath(new URL("./compose-css.ts", import.meta.url));
+		return `import { composeCss, themeVarsBlock } from ${JSON.stringify(composeCssPath)};
+const rules = new Map();
+const layers = new Map();
+const properties = new Map();
+const referenced = new Set();
+const skip = new Set(${JSON.stringify([...state.providedByLibs])});
+const preface = ${JSON.stringify(state.twPrefaceCss)};
+const themeVars = ${themeVars ? `new Map(${JSON.stringify(themeVars)})` : "null"};
+export function registerDevSx(moduleRules, moduleProperties, moduleReferenced) {
+	for (const [cls, rule, layer] of moduleRules) {
+		rules.set(cls, rule);
+		layers.set(cls, layer);
+	}
+	for (const [name, rule] of moduleProperties) properties.set(name, rule);
+	for (const name of moduleReferenced) referenced.add(name);
+}
+export function getDevSxCss() {
+	return composeCss(rules, layers, skip, preface, properties, themeVars ? themeVarsBlock(referenced, themeVars, preface) : "");
+}
+export function getDevSxClasses() {
+	return [...rules.keys()];
+}
+`;
+	};
 	const themeBlockOf = (): string =>
 		referenceVars && state.twCompiler
 			? themeVarsBlock(state.referencedVars, state.twCompiler.themeVars, state.twPrefaceCss)
@@ -324,20 +295,7 @@ export function createSxAstPlugin(opts: SxAstOptions = {}, assetsBase: string =
 				return theme ? { code: theme.source, moduleType: "js" } : null;
 			}
 			if (id !== DEV_CSS_RESOLVED_ID) return null;
-			/* Each import() re-runs load — no caching — so SSR always gets latest state. */
-			const css = composeCss(
-				state.classPool,
-				state.layerByClass,
-				state.providedByLibs,
-				state.twPrefaceCss,
-				state.properties,
-				themeBlockOf(),
-			);
-			const classNames = [...state.classPool.keys()];
-			return {
-				code: `export function getDevSxCss() { return ${JSON.stringify(css)} }\nexport function getDevSxClasses() { return ${JSON.stringify(classNames)} }`,
-				moduleType: "js",
-			};
+			return { code: devCssModule(), moduleType: "js" };
 		},
 
 		generateBundle() {
@@ -385,7 +343,12 @@ export function createSxAstPlugin(opts: SxAstOptions = {}, assetsBase: string =
 
 		name: "flare:sx-ast",
 
-		transform(code: string, id: string): { code: string; map: null } | null {
+		transform(
+			this: { environment?: { config?: { consumer?: string } } },
+			code: string,
+			id: string,
+			options?: { ssr?: boolean },
+		): { code: string; map: null } | null {
 			if (!id.endsWith(".tsx") && !id.endsWith(".jsx")) return null;
 
 			/* Quick filter — skip files that obviously have no relevant attrs */
@@ -394,6 +357,8 @@ export function createSxAstPlugin(opts: SxAstOptions = {}, assetsBase: string =
 			const layer = resolveLayer(id, libPaths, opts.layerOverride);
 			const emittedForModule = new Set<string>();
 			const moduleRules: Array<{ cls: string; rule: string }> = [];
+			const moduleProperties = new Map<string, string>();
+			const moduleReferenced = new Set<string>();
 
 			const tw = state.twCompiler;
 			const violations: string[] = [];
@@ -430,10 +395,16 @@ export function createSxAstPlugin(opts: SxAstOptions = {}, assetsBase: string =
 				twCompile: tw
 					? (token: string) => {
 							const output = tw.build([token]);
-							for (const [name, rule] of extractPropertyRules(output)) state.properties.set(name, rule);
+							for (const [name, rule] of extractPropertyRules(output)) {
+								state.properties.set(name, rule);
+								moduleProperties.set(name, rule);
+							}
 							const decls = extractDeclarations(output, [token], referenceVars ? undefined : tw.themeVars);
 							if (referenceVars) {
-								for (const m of decls.matchAll(/var\((--[\w-]+)/g)) state.referencedVars.add(m[1]);
+								for (const m of decls.matchAll(/var\((--[\w-]+)/g)) {
+									state.referencedVars.add(m[1]);
+									moduleReferenced.add(m[1]);
+								}
 							}
 							return decls || null;
 						}
@@ -468,6 +439,24 @@ export function createSxAstPlugin(opts: SxAstOptions = {}, assetsBase: string =
 			 * result === null means the AST needed no code rewrite (pure class= literals, no sx/spread).
 			 * CSS was still collected into moduleRules via cssEmit — must still inject the snippet.
 			 */
+			if (
+				mode === "dev" &&
+				moduleRules.length > 0 &&
+				(options?.ssr || this.environment?.config?.consumer === "server")
+			) {
+				/* Server runtime: register into the dev stylesheet SSR reads at render (devCssModule). */
+				const registration = JSON.stringify([
+					moduleRules.map(({ cls, rule }) => [cls, rule, layer]),
+					[...moduleProperties],
+					[...moduleReferenced],
+				]);
+				const baseCode = result !== null ? result.code : code;
+				return {
+					code: `${baseCode}\nimport { registerDevSx as __flareRegisterDevSx__ } from "${DEV_CSS_VIRTUAL_ID}";\n__flareRegisterDevSx__(...${registration});\n`,
+					map: null,
+				};
+			}
+
 			if (mode === "dev" && moduleRules.length > 0) {
 				const layerName: "sx" | "app" = layer;
 				const perClassJson = JSON.stringify(moduleRules.map(({ cls, rule }) => [cls, rule]));

package/src/plugins/tw-compile.ts

@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { dirname, isAbsolute, join, resolve } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
+import { isLocalVar } from "./sx-ast/compose-css.ts";
 
 export interface TailwindCompiler {
 	build: (classes: string[]) => string;
@@ -124,11 +125,6 @@ function extractDeclsInner(css: string, selectorSet?: Set<string>): string {
 	return result.join(";");
 }
 
-/** Tailwind's element-local stacks (`--tw-shadow`, `--tw-scale-x`, …): never theme values. */
-function isLocalVar(name: string): boolean {
-	return name.startsWith("--tw-");
-}
-
 /**
  * The `@property` rules in a build output, keyed by variable name, whitespace-normalized
  * (`@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }`).
@@ -147,28 +143,6 @@ export function extractPropertyRules(cssOutput: string): Map<string, string> {
 	return rules;
 }
 
-/**
- * `@layer theme { :root, :host { … } }` defining the theme vars `referenced` needs: each one and,
- * transitively, the vars its value references. Locals (`--tw-*`), vars the preface already defines,
- * and names Tailwind never emitted are skipped. Empty string when nothing is needed.
- */
-export function themeVarsBlock(referenced: Set<string>, themeVars: Map<string, string>, preface: string): string {
-	const decls: string[] = [];
-	const seen = new Set<string>();
-	const queue = [...referenced];
-	while (queue.length > 0) {
-		const name = queue.shift() as string;
-		if (seen.has(name) || isLocalVar(name)) continue;
-		seen.add(name);
-		if (new RegExp(`${name.replace(/[-]/g, "\\-")}\\s*:`).test(preface)) continue;
-		const value = themeVars.get(name);
-		if (value === undefined) continue;
-		decls.push(`${name}: ${value};`);
-		for (const m of value.matchAll(/var\((--[\w-]+)/g)) queue.push(m[1]);
-	}
-	return decls.length > 0 ? `@layer theme { :root, :host { ${decls.join(" ")} } }` : "";
-}
-
 function resolveThemeVars(css: string, themeVars: Map<string, string>): string {
 	let result = css;
 	for (let i = 0; i < 5; i++) {

package/src/plugins/virtual.d.ts

@@ -57,7 +57,13 @@ declare module "virtual:flare-sx-manifest" {
 }
 
 declare module "virtual:flare-sx-dev-css" {
-	/** Returns the current accumulated sx CSS string. Re-imported each SSR request to pick up HMR additions. */
+	/** Dev SSR transforms call this when a module runs, with the rules, `@property` rules and theme vars it emits. */
+	export function registerDevSx(
+		rules: Array<[cls: string, rule: string, layer: "sx" | "app"]>,
+		properties: Array<[name: string, rule: string]>,
+		referenced: string[],
+	): void;
+	/** The sx stylesheet for every module the server runtime has run so far. */
 	export function getDevSxCss(): string;
 	/** Returns the current accumulated class-name list. Seeded into window state so client module injects dedupe against SSR-emitted classes. */
 	export function getDevSxClasses(): string[];

package/src/ssr/head-prepend.ts

@@ -0,0 +1,26 @@
+/**
+ * Solid 2 hydrates `<head>` by walking its children from `head.firstChild` in render order, static
+ * elements (meta, title) and component regions (`<!--$-->…<!--/-->`) alike. Vite's
+ * transformIndexHtml prepends tags (`/@vite/client`, plugin head-prepend tags) ahead of them, so
+ * hydration would meet those first. Mark where Solid's output starts before the transform, then
+ * move whatever landed ahead of the mark to the end of `<head>`.
+ */
+const SOLID_HEAD_START = "<!--flare-solid-head-->";
+
+/** Marks the start of Solid's head children. Call on the SSR HTML before transformIndexHtml. */
+export function markSolidHeadStart(html: string): string {
+	return html.replace(/<head(\s[^>]*)?>/i, (open) => `${open}${SOLID_HEAD_START}`);
+}
+
+/** Moves tags injected ahead of the mark to just before `</head>` and drops the mark. */
+export function moveHeadPrependsAfterSolid(html: string): string {
+	const open = /<head(\s[^>]*)?>/i.exec(html);
+	if (!open) return html;
+	const start = open.index + open[0].length;
+	const mark = html.indexOf(SOLID_HEAD_START, start);
+	const end = html.indexOf("</head>", start);
+	if (mark === -1 || end === -1 || mark > end) return html;
+	const prepended = html.slice(start, mark);
+	const solidAndRest = html.slice(mark + SOLID_HEAD_START.length, end);
+	return html.slice(0, start) + solidAndRest + prepended + html.slice(end);
+}

package/src/ssr/index.tsx

@@ -32,7 +32,6 @@ import { ThemeProvider } from "../theme.ts";
 import { GLOBAL_DEFER, GLOBAL_QUERIES } from "../protocol.ts";
 import { parseSearchParams, type SearchParams } from "../url/index.ts";
 import { renderHeadToHtml } from "./head.ts";
-import { hoistHydrationHeadMarkers } from "./hoist-head-markers.ts";
 import { buildHeadPrefix } from "./head-prefix.ts";
 
 export { mergeHeadConfigs } from "../internal.ts";
@@ -548,7 +547,7 @@ function buildComponentTree(config: SSRConfig, flareStateScript: string): () =>
  * Returns updated buffer with head content injected, or original buffer if </head> not found.
  *
  * Head structure:
- *   1. Solid's hydratable head children (`<!--$-->` first — required for Solid 2)
+ *   1. Solid's head children, in render order (hydration walks them from `head.firstChild`)
  *   2. CSP nonce / viewport / theme / direction / locale scripts (headPrefix)
  *   3. modulepreload + stylesheets
  *   4. Resolved <head> tags (title, meta, etc.)
@@ -630,8 +629,7 @@ function injectHeadContent(
 		headSuffix += `<style nonce="${escapedNonce}">body{${cssText}}</style>`;
 	}
 
-	const result = buffer.replace("</head>", `${headPrefix}${headSuffix}${extraSuffix}</head>`);
-	return hoistHydrationHeadMarkers(result);
+	return buffer.replace("</head>", `${headPrefix}${headSuffix}${extraSuffix}</head>`);
 }
 
 /**
@@ -725,9 +723,9 @@ export function renderToStream(config: SSRConfig): SSRResult {
 			try {
 				/*
 				 * Resolve dev sx CSS before the read loop so both injectHeadContent call sites
-				 * (in-loop and flush) get the same snapshot. Dynamic import re-runs the virtual
-				 * module's load hook each time — no caching — so HMR additions are reflected.
-				 * Guarded by import.meta.env.DEV so prod builds tree-shake this entirely.
+				 * (in-loop and flush) get the same snapshot. The virtual module is a registry every
+				 * server-transformed module registers its rules into as it runs, so it covers every
+				 * module this render used. Guarded by import.meta.env.DEV so prod builds tree-shake it.
 				 */
 				let resolvedDevSxCss = "";
 				let resolvedDevSxClasses: string[] = [];

package/src/ssr/hoist-head-markers.ts

@@ -1,25 +0,0 @@
-/**
- * Solid 2 hydratable `<head>` walks `head.firstChild` as `<!--$-->`.
- * Vite (`/@vite/client`) and Flare headPrefix used to prepend nodes, so
- * getNextMarker started on the wrong child and hydration threw
- * `Cannot read properties of null (reading 'firstChild'|'nextSibling')`.
- *
- * Move the Solid `<!--$-->…<!--/-->` region to the start of `<head>`.
- * Injected scripts/meta stay in `<head>` (still before `</head>` / body).
- */
-export function hoistHydrationHeadMarkers(html: string): string {
-	const open = /<head[^>]*>/i.exec(html);
-	if (!open) return html;
-	const start = open.index + open[0].length;
-	const end = html.indexOf("</head>", start);
-	if (end === -1) return html;
-	const inner = html.slice(start, end);
-	const first = inner.indexOf("<!--$-->");
-	if (first <= 0) return html;
-	const last = inner.lastIndexOf("<!--/-->");
-	if (last === -1 || last < first) return html;
-	const closeAt = last + "<!--/-->".length;
-	const solid = inner.slice(first, closeAt);
-	const rest = inner.slice(0, first) + inner.slice(closeAt);
-	return html.slice(0, start) + solid + rest + html.slice(end);
-}