boss-css 0.0.1 → 0.0.2

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

@@ -0,0 +1,134 @@
+import { getClassNameProp } from "../../shared/framework.mjs";
+import { cx } from "../../cx/index.mjs";
+import { resolveRuntimeToken } from "../../use/token/runtime-only.mjs";
+import { buildKeyframesRule, normalizeKeyframeStep, parseKeyframesContext } from "../../prop/at/shared.mjs";
+import { resolveAtQuery } from "../../prop/at/runtime-only.mjs";
+import { createChildContext } from "../../prop/child/runtime-only.mjs";
+import { buildRuntimeSelector, resolvePropertyName } from "../../prop/css/runtime-only.mjs";
+import hash from "@emotion/hash";
+import isCSSProp from "@boss-css/is-css-prop";
+
+//#region src/strategy/classname-first/runtime-only.ts
+const name = "classname-first";
+const resolveRuntimeValue = (value) => {
+	if (typeof value !== "function") return value;
+	return resolveRuntimeValue(value());
+};
+const buildAutoKeyframesName = (api, contexts) => {
+	return `kf-${hash(`${api.selectorPrefix ?? ""}|${contexts.join("|")}`)}`;
+};
+const handleKeyframes = (api, { output, tag, contexts, prop, value }) => {
+	const info = parseKeyframesContext(prop);
+	if (!info || !value || typeof value !== "object" || Array.isArray(value)) return false;
+	const classNameProp = getClassNameProp(api.framework);
+	const keyframesContexts = [...contexts, prop];
+	const keyframesName = info.name ?? buildAutoKeyframesName(api, keyframesContexts);
+	const query = resolveAtQuery(api, keyframesContexts);
+	const frames = /* @__PURE__ */ new Map();
+	const selectors = /* @__PURE__ */ new Set();
+	for (const [step, stepValue] of Object.entries(value)) {
+		if (!stepValue || typeof stepValue !== "object" || Array.isArray(stepValue)) continue;
+		const normalizedStep = normalizeKeyframeStep(step);
+		if (!normalizedStep) continue;
+		const stepContexts = [...keyframesContexts, step];
+		for (const [propName, rawValue] of Object.entries(stepValue)) {
+			if (!isCSSProp(tag, propName)) continue;
+			let resolved = resolveRuntimeValue(rawValue);
+			let selectorValue = resolved;
+			const token = resolveRuntimeToken(api, propName, resolved);
+			if (token) {
+				resolved = token.value;
+				selectorValue = token.selectorValue;
+			}
+			const className = api.contextToClassName(propName, selectorValue, stepContexts, false, api.selectorPrefix);
+			const cssClassName = api.contextToClassName(propName, selectorValue, stepContexts, true, api.selectorPrefix);
+			output[classNameProp] = cx(output[classNameProp], className);
+			const selector = buildRuntimeSelector(cssClassName, stepContexts);
+			selectors.add(selector);
+			const propertyName = resolvePropertyName(propName);
+			const valueText = String(api.dictionary.toValue(resolved, propertyName));
+			if (!frames.has(normalizedStep)) frames.set(normalizedStep, /* @__PURE__ */ new Map());
+			frames.get(normalizedStep)?.set(propertyName, valueText);
+		}
+	}
+	if (!frames.size) return true;
+	const css = api.css;
+	if (!css) return true;
+	css.addRule(buildKeyframesRule(keyframesName, frames), query);
+	for (const selector of selectors) {
+		css.selector({
+			selector,
+			query
+		});
+		css.rule("animation-name", keyframesName);
+		css.write();
+	}
+	return true;
+};
+const insertRuntimeRule = (api, className, contexts, prop, value) => {
+	const selector = buildRuntimeSelector(className, contexts);
+	const query = resolveAtQuery(api, contexts);
+	const property = resolvePropertyName(prop);
+	const css = api.css;
+	if (!css) return;
+	css.selector({
+		selector,
+		query
+	});
+	css.rule(property, value);
+	css.write();
+};
+const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) => {
+	const classNameProp = getClassNameProp(api.framework);
+	const outputRecord = output;
+	const inputRecord = input;
+	for (const prop in inputRecord) {
+		const rawValue = inputRecord[prop];
+		if (prop === "child" && rawValue && typeof rawValue === "object" && !Array.isArray(rawValue)) {
+			for (const [selector, childValue] of Object.entries(rawValue)) {
+				const childContext = createChildContext(selector);
+				contexts.push(childContext);
+				api.trigger("onBrowserObjectStart", {
+					input: childValue,
+					output,
+					contexts,
+					tag
+				});
+			}
+			continue;
+		}
+		if (rawValue && typeof rawValue === "object" && !Array.isArray(rawValue)) {
+			if (handleKeyframes(api, {
+				output: outputRecord,
+				tag,
+				contexts,
+				prop,
+				value: rawValue
+			})) continue;
+			contexts.push(prop);
+			api.trigger("onBrowserObjectStart", {
+				input: rawValue,
+				output,
+				contexts,
+				tag
+			});
+			continue;
+		}
+		if (!isCSSProp(tag, prop)) continue;
+		let value = resolveRuntimeValue(rawValue);
+		let selectorValue = value;
+		const token = resolveRuntimeToken(api, prop, value);
+		if (token) {
+			value = token.value;
+			selectorValue = token.selectorValue;
+		}
+		const className = api.contextToClassName(prop, selectorValue, contexts, false, api.selectorPrefix);
+		const cssClassName = api.contextToClassName(prop, selectorValue, contexts, true, api.selectorPrefix);
+		outputRecord[classNameProp] = cx(outputRecord[classNameProp], className);
+		insertRuntimeRule(api, cssClassName, contexts, prop, value);
+	}
+	contexts.pop();
+};
+
+//#endregion
+export { name, onBrowserObjectStart };

package/dist/strategy/classname-first/server.cjs

@@ -0,0 +1,139 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+
+//#region src/strategy/classname-first/server.ts
+var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	name: () => name,
+	onBoot: () => onBoot,
+	onPropTree: () => onPropTree,
+	settings: () => settings
+});
+const settings = new Map([["emitRuntime", false], ["emitAllTokens", false]]);
+let needsRuntime = false;
+const isFunctionProp = (prop) => typeof prop?.isFn === "boolean" && prop.isFn;
+const resolveDescriptor = (api, name) => {
+	return api.dictionary.resolve(name);
+};
+const normalizeArrayValue = (value) => {
+	return value.map((entry) => {
+		if (entry && typeof entry === "object" && "value" in entry) {
+			const raw = entry.value;
+			return Array.isArray(raw) ? normalizeArrayValue(raw) : raw;
+		}
+		return entry;
+	});
+};
+const describeLocation = (file, code) => {
+	if (!file?.path && !code) return "";
+	const parts = [];
+	if (file?.path) parts.push(file.path);
+	if (code) parts.push(code.trim());
+	return parts.length ? ` (${parts.join(" | ")})` : "";
+};
+const onBoot = async (api) => {
+	const runtimeConfig = api.runtime;
+	const hasRuntimeConfig = Boolean(runtimeConfig && (runtimeConfig.only !== void 0 || runtimeConfig.strategy));
+	const runtimeStrategy = runtimeConfig?.strategy ?? name;
+	const runtimeModule = hasRuntimeConfig ? "boss-css/strategy/runtime/runtime-only" : "boss-css/strategy/classname-first/browser";
+	const shouldEmitRuntime = () => needsRuntime || settings.get("emitRuntime") === true;
+	const runtimePlugin = { onBrowserObjectStart: api.file.js.import({
+		name: "onBrowserObjectStart",
+		from: runtimeModule
+	}, shouldEmitRuntime) };
+	if (hasRuntimeConfig) runtimePlugin.onInit = api.file.js.import({
+		name: "onInit",
+		from: runtimeModule
+	}, shouldEmitRuntime);
+	api.file.js.config({
+		from: runtimeModule,
+		config: { plugin: runtimePlugin }
+	}, shouldEmitRuntime);
+	api.file.js.config({
+		from: "boss-css/strategy/classname-first",
+		config: {
+			selectorPrefix: api.selectorPrefix,
+			selectorScope: api.selectorScope,
+			strategy: runtimeStrategy,
+			...hasRuntimeConfig ? { runtime: runtimeConfig } : {}
+		}
+	}, shouldEmitRuntime);
+	api.strategy = name;
+	if (settings.get("emitAllTokens") === true || process.env.NODE_ENV !== "production") api.emitAllTokens = true;
+};
+const onPropTree = async (api, { tree, parser, file, code }) => {
+	if (api.runtime?.only === true) return;
+	const invalidProps = [];
+	const pruneTree = (node) => {
+		const next = {};
+		for (const [name, prop] of Object.entries(node)) {
+			const value = prop?.value;
+			const resolved = resolveDescriptor(api, name);
+			const isCssProp = Boolean(resolved.descriptor?.isCSSProp);
+			if (value && typeof value === "object" && !Array.isArray(value)) {
+				const nested = pruneTree(value);
+				if (Object.keys(nested).length) next[name] = {
+					...prop,
+					value: nested
+				};
+				continue;
+			}
+			if (!isCssProp) {
+				next[name] = prop;
+				continue;
+			}
+			needsRuntime ||= parser === "jsx";
+			if (prop.dynamic && !isFunctionProp(prop)) {
+				invalidProps.push(name);
+				continue;
+			}
+			if (prop.dynamic && isFunctionProp(prop)) {
+				next[name] = {
+					...prop,
+					value: null,
+					selectorValue: null
+				};
+				continue;
+			}
+			const normalizedValue = Array.isArray(prop.value) ? normalizeArrayValue(prop.value) : prop.value;
+			next[name] = {
+				...prop,
+				value: normalizedValue,
+				selectorValue: prop.selectorValue ?? normalizedValue
+			};
+		}
+		return next;
+	};
+	const pruned = pruneTree(tree);
+	Object.keys(tree).forEach((key) => delete tree[key]);
+	Object.assign(tree, pruned);
+	if (invalidProps.length) {
+		const location = describeLocation(file, code);
+		for (const name of invalidProps) console.warn(`[boss-css] classname-first skipped dynamic prop "${name}". Use ${name}={() => value}.${location}`);
+	}
+	for (const [name, prop] of Object.entries(tree)) {
+		const resolved = resolveDescriptor(api, name);
+		if (!resolved.descriptor) continue;
+		if (resolved.suffix) {
+			prop.named = resolved.suffix;
+			prop.rawName = resolved.raw;
+		}
+		const { aliases } = resolved.descriptor;
+		await api.trigger("onProp", {
+			name: resolved.name,
+			prop,
+			contexts: [],
+			file
+		}, ({ dependencies }) => {
+			return !dependencies || aliases.some((alias) => dependencies.has(alias));
+		});
+	}
+};
+const name = "classname-first";
+
+//#endregion
+Object.defineProperty(exports, 'server_exports', {
+  enumerable: true,
+  get: function () {
+    return server_exports;
+  }
+});
+exports.settings = settings;

package/dist/strategy/classname-first/server.mjs

@@ -0,0 +1,133 @@
+import { __exportAll } from "../../_virtual/rolldown_runtime.mjs";
+
+//#region src/strategy/classname-first/server.ts
+var server_exports = /* @__PURE__ */ __exportAll({
+	name: () => name,
+	onBoot: () => onBoot,
+	onPropTree: () => onPropTree,
+	settings: () => settings
+});
+const settings = new Map([["emitRuntime", false], ["emitAllTokens", false]]);
+let needsRuntime = false;
+const isFunctionProp = (prop) => typeof prop?.isFn === "boolean" && prop.isFn;
+const resolveDescriptor = (api, name) => {
+	return api.dictionary.resolve(name);
+};
+const normalizeArrayValue = (value) => {
+	return value.map((entry) => {
+		if (entry && typeof entry === "object" && "value" in entry) {
+			const raw = entry.value;
+			return Array.isArray(raw) ? normalizeArrayValue(raw) : raw;
+		}
+		return entry;
+	});
+};
+const describeLocation = (file, code) => {
+	if (!file?.path && !code) return "";
+	const parts = [];
+	if (file?.path) parts.push(file.path);
+	if (code) parts.push(code.trim());
+	return parts.length ? ` (${parts.join(" | ")})` : "";
+};
+const onBoot = async (api) => {
+	const runtimeConfig = api.runtime;
+	const hasRuntimeConfig = Boolean(runtimeConfig && (runtimeConfig.only !== void 0 || runtimeConfig.strategy));
+	const runtimeStrategy = runtimeConfig?.strategy ?? name;
+	const runtimeModule = hasRuntimeConfig ? "boss-css/strategy/runtime/runtime-only" : "boss-css/strategy/classname-first/browser";
+	const shouldEmitRuntime = () => needsRuntime || settings.get("emitRuntime") === true;
+	const runtimePlugin = { onBrowserObjectStart: api.file.js.import({
+		name: "onBrowserObjectStart",
+		from: runtimeModule
+	}, shouldEmitRuntime) };
+	if (hasRuntimeConfig) runtimePlugin.onInit = api.file.js.import({
+		name: "onInit",
+		from: runtimeModule
+	}, shouldEmitRuntime);
+	api.file.js.config({
+		from: runtimeModule,
+		config: { plugin: runtimePlugin }
+	}, shouldEmitRuntime);
+	api.file.js.config({
+		from: "boss-css/strategy/classname-first",
+		config: {
+			selectorPrefix: api.selectorPrefix,
+			selectorScope: api.selectorScope,
+			strategy: runtimeStrategy,
+			...hasRuntimeConfig ? { runtime: runtimeConfig } : {}
+		}
+	}, shouldEmitRuntime);
+	api.strategy = name;
+	if (settings.get("emitAllTokens") === true || process.env.NODE_ENV !== "production") api.emitAllTokens = true;
+};
+const onPropTree = async (api, { tree, parser, file, code }) => {
+	if (api.runtime?.only === true) return;
+	const invalidProps = [];
+	const pruneTree = (node) => {
+		const next = {};
+		for (const [name, prop] of Object.entries(node)) {
+			const value = prop?.value;
+			const resolved = resolveDescriptor(api, name);
+			const isCssProp = Boolean(resolved.descriptor?.isCSSProp);
+			if (value && typeof value === "object" && !Array.isArray(value)) {
+				const nested = pruneTree(value);
+				if (Object.keys(nested).length) next[name] = {
+					...prop,
+					value: nested
+				};
+				continue;
+			}
+			if (!isCssProp) {
+				next[name] = prop;
+				continue;
+			}
+			needsRuntime ||= parser === "jsx";
+			if (prop.dynamic && !isFunctionProp(prop)) {
+				invalidProps.push(name);
+				continue;
+			}
+			if (prop.dynamic && isFunctionProp(prop)) {
+				next[name] = {
+					...prop,
+					value: null,
+					selectorValue: null
+				};
+				continue;
+			}
+			const normalizedValue = Array.isArray(prop.value) ? normalizeArrayValue(prop.value) : prop.value;
+			next[name] = {
+				...prop,
+				value: normalizedValue,
+				selectorValue: prop.selectorValue ?? normalizedValue
+			};
+		}
+		return next;
+	};
+	const pruned = pruneTree(tree);
+	Object.keys(tree).forEach((key) => delete tree[key]);
+	Object.assign(tree, pruned);
+	if (invalidProps.length) {
+		const location = describeLocation(file, code);
+		for (const name of invalidProps) console.warn(`[boss-css] classname-first skipped dynamic prop "${name}". Use ${name}={() => value}.${location}`);
+	}
+	for (const [name, prop] of Object.entries(tree)) {
+		const resolved = resolveDescriptor(api, name);
+		if (!resolved.descriptor) continue;
+		if (resolved.suffix) {
+			prop.named = resolved.suffix;
+			prop.rawName = resolved.raw;
+		}
+		const { aliases } = resolved.descriptor;
+		await api.trigger("onProp", {
+			name: resolved.name,
+			prop,
+			contexts: [],
+			file
+		}, ({ dependencies }) => {
+			return !dependencies || aliases.some((alias) => dependencies.has(alias));
+		});
+	}
+};
+const name = "classname-first";
+
+//#endregion
+export { server_exports, settings };

package/dist/strategy/classname-only/server.cjs

@@ -0,0 +1,43 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+
+//#region src/strategy/classname-only/server.ts
+var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	name: () => name,
+	onBoot: () => onBoot,
+	onPropTree: () => onPropTree
+});
+const onBoot = async (api) => {
+	api.strategy = name;
+};
+const onPropTree = async (api, { tree, file }) => {
+	if (api.runtime?.only === true) return;
+	for (const [name, prop] of Object.entries(tree)) {
+		const resolved = api.dictionary.resolve(name);
+		if (!resolved.descriptor) continue;
+		if (resolved.suffix) {
+			prop.named = resolved.suffix;
+			prop.rawName = resolved.raw;
+		}
+		const { aliases } = resolved.descriptor;
+		await api.trigger("onProp", {
+			name: resolved.name,
+			prop,
+			contexts: [],
+			file
+		}, ({ dependencies }) => {
+			return !dependencies || aliases.some((alias) => dependencies.has(alias));
+		});
+	}
+};
+const name = "classname-only";
+
+//#endregion
+exports.name = name;
+exports.onBoot = onBoot;
+exports.onPropTree = onPropTree;
+Object.defineProperty(exports, 'server_exports', {
+  enumerable: true,
+  get: function () {
+    return server_exports;
+  }
+});

package/dist/strategy/classname-only/server.mjs

@@ -0,0 +1,35 @@
+import { __exportAll } from "../../_virtual/rolldown_runtime.mjs";
+
+//#region src/strategy/classname-only/server.ts
+var server_exports = /* @__PURE__ */ __exportAll({
+	name: () => name,
+	onBoot: () => onBoot,
+	onPropTree: () => onPropTree
+});
+const onBoot = async (api) => {
+	api.strategy = name;
+};
+const onPropTree = async (api, { tree, file }) => {
+	if (api.runtime?.only === true) return;
+	for (const [name, prop] of Object.entries(tree)) {
+		const resolved = api.dictionary.resolve(name);
+		if (!resolved.descriptor) continue;
+		if (resolved.suffix) {
+			prop.named = resolved.suffix;
+			prop.rawName = resolved.raw;
+		}
+		const { aliases } = resolved.descriptor;
+		await api.trigger("onProp", {
+			name: resolved.name,
+			prop,
+			contexts: [],
+			file
+		}, ({ dependencies }) => {
+			return !dependencies || aliases.some((alias) => dependencies.has(alias));
+		});
+	}
+};
+const name = "classname-only";
+
+//#endregion
+export { name, onBoot, onPropTree, server_exports };

package/dist/strategy/inline-first/browser.cjs

@@ -0,0 +1,61 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_framework = require('../../shared/framework.cjs');
+const require_cx_index = require('../../cx/index.cjs');
+let _boss_css_is_css_prop = require("@boss-css/is-css-prop");
+_boss_css_is_css_prop = require_rolldown_runtime.__toESM(_boss_css_is_css_prop);
+
+//#region src/strategy/inline-first/browser.ts
+const name = "inline-first";
+const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) => {
+	const classNameProp = require_framework.getClassNameProp(api.framework);
+	const outputRecord = output;
+	outputRecord.style ??= {};
+	const inputRecord = input;
+	for (const prop in inputRecord) {
+		const value = inputRecord[prop];
+		const resolved = api.dictionary.resolve(prop);
+		const descriptor = resolved.descriptor;
+		const resolvedName = resolved.name;
+		if (prop === "child" && value && typeof value === "object" && !Array.isArray(value)) {
+			for (const [selector, childValue] of Object.entries(value)) {
+				const childContext = `[${selector.replace(/ /g, "_")}]`;
+				contexts.push(childContext);
+				api.trigger("onBrowserObjectStart", {
+					input: childValue,
+					output,
+					contexts
+				});
+			}
+			continue;
+		}
+		if (typeof value === "object" && value !== null && !Array.isArray(value)) if (!descriptor || !descriptor.handler) {
+			contexts.push(prop);
+			api.trigger("onBrowserObjectStart", {
+				input: value,
+				output,
+				contexts
+			});
+		} else descriptor.handler({
+			value,
+			output: outputRecord,
+			contexts
+		});
+		else if (descriptor?.handler) descriptor.handler({
+			value,
+			output: outputRecord,
+			contexts
+		});
+		else if (!descriptor && !contexts.length && (0, _boss_css_is_css_prop.default)(tag, resolvedName)) outputRecord.style[resolvedName] = api.dictionary.toValue(value, resolvedName);
+		else {
+			const className = api.contextToClassName(resolvedName, null, contexts, false, api.selectorPrefix);
+			const cssVarName = api.contextToCSSVariable(resolvedName, null, contexts, api.selectorPrefix);
+			outputRecord.style[cssVarName] = api.dictionary.toValue(value, resolvedName);
+			outputRecord[classNameProp] = require_cx_index.cx(outputRecord[classNameProp], className);
+		}
+	}
+	contexts.pop();
+};
+
+//#endregion
+exports.name = name;
+exports.onBrowserObjectStart = onBrowserObjectStart;

package/dist/strategy/inline-first/browser.mjs

@@ -0,0 +1,58 @@
+import { getClassNameProp } from "../../shared/framework.mjs";
+import { cx } from "../../cx/index.mjs";
+import isCSSProp from "@boss-css/is-css-prop";
+
+//#region src/strategy/inline-first/browser.ts
+const name = "inline-first";
+const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) => {
+	const classNameProp = getClassNameProp(api.framework);
+	const outputRecord = output;
+	outputRecord.style ??= {};
+	const inputRecord = input;
+	for (const prop in inputRecord) {
+		const value = inputRecord[prop];
+		const resolved = api.dictionary.resolve(prop);
+		const descriptor = resolved.descriptor;
+		const resolvedName = resolved.name;
+		if (prop === "child" && value && typeof value === "object" && !Array.isArray(value)) {
+			for (const [selector, childValue] of Object.entries(value)) {
+				const childContext = `[${selector.replace(/ /g, "_")}]`;
+				contexts.push(childContext);
+				api.trigger("onBrowserObjectStart", {
+					input: childValue,
+					output,
+					contexts
+				});
+			}
+			continue;
+		}
+		if (typeof value === "object" && value !== null && !Array.isArray(value)) if (!descriptor || !descriptor.handler) {
+			contexts.push(prop);
+			api.trigger("onBrowserObjectStart", {
+				input: value,
+				output,
+				contexts
+			});
+		} else descriptor.handler({
+			value,
+			output: outputRecord,
+			contexts
+		});
+		else if (descriptor?.handler) descriptor.handler({
+			value,
+			output: outputRecord,
+			contexts
+		});
+		else if (!descriptor && !contexts.length && isCSSProp(tag, resolvedName)) outputRecord.style[resolvedName] = api.dictionary.toValue(value, resolvedName);
+		else {
+			const className = api.contextToClassName(resolvedName, null, contexts, false, api.selectorPrefix);
+			const cssVarName = api.contextToCSSVariable(resolvedName, null, contexts, api.selectorPrefix);
+			outputRecord.style[cssVarName] = api.dictionary.toValue(value, resolvedName);
+			outputRecord[classNameProp] = cx(outputRecord[classNameProp], className);
+		}
+	}
+	contexts.pop();
+};
+
+//#endregion
+export { name, onBrowserObjectStart };