boss-css 0.0.1 → 0.0.3

package/dist/postcss/index.mjs

@@ -0,0 +1,16 @@
+import { runPostcss } from "../tasks/postcss.mjs";
+
+//#region src/postcss/index.ts
+function postcssPlugin(options = {}) {
+	return {
+		postcssPlugin: "boss-postcss-plugin",
+		plugins: [async (root, result) => {
+			await runPostcss(root, result, options);
+		}]
+	};
+}
+postcssPlugin.postcss = true;
+var postcss_default = postcssPlugin;
+
+//#endregion
+export { postcss_default as default };

package/dist/prop/at/runtime-only.cjs

@@ -0,0 +1,90 @@
+const require_shared = require('./shared.cjs');
+
+//#region src/prop/at/runtime-only.ts
+const atValuesCache = /* @__PURE__ */ new WeakMap();
+const buildQuery = (from, to) => {
+	if (from === null && to === null) return "";
+	if (from === null) return `@media screen and (max-width: ${to}px)`;
+	if (to === null) return `@media screen and (min-width: ${from}px)`;
+	return `@media screen and (min-width: ${from}px) and (max-width: ${to}px)`;
+};
+const getAtValues = (api) => {
+	if (atValuesCache.has(api)) return atValuesCache.get(api);
+	const values = new Map(require_shared.baseAtValues);
+	const breakpoints = getAtBreakpoints(api);
+	Object.entries(breakpoints).forEach(([name, [from, to]]) => {
+		values.set(name, buildQuery(from, to));
+		if (!name.endsWith("+") && !name.endsWith("-")) {
+			values.set(`${name}+`, buildQuery(from, null));
+			values.set(`${name}-`, buildQuery(null, to));
+		}
+	});
+	atValuesCache.set(api, values);
+	return values;
+};
+const getAtBreakpoints = (api) => ({
+	...require_shared.defaultBreakpoints,
+	...api.breakpoints ?? {}
+});
+const getContainerInfo = (contexts) => {
+	for (let i = contexts.length - 1; i >= 0; i -= 1) {
+		const info = require_shared.parseContainerContext(contexts[i]);
+		if (info) return {
+			...info,
+			index: i
+		};
+	}
+	return null;
+};
+const resolveMediaQuery = (api, key) => {
+	const direct = getAtValues(api).get(key);
+	if (direct) return direct;
+	const range = require_shared.parseRangeKey(key, getAtBreakpoints(api), api.unit ?? "px");
+	if (range) return require_shared.buildMediaQuery(range) ?? key;
+	return key;
+};
+const resolveContainerQuery = (api, key, name) => {
+	if (key.startsWith("@")) return key;
+	const range = require_shared.parseRangeKey(key, getAtBreakpoints(api), api.unit ?? "px");
+	if (range) return require_shared.buildContainerQuery(range, name);
+	return `${name ? `@container ${name}` : "@container"} ${key}`;
+};
+const resolveAtQuery = (api, contexts) => {
+	const atIndex = contexts.lastIndexOf("at");
+	if (atIndex !== -1 && contexts[atIndex + 1]) {
+		const containerInfo$1 = require_shared.parseContainerContext(contexts[atIndex + 1]);
+		if (containerInfo$1) {
+			const key$1 = contexts[atIndex + 2];
+			if (!key$1) return null;
+			return resolveContainerQuery(api, key$1, containerInfo$1.name);
+		}
+		const key = contexts[atIndex + 1];
+		return resolveMediaQuery(api, key);
+	}
+	const containerInfo = getContainerInfo(contexts);
+	if (containerInfo) {
+		const key = contexts[containerInfo.index + 1];
+		if (key) return resolveContainerQuery(api, key, containerInfo.name);
+	}
+	for (let i = contexts.length - 1; i >= 0; i -= 1) {
+		const key = contexts[i];
+		if (key.startsWith("@")) return key;
+		const range = require_shared.parseRangeKey(key, getAtBreakpoints(api), api.unit ?? "px");
+		if (range) return require_shared.buildMediaQuery(range) ?? key;
+		const values = getAtValues(api);
+		if (values.has(key)) return values.get(key);
+	}
+	return null;
+};
+const name = "at";
+const onInit = (api) => {
+	api.breakpoints = {
+		...require_shared.defaultBreakpoints,
+		...api.breakpoints ?? {}
+	};
+};
+
+//#endregion
+exports.name = name;
+exports.onInit = onInit;
+exports.resolveAtQuery = resolveAtQuery;

package/dist/prop/at/runtime-only.mjs

@@ -0,0 +1,88 @@
+import { baseAtValues, buildContainerQuery, buildMediaQuery, defaultBreakpoints, parseContainerContext, parseRangeKey } from "./shared.mjs";
+
+//#region src/prop/at/runtime-only.ts
+const atValuesCache = /* @__PURE__ */ new WeakMap();
+const buildQuery = (from, to) => {
+	if (from === null && to === null) return "";
+	if (from === null) return `@media screen and (max-width: ${to}px)`;
+	if (to === null) return `@media screen and (min-width: ${from}px)`;
+	return `@media screen and (min-width: ${from}px) and (max-width: ${to}px)`;
+};
+const getAtValues = (api) => {
+	if (atValuesCache.has(api)) return atValuesCache.get(api);
+	const values = new Map(baseAtValues);
+	const breakpoints = getAtBreakpoints(api);
+	Object.entries(breakpoints).forEach(([name, [from, to]]) => {
+		values.set(name, buildQuery(from, to));
+		if (!name.endsWith("+") && !name.endsWith("-")) {
+			values.set(`${name}+`, buildQuery(from, null));
+			values.set(`${name}-`, buildQuery(null, to));
+		}
+	});
+	atValuesCache.set(api, values);
+	return values;
+};
+const getAtBreakpoints = (api) => ({
+	...defaultBreakpoints,
+	...api.breakpoints ?? {}
+});
+const getContainerInfo = (contexts) => {
+	for (let i = contexts.length - 1; i >= 0; i -= 1) {
+		const info = parseContainerContext(contexts[i]);
+		if (info) return {
+			...info,
+			index: i
+		};
+	}
+	return null;
+};
+const resolveMediaQuery = (api, key) => {
+	const direct = getAtValues(api).get(key);
+	if (direct) return direct;
+	const range = parseRangeKey(key, getAtBreakpoints(api), api.unit ?? "px");
+	if (range) return buildMediaQuery(range) ?? key;
+	return key;
+};
+const resolveContainerQuery = (api, key, name) => {
+	if (key.startsWith("@")) return key;
+	const range = parseRangeKey(key, getAtBreakpoints(api), api.unit ?? "px");
+	if (range) return buildContainerQuery(range, name);
+	return `${name ? `@container ${name}` : "@container"} ${key}`;
+};
+const resolveAtQuery = (api, contexts) => {
+	const atIndex = contexts.lastIndexOf("at");
+	if (atIndex !== -1 && contexts[atIndex + 1]) {
+		const containerInfo$1 = parseContainerContext(contexts[atIndex + 1]);
+		if (containerInfo$1) {
+			const key$1 = contexts[atIndex + 2];
+			if (!key$1) return null;
+			return resolveContainerQuery(api, key$1, containerInfo$1.name);
+		}
+		const key = contexts[atIndex + 1];
+		return resolveMediaQuery(api, key);
+	}
+	const containerInfo = getContainerInfo(contexts);
+	if (containerInfo) {
+		const key = contexts[containerInfo.index + 1];
+		if (key) return resolveContainerQuery(api, key, containerInfo.name);
+	}
+	for (let i = contexts.length - 1; i >= 0; i -= 1) {
+		const key = contexts[i];
+		if (key.startsWith("@")) return key;
+		const range = parseRangeKey(key, getAtBreakpoints(api), api.unit ?? "px");
+		if (range) return buildMediaQuery(range) ?? key;
+		const values = getAtValues(api);
+		if (values.has(key)) return values.get(key);
+	}
+	return null;
+};
+const name = "at";
+const onInit = (api) => {
+	api.breakpoints = {
+		...defaultBreakpoints,
+		...api.breakpoints ?? {}
+	};
+};
+
+//#endregion
+export { name, onInit, resolveAtQuery };

package/dist/prop/at/server.cjs

@@ -0,0 +1,282 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_prop_pseudo_server = require('../pseudo/server.cjs');
+const require_shared = require('./shared.cjs');
+let _emotion_hash = require("@emotion/hash");
+_emotion_hash = require_rolldown_runtime.__toESM(_emotion_hash);
+
+//#region src/prop/at/server.ts
+var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	DOWN: () => DOWN,
+	UP: () => UP,
+	dependencies: () => dependencies,
+	name: () => name,
+	onBoot: () => onBoot,
+	onProp: () => onProp,
+	onReady: () => onReady,
+	values: () => values
+});
+const UP = "+";
+const DOWN = "-";
+const name = "at";
+const dependencies = new Set([
+	"at",
+	"container",
+	"keyframes"
+]);
+const values = new Map([...require_shared.baseAtValues]);
+const onBoot = async (api) => {
+	const baseBreakpoints = {
+		...require_shared.defaultBreakpoints,
+		...api.breakpoints ?? {}
+	};
+	api.breakpoints = { ...baseBreakpoints };
+	const breakpoints = api.breakpoints;
+	Object.entries(breakpoints).forEach(([name, [from, to]]) => [
+		["", [from, to]],
+		[UP, [from, null]],
+		[DOWN, [null, to]]
+	].forEach(([symbol, fromTo]) => breakpoints[`${name}${symbol}`] = fromTo));
+	Object.entries(breakpoints).forEach(([name, [from, to]]) => {
+		dependencies.add(name);
+		if (from === null) values.set(name, `@media screen and (max-width: ${to}px)`);
+		else if (to === null) values.set(name, `@media screen and (min-width: ${from}px)`);
+		else values.set(name, `@media screen and (min-width: ${from}px) and (max-width: ${to}px)`);
+	});
+	Array.from(values.keys()).forEach((name) => dependencies.add(name));
+	api.file.js.dts.set("body", `pseudo:AtPropsShorthandsInterfaceStart`, `export interface $$AtPropsShorthands {`);
+	for (const name of dependencies) {
+		if (name === "container") continue;
+		const description = name === "keyframes" ? "@keyframes" : values.get(name) ?? "";
+		const prop = {
+			property: name,
+			aliases: [name],
+			description
+		};
+		api.dictionary.set(name, prop);
+		name !== "at" && api.file.js.dts.set("body", `at:${name}:description`, prop.description).set("body", `at:${name}:declaration`, `  "${name}"?: ${name === "keyframes" ? "$$KeyframesProps" : "$$FinalProps"}\n`);
+	}
+	api.file.js.dts.set("body", `pseudo:AtPropsShorthandsInterfaceEnd`, `}`).set("body", "$$:KeyframesProps", `export type $$KeyframesProps = {
+    [key: string]: $$FinalProps
+}`).set("body", "$$:AtNamedProps", `export type $$AtNamedProps = {
+    [key in \`container_\${string}\`]?: StandardProperties['container'] | $$FinalProps
+} & {
+    [key in \`keyframes_\${string}\`]?: $$KeyframesProps
+}`).set("body", `$$:AtProps`, `export type $$AtProps = {
+    at?: {
+        [key: string]: $$FinalProps | $$KeyframesProps
+    } & { [key: \`keyframes \${string}\`]: $$KeyframesProps } & $$AtPropsShorthands & $$AtNamedProps
+} & $$AtPropsShorthands & $$AtNamedProps`).replace("body", `$$:FinalProps`, (v) => `${v} & $$AtProps`);
+	const runtimeConfig = api.runtime;
+	if (Boolean(runtimeConfig && (runtimeConfig.only !== void 0 || runtimeConfig.strategy))) {
+		api.file.js.importAndConfig({
+			name: "onInit",
+			from: "boss-css/prop/at/runtime-only"
+		}, () => true);
+		api.file.js.config({
+			from: "boss-css/prop/at/runtime-only",
+			config: { breakpoints: baseBreakpoints }
+		}, () => true);
+	}
+};
+const onReady = async (api) => {
+	const updateFinalProps = (value) => {
+		const content = typeof value === "string" ? value : value?.content;
+		if (typeof content !== "string") return value;
+		if (!content.includes("StandardProperties")) return content;
+		if (content.includes(`Omit<StandardProperties, 'container'>`)) return content;
+		return content.replace(" & StandardProperties", () => {
+			return ` & Omit<StandardProperties, 'container'> & { container?: StandardProperties['container'] | $$FinalProps }`;
+		});
+	};
+	api.file.js.dts.replace("body", "$$:FinalProps", updateFinalProps);
+};
+const isContainerContext = (value) => Boolean(require_shared.parseContainerContext(value));
+const isKeyframesContext = (value) => Boolean(require_shared.parseKeyframesContext(value));
+const getContainerInfo = (contexts) => {
+	for (let i = contexts.length - 1; i >= 0; i -= 1) {
+		const info = require_shared.parseContainerContext(contexts[i]);
+		if (info) return info;
+	}
+	return null;
+};
+const getContainerInfoWithIndex = (contexts) => {
+	for (let i = contexts.length - 1; i >= 0; i -= 1) {
+		const info = require_shared.parseContainerContext(contexts[i]);
+		if (info) return {
+			...info,
+			index: i
+		};
+	}
+	return null;
+};
+const resolveMediaQuery = (api, key) => {
+	const direct = values.get(key);
+	if (direct) return direct;
+	const range = require_shared.parseRangeKey(key, api.breakpoints ?? {}, api.unit ?? "px");
+	if (range) return require_shared.buildMediaQuery(range) ?? key;
+	return key;
+};
+const resolveContainerQuery = (api, key, name) => {
+	if (key.startsWith("@")) return key;
+	const range = require_shared.parseRangeKey(key, api.breakpoints ?? {}, api.unit ?? "px");
+	if (range) return require_shared.buildContainerQuery(range, name);
+	return `${name ? `@container ${name}` : "@container"} ${key}`;
+};
+const resolveAtQuery = (api, contexts, key) => {
+	const containerInfo = getContainerInfo(contexts);
+	if (containerInfo) return resolveContainerQuery(api, key, containerInfo.name);
+	return resolveMediaQuery(api, key);
+};
+const resolveQueryFromContexts = (api, contexts) => {
+	const atIndex = contexts.lastIndexOf("at");
+	if (atIndex !== -1 && contexts[atIndex + 1]) {
+		const containerInfo$1 = require_shared.parseContainerContext(contexts[atIndex + 1]);
+		if (containerInfo$1) {
+			const key$1 = contexts[atIndex + 2];
+			if (!key$1) return null;
+			return resolveContainerQuery(api, key$1, containerInfo$1.name);
+		}
+		const key = contexts[atIndex + 1];
+		return resolveMediaQuery(api, key);
+	}
+	const containerInfo = getContainerInfoWithIndex(contexts);
+	if (containerInfo) {
+		const key = contexts[containerInfo.index + 1];
+		if (key) return resolveContainerQuery(api, key, containerInfo.name);
+	}
+	for (let i = contexts.length - 1; i >= 0; i -= 1) {
+		const key = contexts[i];
+		if (key.startsWith("@")) return key;
+		const range = require_shared.parseRangeKey(key, api.breakpoints ?? {}, api.unit ?? "px");
+		if (range) return require_shared.buildMediaQuery(range) ?? key;
+		const direct = values.get(key);
+		if (direct) return direct;
+	}
+	return null;
+};
+const buildAutoKeyframesName = (api, contexts) => {
+	return `kf-${(0, _emotion_hash.default)(`${api.selectorPrefix ?? ""}|${contexts.join("|")}`)}`;
+};
+const onProp = async (api, { name, prop, contexts, preferVariables, file }) => {
+	const isAt = name === "at";
+	const contextName = prop?.named ? `${name} ${prop.named}` : name;
+	const handleKeyframes = async (entries, activeContexts) => {
+		const keyframesContext = activeContexts.at(-1);
+		if (!keyframesContext) return;
+		const keyframesInfo = require_shared.parseKeyframesContext(keyframesContext);
+		if (!keyframesInfo) return;
+		const keyframesName = keyframesInfo.name ?? buildAutoKeyframesName(api, activeContexts);
+		const query = resolveQueryFromContexts(api, activeContexts);
+		const frames = /* @__PURE__ */ new Map();
+		const selectors = /* @__PURE__ */ new Set();
+		for (const [step, stepProp] of Object.entries(entries)) {
+			if (!stepProp?.value || typeof stepProp.value !== "object" || Array.isArray(stepProp.value)) continue;
+			const normalizedStep = require_shared.normalizeKeyframeStep(step);
+			if (!normalizedStep) continue;
+			const stepContexts = [...activeContexts, step];
+			const stepEntries = stepProp.value;
+			for (const [propName, propValue] of Object.entries(stepEntries)) {
+				if (!propValue || typeof propValue !== "object" || Array.isArray(propValue)) continue;
+				const resolved = api.dictionary.resolve(propName);
+				const descriptor = resolved.descriptor;
+				const isCustomProperty = typeof propName === "string" && propName.startsWith("--");
+				if (!descriptor?.isCSSProp && !isCustomProperty) continue;
+				const propertyName = isCustomProperty ? propName : descriptor?.property ?? api.camelCaseToDash(propName);
+				const selectorValue = propValue.selectorValue ?? (preferVariables ? null : propValue.value);
+				const classToken = propValue.classToken;
+				const resolvedName = resolved?.name ?? propName;
+				const className = classToken ? null : api.contextToClassName(resolvedName, selectorValue, stepContexts, true, api.selectorPrefix);
+				const baseSelector = classToken ? api.classTokenToSelector(classToken) : `.${className}`;
+				const pseudoChain = stepContexts.filter((context) => require_prop_pseudo_server.dependencies.has(context));
+				const baseWithPseudos = pseudoChain.length ? `${baseSelector}:${pseudoChain.join(":")}` : baseSelector;
+				const selector = api.applyChildSelectors(baseWithPseudos, stepContexts);
+				selectors.add(selector);
+				const value = propValue.value === null ? `var(${api.contextToCSSVariable(resolvedName, null, stepContexts, api.selectorPrefix)})` : String(api.dictionary.toValue(propValue.value, propertyName));
+				if (!frames.has(normalizedStep)) frames.set(normalizedStep, /* @__PURE__ */ new Map());
+				frames.get(normalizedStep)?.set(propertyName, value);
+			}
+		}
+		if (!frames.size) return;
+		api.css.addRule(require_shared.buildKeyframesRule(keyframesName, frames), query);
+		const needsImportant = api.strategy === "inline-first" && preferVariables === true && activeContexts.length > 0;
+		for (const selector of selectors) {
+			api.css.selector({
+				selector,
+				query
+			});
+			api.css.rule("animation-name", keyframesName, needsImportant ? { important: true } : void 0);
+			api.css.write();
+		}
+	};
+	const processEntries = async (entries, nextContexts) => {
+		for (const [key, styleProp] of Object.entries(entries)) {
+			if (!styleProp?.value || typeof styleProp.value !== "object" || Array.isArray(styleProp.value)) continue;
+			const styleEntries = styleProp.value;
+			if (isContainerContext(key)) {
+				nextContexts.push(key);
+				await processEntries(styleEntries, nextContexts);
+				nextContexts.pop();
+				continue;
+			}
+			if (isKeyframesContext(key)) {
+				nextContexts.push(key);
+				await handleKeyframes(styleEntries, nextContexts);
+				nextContexts.pop();
+				continue;
+			}
+			nextContexts.push(key);
+			const query = resolveAtQuery(api, nextContexts, key);
+			for (const i in styleEntries) {
+				const entry = styleEntries[i];
+				const classToken = entry?.classToken;
+				const resolved = api.dictionary.resolve(i);
+				const resolvedName = resolved.descriptor ? resolved.name : i;
+				if (resolved.suffix) {
+					entry.named = resolved.suffix;
+					entry.rawName = resolved.raw;
+				}
+				const selectorValue = entry?.selectorValue ?? (preferVariables ? null : entry.value);
+				const className = classToken ? null : api.contextToClassName(resolvedName, selectorValue, nextContexts, true, api.selectorPrefix);
+				const baseSelector = classToken ? api.classTokenToSelector(classToken) : `.${className}`;
+				const pseudoChain = nextContexts.filter((context) => require_prop_pseudo_server.dependencies.has(context));
+				const baseWithPseudos = pseudoChain.length ? `${baseSelector}:${pseudoChain.join(":")}` : baseSelector;
+				const selector = api.applyChildSelectors(baseWithPseudos, nextContexts);
+				if (query && entry && !entry.query) entry.query = query;
+				api.css.selector({
+					selector,
+					query
+				});
+				await api.trigger("onProp", {
+					name: resolvedName,
+					prop: entry,
+					contexts: nextContexts,
+					preferVariables,
+					file
+				}, ({ dependencies }) => {
+					return !dependencies || dependencies.has(resolvedName);
+				});
+				if (api.css.current) api.css.write();
+			}
+			nextContexts.pop();
+		}
+	};
+	if (isAt) contexts.push(name);
+	await processEntries(isAt ? prop.value : { [contextName]: { value: prop.value } }, contexts);
+	if (isAt) contexts.pop();
+};
+
+//#endregion
+exports.DOWN = DOWN;
+exports.UP = UP;
+exports.dependencies = dependencies;
+exports.name = name;
+exports.onBoot = onBoot;
+exports.onProp = onProp;
+exports.onReady = onReady;
+Object.defineProperty(exports, 'server_exports', {
+  enumerable: true,
+  get: function () {
+    return server_exports;
+  }
+});
+exports.values = values;