boss-css 0.0.11 → 0.0.13

package/dist/ai/server.cjs

@@ -23,6 +23,7 @@ const STATIC_DOC = `### Syntax
 - Prefer token keys (color="primary") over $$.token.* when available.
 - Token overrides can be passed via the tokens prop at runtime.
 - Prefer token shorthands for shadows (boxShadow="md") when available.
+- In classname-first, dynamic tokens should return $$.token.* from the function.
 
 ### Selectors
 - Use pseudos for state (hover, focus, etc.).
@@ -47,6 +48,7 @@ const STATIC_DOC = `### Syntax
 - classname-first: smaller inline styles; use function values for dynamics.
 - runtime-only: client CSS injection only.
  - compile pruning: keep props static when you want runtime-free output.
+ - runtime.globals: inline | file | none (reset/fontsource/token/$$.css output).
 `;
 const EVENT_NAMES = [
 	"onBoot",

package/dist/ai/server.mjs

@@ -21,6 +21,7 @@ const STATIC_DOC = `### Syntax
 - Prefer token keys (color="primary") over $$.token.* when available.
 - Token overrides can be passed via the tokens prop at runtime.
 - Prefer token shorthands for shadows (boxShadow="md") when available.
+- In classname-first, dynamic tokens should return $$.token.* from the function.
 
 ### Selectors
 - Use pseudos for state (hover, focus, etc.).
@@ -45,6 +46,7 @@ const STATIC_DOC = `### Syntax
 - classname-first: smaller inline styles; use function values for dynamics.
 - runtime-only: client CSS injection only.
  - compile pruning: keep props static when you want runtime-free output.
+ - runtime.globals: inline | file | none (reset/fontsource/token/$$.css output).
 `;
 const EVENT_NAMES = [
 	"onBoot",

package/dist/ai/skills.cjs

@@ -16,6 +16,7 @@ Apply Boss CSS props cleanly with tokens and selectors.
 - Use token keys (for example color="primary") when tokens exist.
 - Use pseudos and @at for state and breakpoints instead of ad-hoc selectors.
 - In classname-first, pass dynamic values as functions (prop={() => value}).
+- In classname-first, return $$.token.* from dynamic functions when using tokens.
 - Use child for nested selectors instead of manual selector strings.
 - Prefer unitless values (padding:12). Use _ for spaces (padding:10_20).
 - Prefer arrays for shorthands (padding={[0, 10]}).
@@ -53,8 +54,8 @@ Pick the rendering strategy that matches your app needs.
 
 # Guidance
 - inline-first: safest default; good for mixed dynamic/static props.
-- classname-first: smallest runtime styles; use function values for dynamics.
-- runtime-only: client-only CSS injection; no server CSS output.
+- classname-first: smallest runtime styles; use function values for dynamics and return $$.token.* for dynamic tokens.
+- runtime-only: client-only CSS injection; reset/fontsource/token/$$.css output is controlled by runtime.globals.
 
 # References
 See .bo$$/LLMS.md for the active runtime strategy.
@@ -246,7 +247,10 @@ Use runtime-only mode safely.
 
 # Guidance
 - runtime.only: true disables server CSS output.
-- Runtime-only injects CSS on the client; expect no styles.css output.
+- runtime.globals controls reset/fontsource/token/$$.css output in runtime-only:
+  - inline injects globals at runtime.
+  - file emits styles.css even in runtime-only.
+  - none skips global CSS output.
 - Keep JSX parser enabled and include the runtime strategy plugin.
 
 # References

package/dist/ai/skills.mjs

@@ -15,6 +15,7 @@ Apply Boss CSS props cleanly with tokens and selectors.
 - Use token keys (for example color="primary") when tokens exist.
 - Use pseudos and @at for state and breakpoints instead of ad-hoc selectors.
 - In classname-first, pass dynamic values as functions (prop={() => value}).
+- In classname-first, return $$.token.* from dynamic functions when using tokens.
 - Use child for nested selectors instead of manual selector strings.
 - Prefer unitless values (padding:12). Use _ for spaces (padding:10_20).
 - Prefer arrays for shorthands (padding={[0, 10]}).
@@ -52,8 +53,8 @@ Pick the rendering strategy that matches your app needs.
 
 # Guidance
 - inline-first: safest default; good for mixed dynamic/static props.
-- classname-first: smallest runtime styles; use function values for dynamics.
-- runtime-only: client-only CSS injection; no server CSS output.
+- classname-first: smallest runtime styles; use function values for dynamics and return $$.token.* for dynamic tokens.
+- runtime-only: client-only CSS injection; reset/fontsource/token/$$.css output is controlled by runtime.globals.
 
 # References
 See .bo$$/LLMS.md for the active runtime strategy.
@@ -245,7 +246,10 @@ Use runtime-only mode safely.
 
 # Guidance
 - runtime.only: true disables server CSS output.
-- Runtime-only injects CSS on the client; expect no styles.css output.
+- runtime.globals controls reset/fontsource/token/$$.css output in runtime-only:
+  - inline injects globals at runtime.
+  - file emits styles.css even in runtime-only.
+  - none skips global CSS output.
 - Keep JSX parser enabled and include the runtime strategy plugin.
 
 # References

package/dist/api/server.cjs

@@ -42,8 +42,14 @@ async function createApi(config, force = false) {
 		applyChildSelectors: require_names.applyChildSelectors
 	};
 	const runtimeOnly = config?.runtime?.only === true;
+	const runtimeGlobals = runtimeOnly && config?.runtime?.globals ? config.runtime.globals : runtimeOnly ? "inline" : "file";
+	const shouldCollectGlobals = runtimeOnly && runtimeGlobals !== "none";
+	if (runtimeOnly) api.runtime = {
+		...api.runtime ?? {},
+		globals: runtimeGlobals
+	};
 	api.dictionary = new require_dictionary.Dictionary(api);
-	api.css = runtimeOnly ? new require_api_noopCss.NoopCSS(api) : new require_css.CSS(api);
+	api.css = runtimeOnly ? shouldCollectGlobals ? new require_css.CSS(api) : new require_api_noopCss.NoopCSS(api) : new require_css.CSS(api);
 	api.file.js = new require_js.default(api, { path: "index.js" });
 	api.file.native = new require_js.default(api, { path: "native.js" });
 	const initBaseTypes = (dts, options) => {
@@ -62,8 +68,7 @@ async function createApi(config, force = false) {
 	initBaseTypes(api.file.js.dts, { includeObject: false });
 	initBaseTypes(api.file.native.dts, { includeObject: true });
 	await trigger("onBoot");
-	const autoLoadCss = config?.css?.autoLoad ?? true;
-	if (!runtimeOnly && autoLoadCss) api.file.js.import({ from: "./styles.css" });
+	if ((config?.css?.autoLoad ?? true) && (!runtimeOnly || runtimeGlobals === "file")) api.file.js.import({ from: "./styles.css" });
 	await trigger("onReady");
 	return api;
 }

package/dist/api/server.mjs

@@ -42,8 +42,14 @@ async function createApi(config, force = false) {
 		applyChildSelectors
 	};
 	const runtimeOnly = config?.runtime?.only === true;
+	const runtimeGlobals = runtimeOnly && config?.runtime?.globals ? config.runtime.globals : runtimeOnly ? "inline" : "file";
+	const shouldCollectGlobals = runtimeOnly && runtimeGlobals !== "none";
+	if (runtimeOnly) api.runtime = {
+		...api.runtime ?? {},
+		globals: runtimeGlobals
+	};
 	api.dictionary = new Dictionary(api);
-	api.css = runtimeOnly ? new NoopCSS(api) : new CSS(api);
+	api.css = runtimeOnly ? shouldCollectGlobals ? new CSS(api) : new NoopCSS(api) : new CSS(api);
 	api.file.js = new JS(api, { path: "index.js" });
 	api.file.native = new JS(api, { path: "native.js" });
 	const initBaseTypes = (dts, options) => {
@@ -62,8 +68,7 @@ async function createApi(config, force = false) {
 	initBaseTypes(api.file.js.dts, { includeObject: false });
 	initBaseTypes(api.file.native.dts, { includeObject: true });
 	await trigger("onBoot");
-	const autoLoadCss = config?.css?.autoLoad ?? true;
-	if (!runtimeOnly && autoLoadCss) api.file.js.import({ from: "./styles.css" });
+	if ((config?.css?.autoLoad ?? true) && (!runtimeOnly || runtimeGlobals === "file")) api.file.js.import({ from: "./styles.css" });
 	await trigger("onReady");
 	return api;
 }

package/dist/compile/index.cjs

@@ -173,7 +173,9 @@ async function compileProject(options) {
 	let cssBytes = 0;
 	let cssWritten = false;
 	let stylesheetPath = null;
-	if (!prod && api.css.text.trim()) {
+	const runtimeOnly = config.runtime?.only === true;
+	const runtimeGlobals = runtimeOnly ? config.runtime?.globals ?? "inline" : "file";
+	if (!prod && (!runtimeOnly || runtimeGlobals === "file") && api.css.text.trim()) {
 		const resolvedStylesheetPath = config.stylesheetPath ?? node_path.default.join(root, config.configDir ?? ".bo$$", "styles.css");
 		const outputs = (await require_boundaries.resolveBoundaryOutputs(api, {
 			rootDir: root,

package/dist/compile/index.mjs

@@ -170,7 +170,9 @@ async function compileProject(options) {
 	let cssBytes = 0;
 	let cssWritten = false;
 	let stylesheetPath = null;
-	if (!prod && api.css.text.trim()) {
+	const runtimeOnly = config.runtime?.only === true;
+	const runtimeGlobals = runtimeOnly ? config.runtime?.globals ?? "inline" : "file";
+	if (!prod && (!runtimeOnly || runtimeGlobals === "file") && api.css.text.trim()) {
 		const resolvedStylesheetPath = config.stylesheetPath ?? path.join(root, config.configDir ?? ".bo$$", "styles.css");
 		const outputs = (await resolveBoundaryOutputs(api, {
 			rootDir: root,

package/dist/fontsource/server.cjs

@@ -238,7 +238,7 @@ const addFontFaceBlocks = (api, cssText, cssUrl, downloads, axes, fontFolder) =>
 	}
 };
 const onBoot = async (api) => {
-	if (api.runtime?.only) return;
+	if (api.runtime?.only && api.runtime?.globals === "none") return;
 	const fonts = api.fonts;
 	if (!Array.isArray(fonts) || fonts.length === 0) return;
 	const importUrls = [];

package/dist/fontsource/server.mjs

@@ -236,7 +236,7 @@ const addFontFaceBlocks = (api, cssText, cssUrl, downloads, axes, fontFolder) =>
 	}
 };
 const onBoot = async (api) => {
-	if (api.runtime?.only) return;
+	if (api.runtime?.only && api.runtime?.globals === "none") return;
 	const fonts = api.fonts;
 	if (!Array.isArray(fonts) || fonts.length === 0) return;
 	const importUrls = [];

package/dist/native/styleTypes.mjs

@@ -1,7 +1,7 @@
 import { createRequire } from "node:module";
 import fs from "node:fs/promises";
 import path from "node:path";
-import fastGlob from "fast-glob";
+import fg from "fast-glob";
 
 //#region src/native/styleTypes.ts
 const interfaceNames = new Set([
@@ -129,7 +129,7 @@ const resolveReactNativeRoot = async () => {
 	};
 };
 const findStyleSheetTypesFile = async (root, typesEntry) => {
-	const candidates = await fastGlob(["**/StyleSheetTypes.d.ts", "**/StyleSheetTypes.ts"], {
+	const candidates = await fg(["**/StyleSheetTypes.d.ts", "**/StyleSheetTypes.ts"], {
 		cwd: root,
 		absolute: true,
 		suppressErrors: true
@@ -139,7 +139,7 @@ const findStyleSheetTypesFile = async (root, typesEntry) => {
 		const entryPath = path.join(root, typesEntry);
 		if ((await fs.readFile(entryPath, "utf-8").catch(() => "")).includes("interface ViewStyle")) return entryPath;
 	}
-	const fallback = await fastGlob(["**/*.d.ts"], {
+	const fallback = await fg(["**/*.d.ts"], {
 		cwd: root,
 		absolute: true,
 		suppressErrors: true

package/dist/shared/boundaries.mjs

@@ -1,5 +1,5 @@
 import path from "node:path";
-import fastGlob from "fast-glob";
+import fg from "fast-glob";
 
 //#region src/shared/boundaries.ts
 const DEFAULT_CRITICALITY = 2;
@@ -13,7 +13,7 @@ const normalizeCssText = (value) => {
 const findBoundaryFiles = async (rootDir, config = {}) => {
 	const ignore = [...config.ignore ?? []];
 	ignore.push("**/node_modules/**");
-	return (await fastGlob(BOUNDARY_PATTERN, {
+	return (await fg(BOUNDARY_PATTERN, {
 		cwd: rootDir,
 		absolute: true,
 		onlyFiles: true,

package/dist/shared/file.mjs

@@ -1,4 +1,4 @@
-import fastGlob from "fast-glob";
+import fg from "fast-glob";
 
 //#region src/shared/file.ts
 const DEFAULT_IGNORE = [
@@ -7,7 +7,7 @@ const DEFAULT_IGNORE = [
 	"**/dist/**"
 ];
 const resolveContentPaths = async (content) => {
-	return fastGlob(content, {
+	return fg(content, {
 		onlyFiles: false,
 		absolute: true,
 		cwd: process.cwd(),

package/dist/strategy/runtime/runtime-only.cjs

@@ -19,6 +19,7 @@ const onBrowserObjectStart = (api, payload) => {
 };
 
 //#endregion
+exports.applyGlobals = require_strategy_runtime_only_css.applyGlobals;
 exports.name = name;
 exports.onBrowserObjectStart = onBrowserObjectStart;
 exports.onInit = onInit;

package/dist/strategy/runtime/runtime-only.mjs

@@ -1,5 +1,5 @@
 import { onBrowserObjectStart as onBrowserObjectStart$1 } from "../inline-first/runtime-only.mjs";
-import { onInit as onInit$1 } from "../runtime-only/css.mjs";
+import { applyGlobals, onInit as onInit$1 } from "../runtime-only/css.mjs";
 import { onBrowserObjectStart as onBrowserObjectStart$2 } from "../classname-first/runtime-only.mjs";
 import { onBrowserObjectStart as onBrowserObjectStart$3 } from "../classic/runtime-only.mjs";
 
@@ -19,4 +19,4 @@ const onBrowserObjectStart = (api, payload) => {
 };
 
 //#endregion
-export { name, onBrowserObjectStart, onInit };
+export { applyGlobals, name, onBrowserObjectStart, onInit };

package/dist/strategy/runtime/server.cjs

@@ -13,6 +13,10 @@ const name = "runtime";
 const settings = new Map([["emitRuntime", false], ["emitAllTokens", false]]);
 let needsRuntime = false;
 const resolveRuntimeStrategy = (api) => api.runtime?.strategy ?? "inline-first";
+const resolveRuntimeGlobals = (api) => {
+	if (!api.runtime?.only) return null;
+	return api.runtime?.globals ?? "inline";
+};
 const resolveServerStrategy = (strategy) => {
 	if (strategy === "classname-first") return require_strategy_classname_first_server.server_exports;
 	return require_strategy_inline_first_server.server_exports;
@@ -20,7 +24,8 @@ const resolveServerStrategy = (strategy) => {
 const onBoot = async (api) => {
 	const runtimeStrategy = resolveRuntimeStrategy(api);
 	const runtimeConfig = api.runtime ?? {};
-	const shouldEmitRuntime = () => needsRuntime || settings.get("emitRuntime") === true;
+	const shouldInlineGlobals = resolveRuntimeGlobals(api) === "inline";
+	const shouldEmitRuntime = () => needsRuntime || settings.get("emitRuntime") === true || shouldInlineGlobals;
 	const runtimeModule = "boss-css/strategy/runtime/runtime-only";
 	const onBrowserObjectStartVar = api.file.js.import({
 		name: "onBrowserObjectStart",
@@ -30,6 +35,10 @@ const onBoot = async (api) => {
 		name: "onInit",
 		from: runtimeModule
 	}, shouldEmitRuntime);
+	const applyGlobalsVar = shouldInlineGlobals ? api.file.js.import({
+		name: "applyGlobals",
+		from: runtimeModule
+	}, shouldEmitRuntime) : null;
 	api.file.js.config({
 		from: runtimeModule,
 		config: { plugin: {
@@ -46,6 +55,11 @@ const onBoot = async (api) => {
 			runtime: runtimeConfig
 		}
 	}, shouldEmitRuntime);
+	if (shouldInlineGlobals && applyGlobalsVar) api.file.js.set("body", "runtime:globals", () => {
+		const cssText = api.css?.text?.trim();
+		if (!cssText) return "";
+		return `${applyGlobalsVar}(${JSON.stringify({ cssText })});`;
+	}, shouldEmitRuntime);
 	api.strategy = runtimeStrategy;
 	if (runtimeStrategy === "classname-first") {
 		if (settings.get("emitAllTokens") === true || process.env.NODE_ENV !== "production") api.emitAllTokens = true;

package/dist/strategy/runtime/server.mjs

@@ -13,6 +13,10 @@ const name = "runtime";
 const settings = new Map([["emitRuntime", false], ["emitAllTokens", false]]);
 let needsRuntime = false;
 const resolveRuntimeStrategy = (api) => api.runtime?.strategy ?? "inline-first";
+const resolveRuntimeGlobals = (api) => {
+	if (!api.runtime?.only) return null;
+	return api.runtime?.globals ?? "inline";
+};
 const resolveServerStrategy = (strategy) => {
 	if (strategy === "classname-first") return server_exports$2;
 	return server_exports$1;
@@ -20,7 +24,8 @@ const resolveServerStrategy = (strategy) => {
 const onBoot = async (api) => {
 	const runtimeStrategy = resolveRuntimeStrategy(api);
 	const runtimeConfig = api.runtime ?? {};
-	const shouldEmitRuntime = () => needsRuntime || settings.get("emitRuntime") === true;
+	const shouldInlineGlobals = resolveRuntimeGlobals(api) === "inline";
+	const shouldEmitRuntime = () => needsRuntime || settings.get("emitRuntime") === true || shouldInlineGlobals;
 	const runtimeModule = "boss-css/strategy/runtime/runtime-only";
 	const onBrowserObjectStartVar = api.file.js.import({
 		name: "onBrowserObjectStart",
@@ -30,6 +35,10 @@ const onBoot = async (api) => {
 		name: "onInit",
 		from: runtimeModule
 	}, shouldEmitRuntime);
+	const applyGlobalsVar = shouldInlineGlobals ? api.file.js.import({
+		name: "applyGlobals",
+		from: runtimeModule
+	}, shouldEmitRuntime) : null;
 	api.file.js.config({
 		from: runtimeModule,
 		config: { plugin: {
@@ -46,6 +55,11 @@ const onBoot = async (api) => {
 			runtime: runtimeConfig
 		}
 	}, shouldEmitRuntime);
+	if (shouldInlineGlobals && applyGlobalsVar) api.file.js.set("body", "runtime:globals", () => {
+		const cssText = api.css?.text?.trim();
+		if (!cssText) return "";
+		return `${applyGlobalsVar}(${JSON.stringify({ cssText })});`;
+	}, shouldEmitRuntime);
 	api.strategy = runtimeStrategy;
 	if (runtimeStrategy === "classname-first") {
 		if (settings.get("emitAllTokens") === true || process.env.NODE_ENV !== "production") api.emitAllTokens = true;

package/dist/strategy/runtime-only/css.cjs

@@ -8,6 +8,7 @@ let atRuleIndex = 0;
 const atRules = [];
 const inserted = /* @__PURE__ */ new Set();
 const canUseDom = () => typeof document !== "undefined" && typeof document.createElement === "function";
+const GLOBAL_STYLE_ATTR = "data-boss-globals";
 const ensureBaseSheet = () => {
 	if (baseSheet || !canUseDom()) return baseSheet;
 	baseStyleElement = document.querySelector("style[data-boss-runtime]");
@@ -19,6 +20,18 @@ const ensureBaseSheet = () => {
 	baseSheet = baseStyleElement.sheet;
 	return baseSheet;
 };
+const applyGlobals = (payload) => {
+	if (!payload || !canUseDom()) return;
+	const cssText = typeof payload === "string" ? payload : payload.cssText;
+	if (!cssText) return;
+	let style = document.querySelector(`style[${GLOBAL_STYLE_ATTR}]`);
+	if (!style) {
+		style = document.createElement("style");
+		style.setAttribute(GLOBAL_STYLE_ATTR, "");
+		document.head.appendChild(style);
+	}
+	if (style.textContent !== cssText) style.textContent = cssText;
+};
 const ensureAtSheet = () => {
 	if (atSheet || !canUseDom()) return atSheet;
 	ensureBaseSheet();
@@ -124,7 +137,14 @@ var RuntimeCSS = class {
 		return "";
 	}
 	addImport(_url) {}
-	addRoot(_value, _source) {}
+	addRoot(value, _source) {
+		if (!value) return;
+		if (this.root.has(value)) return;
+		this.root.add(value);
+		if (!canUseDom()) return;
+		const selector = typeof this.api.selectorScope === "string" && this.api.selectorScope.length > 0 ? this.api.selectorScope : ":root";
+		insertRule(`${selector} { ${value} }`, `root|${selector}|${value}`);
+	}
 	removeSource(_source) {}
 	reset() {}
 	selector({ className, selector = null, pseudos = [], query = null }) {
@@ -180,4 +200,5 @@ const onInit = (api) => {
 
 //#endregion
 exports.RuntimeCSS = RuntimeCSS;
+exports.applyGlobals = applyGlobals;
 exports.onInit = onInit;

package/dist/strategy/runtime-only/css.mjs

@@ -7,6 +7,7 @@ let atRuleIndex = 0;
 const atRules = [];
 const inserted = /* @__PURE__ */ new Set();
 const canUseDom = () => typeof document !== "undefined" && typeof document.createElement === "function";
+const GLOBAL_STYLE_ATTR = "data-boss-globals";
 const ensureBaseSheet = () => {
 	if (baseSheet || !canUseDom()) return baseSheet;
 	baseStyleElement = document.querySelector("style[data-boss-runtime]");
@@ -18,6 +19,18 @@ const ensureBaseSheet = () => {
 	baseSheet = baseStyleElement.sheet;
 	return baseSheet;
 };
+const applyGlobals = (payload) => {
+	if (!payload || !canUseDom()) return;
+	const cssText = typeof payload === "string" ? payload : payload.cssText;
+	if (!cssText) return;
+	let style = document.querySelector(`style[${GLOBAL_STYLE_ATTR}]`);
+	if (!style) {
+		style = document.createElement("style");
+		style.setAttribute(GLOBAL_STYLE_ATTR, "");
+		document.head.appendChild(style);
+	}
+	if (style.textContent !== cssText) style.textContent = cssText;
+};
 const ensureAtSheet = () => {
 	if (atSheet || !canUseDom()) return atSheet;
 	ensureBaseSheet();
@@ -123,7 +136,14 @@ var RuntimeCSS = class {
 		return "";
 	}
 	addImport(_url) {}
-	addRoot(_value, _source) {}
+	addRoot(value, _source) {
+		if (!value) return;
+		if (this.root.has(value)) return;
+		this.root.add(value);
+		if (!canUseDom()) return;
+		const selector = typeof this.api.selectorScope === "string" && this.api.selectorScope.length > 0 ? this.api.selectorScope : ":root";
+		insertRule(`${selector} { ${value} }`, `root|${selector}|${value}`);
+	}
 	removeSource(_source) {}
 	reset() {}
 	selector({ className, selector = null, pseudos = [], query = null }) {
@@ -178,4 +198,4 @@ const onInit = (api) => {
 };
 
 //#endregion
-export { RuntimeCSS, onInit };
+export { RuntimeCSS, applyGlobals, onInit };

package/dist/tasks/build.cjs

@@ -19,6 +19,8 @@ const resolveBuildConfig = (userConfig, baseDir = process.cwd()) => {
 	const configDir = userConfig.configDir ?? ".bo$$";
 	const folder = userConfig.folder ?? configDir;
 	const stylesheetPath = userConfig.stylesheetPath ?? node_path.default.join(baseDir, configDir, "styles.css");
+	const runtimeOnly = userConfig.runtime?.only === true;
+	const runtimeGlobals = runtimeOnly ? userConfig.runtime?.globals ?? "inline" : "file";
 	return {
 		config: {
 			...userConfig,
@@ -28,13 +30,14 @@ const resolveBuildConfig = (userConfig, baseDir = process.cwd()) => {
 		},
 		folderPath: node_path.default.resolve(baseDir, folder),
 		stylesheetPath: node_path.default.isAbsolute(stylesheetPath) ? stylesheetPath : node_path.default.resolve(baseDir, stylesheetPath),
-		runtimeOnly: userConfig.runtime?.only === true
+		runtimeOnly,
+		runtimeGlobals
 	};
 };
 const runBuild = async (userConfig, options = {}) => {
 	const baseDir = options.baseDir ?? process.cwd();
 	const start = process.hrtime.bigint();
-	const { config, folderPath, stylesheetPath, runtimeOnly } = resolveBuildConfig(userConfig, baseDir);
+	const { config, folderPath, stylesheetPath, runtimeOnly, runtimeGlobals } = resolveBuildConfig(userConfig, baseDir);
 	if (!config.content) throw new Error("boss build requires config.content in .bo$$/config.js or package.json.");
 	const api = await require_api_server.createApi(config, true);
 	api.baseDir = baseDir;
@@ -86,6 +89,21 @@ const runBuild = async (userConfig, options = {}) => {
 		const globalOutput = boundaryResult.outputs.find((output) => output.path === stylesheetPath);
 		cssPath = stylesheetPath;
 		cssBytes = Buffer.byteLength(globalOutput?.text ?? "");
+	} else if (runtimeGlobals === "file") {
+		await api.trigger("onMetaData", {
+			kind: "ai",
+			replace: true,
+			data: {
+				section: "boundaries",
+				title: "CSS boundaries",
+				content: formatBoundaryLines([], baseDir)
+			}
+		});
+		const text = api.css?.text ?? "";
+		await node_fs_promises.default.mkdir(node_path.default.dirname(stylesheetPath), { recursive: true });
+		await node_fs_promises.default.writeFile(stylesheetPath, text, "utf8");
+		cssPath = stylesheetPath;
+		cssBytes = Buffer.byteLength(text);
 	} else await api.trigger("onMetaData", {
 		kind: "ai",
 		replace: true,

package/dist/tasks/build.mjs

@@ -16,6 +16,8 @@ const resolveBuildConfig = (userConfig, baseDir = process.cwd()) => {
 	const configDir = userConfig.configDir ?? ".bo$$";
 	const folder = userConfig.folder ?? configDir;
 	const stylesheetPath = userConfig.stylesheetPath ?? path.join(baseDir, configDir, "styles.css");
+	const runtimeOnly = userConfig.runtime?.only === true;
+	const runtimeGlobals = runtimeOnly ? userConfig.runtime?.globals ?? "inline" : "file";
 	return {
 		config: {
 			...userConfig,
@@ -25,13 +27,14 @@ const resolveBuildConfig = (userConfig, baseDir = process.cwd()) => {
 		},
 		folderPath: path.resolve(baseDir, folder),
 		stylesheetPath: path.isAbsolute(stylesheetPath) ? stylesheetPath : path.resolve(baseDir, stylesheetPath),
-		runtimeOnly: userConfig.runtime?.only === true
+		runtimeOnly,
+		runtimeGlobals
 	};
 };
 const runBuild = async (userConfig, options = {}) => {
 	const baseDir = options.baseDir ?? process.cwd();
 	const start = process.hrtime.bigint();
-	const { config, folderPath, stylesheetPath, runtimeOnly } = resolveBuildConfig(userConfig, baseDir);
+	const { config, folderPath, stylesheetPath, runtimeOnly, runtimeGlobals } = resolveBuildConfig(userConfig, baseDir);
 	if (!config.content) throw new Error("boss build requires config.content in .bo$$/config.js or package.json.");
 	const api = await createApi(config, true);
 	api.baseDir = baseDir;
@@ -83,6 +86,21 @@ const runBuild = async (userConfig, options = {}) => {
 		const globalOutput = boundaryResult.outputs.find((output) => output.path === stylesheetPath);
 		cssPath = stylesheetPath;
 		cssBytes = Buffer.byteLength(globalOutput?.text ?? "");
+	} else if (runtimeGlobals === "file") {
+		await api.trigger("onMetaData", {
+			kind: "ai",
+			replace: true,
+			data: {
+				section: "boundaries",
+				title: "CSS boundaries",
+				content: formatBoundaryLines([], baseDir)
+			}
+		});
+		const text = api.css?.text ?? "";
+		await fs.mkdir(path.dirname(stylesheetPath), { recursive: true });
+		await fs.writeFile(stylesheetPath, text, "utf8");
+		cssPath = stylesheetPath;
+		cssBytes = Buffer.byteLength(text);
 	} else await api.trigger("onMetaData", {
 		kind: "ai",
 		replace: true,

package/dist/use/token/runtime-only.cjs

@@ -143,6 +143,11 @@ const getTokenPath = (api, prop, value) => {
 				selectorValue: value
 			};
 		}
+		if (resolveTokenParts(values, value.split(".")) !== void 0) return {
+			path: `${groupName}.${value}`,
+			source: "prop",
+			values
+		};
 	}
 	if (value in values) return {
 		path: `${groupName}.${value}`,
@@ -166,9 +171,22 @@ const resolveRuntimeToken = (api, prop, value) => {
 	const runtimeOnly = api.runtime?.only === true;
 	const hasServerToken = tokenPaths.has(tokenData.path);
 	const tokenKey = tokenData.selectorValue ?? tokenData.path.split(".").slice(1).join(".");
-	const varValue = `var(${`--${api.selectorPrefix ?? ""}${tokenData.path.replace(/\./g, "-")}`})`;
-	const mixValue = tokenData.alpha === void 0 ? null : `color-mix(in oklab, ${hasServerToken && !runtimeOnly ? varValue : tokenValue} ${tokenData.alpha}%, transparent)`;
-	if (runtimeOnly || !hasServerToken) return {
+	const varName = `--${api.selectorPrefix ?? ""}${tokenData.path.replace(/\./g, "-")}`;
+	const varValue = `var(${varName})`;
+	const mixValue = tokenData.alpha === void 0 ? null : `color-mix(in oklab, ${runtimeOnly || hasServerToken ? varValue : tokenValue} ${tokenData.alpha}%, transparent)`;
+	if (runtimeOnly) {
+		if (api.css && typeof api.css.addRoot === "function") {
+			const resolvedValue = api.dictionary.toValue(tokenValue);
+			if (resolvedValue !== void 0 && resolvedValue !== null) api.css.addRoot(`${varName}: ${resolvedValue};`);
+		}
+		return {
+			value: mixValue ?? varValue,
+			selectorValue: tokenKey,
+			tokenKey,
+			tokenPath: tokenData.path
+		};
+	}
+	if (!hasServerToken) return {
 		value: mixValue ?? tokenValue,
 		selectorValue: tokenData.alpha === void 0 ? tokenValue : tokenKey,
 		tokenKey,

package/dist/use/token/runtime-only.mjs

@@ -143,6 +143,11 @@ const getTokenPath = (api, prop, value) => {
 				selectorValue: value
 			};
 		}
+		if (resolveTokenParts(values, value.split(".")) !== void 0) return {
+			path: `${groupName}.${value}`,
+			source: "prop",
+			values
+		};
 	}
 	if (value in values) return {
 		path: `${groupName}.${value}`,
@@ -166,9 +171,22 @@ const resolveRuntimeToken = (api, prop, value) => {
 	const runtimeOnly = api.runtime?.only === true;
 	const hasServerToken = tokenPaths.has(tokenData.path);
 	const tokenKey = tokenData.selectorValue ?? tokenData.path.split(".").slice(1).join(".");
-	const varValue = `var(${`--${api.selectorPrefix ?? ""}${tokenData.path.replace(/\./g, "-")}`})`;
-	const mixValue = tokenData.alpha === void 0 ? null : `color-mix(in oklab, ${hasServerToken && !runtimeOnly ? varValue : tokenValue} ${tokenData.alpha}%, transparent)`;
-	if (runtimeOnly || !hasServerToken) return {
+	const varName = `--${api.selectorPrefix ?? ""}${tokenData.path.replace(/\./g, "-")}`;
+	const varValue = `var(${varName})`;
+	const mixValue = tokenData.alpha === void 0 ? null : `color-mix(in oklab, ${runtimeOnly || hasServerToken ? varValue : tokenValue} ${tokenData.alpha}%, transparent)`;
+	if (runtimeOnly) {
+		if (api.css && typeof api.css.addRoot === "function") {
+			const resolvedValue = api.dictionary.toValue(tokenValue);
+			if (resolvedValue !== void 0 && resolvedValue !== null) api.css.addRoot(`${varName}: ${resolvedValue};`);
+		}
+		return {
+			value: mixValue ?? varValue,
+			selectorValue: tokenKey,
+			tokenKey,
+			tokenPath: tokenData.path
+		};
+	}
+	if (!hasServerToken) return {
 		value: mixValue ?? tokenValue,
 		selectorValue: tokenData.alpha === void 0 ? tokenValue : tokenKey,
 		tokenKey,

package/dist/use/token/server.cjs

@@ -79,6 +79,22 @@ const warnAlpha = (message) => {
 	alphaWarnings.add(message);
 	console.warn(`[boss-css] ${message}`);
 };
+const emitAllTokenVars = (api) => {
+	if (emittedAllTokens) return;
+	emittedAllTokens = true;
+	hasTokens = true;
+	const addTokenVars = (prefix, value) => {
+		if (value && typeof value === "object" && !Array.isArray(value)) {
+			for (const [key, next] of Object.entries(value)) addTokenVars(prefix ? `${prefix}.${key}` : key, next);
+			return;
+		}
+		if (!prefix) return;
+		const varName = `--${api.selectorPrefix ?? ""}${prefix.replace(/\./g, "-")}`;
+		api.css.addRoot(`${varName}: ${api.dictionary.toValue(value)};`);
+		browserResolvedPaths.add(prefix);
+	};
+	for (const [group, value] of Object.entries(originals)) addTokenVars(group, value);
+};
 const onBoot = async (api) => {
 	hasTokens = false;
 	hasProxyTokens = false;
@@ -230,21 +246,7 @@ const onPropTree = async (api, { tree, parser }) => {
 		hasTokenOverrides = true;
 		hasTokens = true;
 	}
-	if (api.emitAllTokens && !emittedAllTokens) {
-		emittedAllTokens = true;
-		hasTokens = true;
-		const addTokenVars = (prefix, value) => {
-			if (value && typeof value === "object" && !Array.isArray(value)) {
-				for (const [key, next] of Object.entries(value)) addTokenVars(prefix ? `${prefix}.${key}` : key, next);
-				return;
-			}
-			if (!prefix) return;
-			const varName = `--${api.selectorPrefix ?? ""}${prefix.replace(/\./g, "-")}`;
-			api.css.addRoot(`${varName}: ${api.dictionary.toValue(value)};`);
-			browserResolvedPaths.add(prefix);
-		};
-		for (const [group, value] of Object.entries(originals)) addTokenVars(group, value);
-	}
+	if (api.emitAllTokens) emitAllTokenVars(api);
 	const groupsSizeBefore = usedTokenGroups.size;
 	api.walkPropTree(tree, (name, prop) => {
 		const descriptor = api.dictionary.get(name);

package/dist/use/token/server.mjs

@@ -79,6 +79,22 @@ const warnAlpha = (message) => {
 	alphaWarnings.add(message);
 	console.warn(`[boss-css] ${message}`);
 };
+const emitAllTokenVars = (api) => {
+	if (emittedAllTokens) return;
+	emittedAllTokens = true;
+	hasTokens = true;
+	const addTokenVars = (prefix, value) => {
+		if (value && typeof value === "object" && !Array.isArray(value)) {
+			for (const [key, next] of Object.entries(value)) addTokenVars(prefix ? `${prefix}.${key}` : key, next);
+			return;
+		}
+		if (!prefix) return;
+		const varName = `--${api.selectorPrefix ?? ""}${prefix.replace(/\./g, "-")}`;
+		api.css.addRoot(`${varName}: ${api.dictionary.toValue(value)};`);
+		browserResolvedPaths.add(prefix);
+	};
+	for (const [group, value] of Object.entries(originals)) addTokenVars(group, value);
+};
 const onBoot = async (api) => {
 	hasTokens = false;
 	hasProxyTokens = false;
@@ -230,21 +246,7 @@ const onPropTree = async (api, { tree, parser }) => {
 		hasTokenOverrides = true;
 		hasTokens = true;
 	}
-	if (api.emitAllTokens && !emittedAllTokens) {
-		emittedAllTokens = true;
-		hasTokens = true;
-		const addTokenVars = (prefix, value) => {
-			if (value && typeof value === "object" && !Array.isArray(value)) {
-				for (const [key, next] of Object.entries(value)) addTokenVars(prefix ? `${prefix}.${key}` : key, next);
-				return;
-			}
-			if (!prefix) return;
-			const varName = `--${api.selectorPrefix ?? ""}${prefix.replace(/\./g, "-")}`;
-			api.css.addRoot(`${varName}: ${api.dictionary.toValue(value)};`);
-			browserResolvedPaths.add(prefix);
-		};
-		for (const [group, value] of Object.entries(originals)) addTokenVars(group, value);
-	}
+	if (api.emitAllTokens) emitAllTokenVars(api);
 	const groupsSizeBefore = usedTokenGroups.size;
 	api.walkPropTree(tree, (name, prop) => {
 		const descriptor = api.dictionary.get(name);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "boss-css",
-    "version": "0.0.11",
+    "version": "0.0.13",
     "description": "",
     "bin": {
         "boss": "./dist/cli/index.cjs",