cssints 0.0.0-stage → 0.1.0

package/dist/derived.mjs

@@ -0,0 +1,391 @@
+//#region src/derived.ts
+/** The custom property of :root that carries the data (derived-data.ts writes it). */
+const KEY = "--_derived";
+const mul = (m, v) => [
+	0,
+	3,
+	6
+].map((r) => v.reduce((s, x, k) => s + m[r + k] * x, 0));
+const lin = (c) => {
+	const a = Math.abs(c);
+	return (a <= .04045 ? a / 12.92 : ((a + .055) / 1.055) ** 2.4) * Math.sign(c);
+};
+const gam = (c) => {
+	const a = Math.abs(c);
+	return (a <= .0031308 ? a * 12.92 : 1.055 * a ** (1 / 2.4) - .055) * Math.sign(c);
+};
+const rad = Math.PI / 180;
+const rect = ([l, c, h]) => [
+	l,
+	c * Math.cos(h * rad),
+	c * Math.sin(h * rad)
+];
+const polar = ([l, a, b]) => {
+	const h = Math.atan2(b, a) / rad;
+	return [
+		l,
+		Math.hypot(a, b),
+		h < 0 ? h + 360 : h
+	];
+};
+const LMS = [
+	.4122214708,
+	.5363325363,
+	.0514459929,
+	.2119034982,
+	.6806995451,
+	.1073969566,
+	.0883024619,
+	.2817188376,
+	.6299787005
+];
+const OK = [
+	.2104542553,
+	.793617785,
+	-.0040720468,
+	1.9779984951,
+	-2.428592205,
+	.4505937099,
+	.0259040371,
+	.7827717662,
+	-.808675766
+];
+const LMS_I = [
+	4.0767416621,
+	-3.3077115913,
+	.2309699292,
+	-1.2684380046,
+	2.6097574011,
+	-.3413193965,
+	-.0041960863,
+	-.7034186147,
+	1.707614701
+];
+const OK_I = [
+	1,
+	.3963377774,
+	.2158037573,
+	1,
+	-.1055613458,
+	-.0638541728,
+	1,
+	-.0894841775,
+	-1.291485548
+];
+const XYZ = [
+	.436065743,
+	.385151469,
+	.143078454,
+	.222493192,
+	.716887054,
+	.0606197905,
+	.0139239045,
+	.0970812857,
+	.714099358
+];
+const XYZ_I = [
+	3.13413576,
+	-1.61738568,
+	-.49066242,
+	-.978795456,
+	1.91625419,
+	.0334429841,
+	.071955413,
+	-.228976675,
+	1.40538601
+];
+const D50 = [
+	.9642956764295677,
+	1,
+	.8251046025104602
+];
+const E = 216 / 24389;
+const K = 24389 / 27;
+const to = {
+	"srgb-linear": (c) => c,
+	srgb: (c) => c.map(lin),
+	oklab: (c) => mul(LMS_I, mul(OK_I, c).map((v) => v ** 3)),
+	oklch: (c) => to.oklab(rect(c)),
+	lab: ([l, a, b]) => {
+		const y = (l + 16) / 116;
+		const f = [
+			a / 500 + y,
+			y,
+			y - b / 200
+		];
+		return mul(XYZ_I, f.map((v, i) => D50[i] * (v ** 3 > E ? v ** 3 : (116 * v - 16) / K)));
+	}
+};
+const from = {
+	"srgb-linear": (c) => c,
+	srgb: (c) => c.map(gam),
+	oklab: (c) => mul(OK, mul(LMS, c).map(Math.cbrt)),
+	oklch: (c) => polar(from.oklab(c)),
+	lab: (c) => {
+		const f = mul(XYZ, c).map((v, i) => {
+			const x = v / D50[i];
+			return x > E ? Math.cbrt(x) : (K * x + 16) / 116;
+		});
+		return [
+			116 * f[1] - 16,
+			500 * (f[0] - f[1]),
+			200 * (f[1] - f[2])
+		];
+	}
+};
+const conv = (c, s) => c.s === s ? c : {
+	s,
+	c: from[s](to[c.s](c.c)),
+	a: c.a
+};
+const SPEC = {
+	srgb: ["rgb", [
+		1,
+		1,
+		1
+	]],
+	"srgb-linear": ["rgb", [
+		1,
+		1,
+		1
+	]],
+	oklab: ["lab", [
+		1,
+		.4,
+		.4
+	]],
+	oklch: ["lch", [
+		1,
+		.4,
+		360
+	]],
+	lab: ["lab", [
+		100,
+		125,
+		125
+	]]
+};
+const NAMED = {
+	black: "#000",
+	white: "#fff",
+	transparent: "#0000"
+};
+const TOKEN = /[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?(?:%|deg)?|#\w+|(?:--|-?)[a-z_][\w-]*|[^\s]/gi;
+const fail = (x) => {
+	throw new Error(x);
+};
+const hex = (x) => {
+	const h = x.slice(1);
+	if (![
+		3,
+		4,
+		6,
+		8
+	].includes(h.length) || /[^\da-f]/i.test(h)) return fail(x);
+	const n = h.length < 5 ? h.replace(/./g, "$&$&") : h;
+	const byte = (i) => parseInt(n.slice(i, i + 2), 16) / 255;
+	return {
+		s: "srgb",
+		c: [
+			byte(0),
+			byte(2),
+			byte(4)
+		],
+		a: n.length > 6 ? byte(6) : 1
+	};
+};
+const evaluate = (text, get = (n) => fail(n)) => {
+	const t = text.match(TOKEN) ?? [];
+	let i = 0;
+	let pct = 1;
+	let env = {};
+	const next = () => t[i++] ?? fail(t[i - 2]);
+	const want = (s) => {
+		if (next() !== s) fail(t[i - 1]);
+	};
+	const input = () => {
+		want("(");
+		const v = get(next());
+		want(")");
+		return v;
+	};
+	const list = () => {
+		want("(");
+		const out = [sum()];
+		while (t[i] === ",") {
+			i++;
+			out.push(sum());
+		}
+		want(")");
+		return out;
+	};
+	const atom = () => {
+		const x = next();
+		if (/^[+-]?[\d.]/.test(x)) return parseFloat(x) * (x.endsWith("%") ? pct / 100 : 1);
+		if (x === "(") {
+			const v = sum();
+			want(")");
+			return v;
+		}
+		if (x === "calc") return atom();
+		if (x === "-") return -atom();
+		if (x === "clamp") {
+			const [lo, v, hi] = list();
+			return Math.max(lo, Math.min(v, hi));
+		}
+		if (x === "min") return Math.min(...list());
+		if (x === "max") return Math.max(...list());
+		if (x === "var") {
+			const v = input();
+			return typeof v === "string" && v ? Number(v) : fail(x);
+		}
+		if (x === "none") return 0;
+		return Object.hasOwn(env, x) ? env[x] : fail(x);
+	};
+	const prod = () => {
+		let v = atom();
+		for (let o = t[i]; o === "*" || o === "/"; o = t[i]) {
+			i++;
+			v = o === "*" ? v * atom() : v / atom();
+		}
+		return v;
+	};
+	const sum = () => {
+		let v = prod();
+		for (let o = t[i]; o === "+" || o === "-"; o = t[i]) {
+			i++;
+			v += o === "+" ? prod() : -prod();
+		}
+		return v;
+	};
+	const fn = (f) => {
+		want("(");
+		const origin = t[i] === "from" ? (i++, col()) : void 0;
+		const space = f === "color" ? next() : f === "rgb" || f === "rgba" ? "srgb" : f;
+		if (!Object.hasOwn(SPEC, space)) return fail(f === "color" ? space : f);
+		const [names, base] = SPEC[space];
+		const k = f[0] === "r" ? 255 : 1;
+		const src = origin && conv(origin, space);
+		env = src ? {
+			alpha: src.a,
+			...Object.fromEntries([...names].map((n, j) => [n, src.c[j] * k]))
+		} : {};
+		const c = base.map((b, j) => {
+			if (j && t[i] === ",") i++;
+			pct = b * k;
+			return atom() / k;
+		});
+		let a = 1;
+		if (t[i] === "/" || t[i] === ",") {
+			i++;
+			pct = 1;
+			a = Math.min(1, Math.max(0, atom()));
+		}
+		want(")");
+		return {
+			s: space,
+			c,
+			a
+		};
+	};
+	const mix = () => {
+		want("(");
+		want("in");
+		const s = next();
+		if (s === "oklch" || !Object.hasOwn(SPEC, s)) return fail(s);
+		want(",");
+		const one = () => {
+			return [conv(col(), s), t[i]?.endsWith("%") ? parseFloat(next()) : void 0];
+		};
+		const [a, p] = one();
+		want(",");
+		const [b, q] = one();
+		want(")");
+		const x = p ?? 100 - (q ?? 50);
+		const y = q ?? 100 - x;
+		if (x + y !== 100) return fail("color-mix");
+		const al = (a.a * x + b.a * y) / 100;
+		return {
+			s,
+			c: a.c.map((v, j) => al ? (v * a.a * x + b.c[j] * b.a * y) / 100 / al : 0),
+			a: al
+		};
+	};
+	const col = () => {
+		const x = next();
+		if (x.startsWith("#")) return hex(x);
+		if (NAMED[x]) return hex(NAMED[x]);
+		if (x === "var") {
+			const v = input();
+			return typeof v === "string" ? evaluate(v, get) : v;
+		}
+		return x === "color-mix" ? mix() : fn(x);
+	};
+	const out = col();
+	if (i < t.length) fail(t[i]);
+	return out;
+};
+const css = (c) => {
+	const [r, g, b] = conv(c, "srgb").c.map((v) => Math.round(Math.min(1, Math.max(0, v)) * 255));
+	return `rgb(${r} ${g} ${b}${c.a < 1 ? ` / ${+c.a.toFixed(3)}` : ""})`;
+};
+var derived_default = () => {
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	const cs = getComputedStyle(root);
+	const written = /* @__PURE__ */ new Map();
+	let observer;
+	let raw = "";
+	let data;
+	let names;
+	const read = () => {
+		const v = cs.getPropertyValue(KEY).trim();
+		if (!v || v === raw) return !!v;
+		raw = v;
+		data = JSON.parse(v.slice(1, -1).replace(/\\(.)/g, "$1"));
+		names = [.../* @__PURE__ */ new Set([...Object.keys(data.b), ...data.t.flatMap(([, x]) => Object.keys(x))])];
+		return true;
+	};
+	const update = () => {
+		read();
+		const tpl = new Map(Object.entries(data.b));
+		for (const [cond, v] of data.t) if (cond.startsWith("@") ? matchMedia(cond.slice(6)).matches : root.matches(cond)) for (const n in v) if (v[n]) tpl.set(n, v[n]);
+		else tpl.delete(n);
+		for (const n of names) if (!tpl.has(n) && written.delete(n)) root.style.removeProperty(n);
+		const done = /* @__PURE__ */ new Map();
+		const get = (n) => {
+			let v = done.get(n);
+			if (v === void 0) {
+				const t = tpl.get(n);
+				done.set(n, v = t === void 0 ? cs.getPropertyValue(n).trim() || fail(n) : evaluate(t, get));
+			}
+			return v;
+		};
+		const next = [...tpl.keys()].map((n) => {
+			try {
+				return [n, css(get(n))];
+			} catch {
+				return [n, void 0];
+			}
+		});
+		for (const [n, v] of next) if (v === void 0) {
+			if (written.delete(n)) root.style.removeProperty(n);
+		} else if (written.get(n) !== v) {
+			written.set(n, v);
+			root.style.setProperty(n, v);
+		}
+		observer.takeRecords();
+	};
+	const go = () => {
+		if (!read()) return false;
+		if (data.p.every((p) => CSS.supports("color", p))) return true;
+		observer = new MutationObserver(update);
+		observer.observe(root, { attributes: true });
+		for (const [cond] of data.t) if (cond.startsWith("@")) matchMedia(cond.slice(6)).addEventListener("change", update);
+		update();
+		return true;
+	};
+	if (!go()) addEventListener("load", go, { once: true });
+};
+//#endregion
+export { KEY, css, derived_default as default, evaluate };

package/dist/errors-D4ZbcwRo.d.mts

@@ -0,0 +1,32 @@
+//#region src/errors.d.ts
+declare const MacroError_base: new <A extends Record<string, any> = {}>(args: import("effect/Types").VoidIfEmpty<{ readonly [P in keyof A as P extends "_tag" ? never : P]: A[P]; }>) => import("effect/Cause").YieldableError & {
+  readonly _tag: "MacroError";
+} & Readonly<A>;
+/** A css.* call, cv(), or a value in it is wrong. `file`, `site` (index) and `offset` name the call site, when known. */
+declare class MacroError extends MacroError_base<{
+  readonly message: string;
+  readonly file?: string;
+  readonly site?: number;
+  readonly offset?: number;
+  readonly cause?: unknown;
+}> {}
+declare const ImportError_base: new <A extends Record<string, any> = {}>(args: import("effect/Types").VoidIfEmpty<{ readonly [P in keyof A as P extends "_tag" ? never : P]: A[P]; }>) => import("effect/Cause").YieldableError & {
+  readonly _tag: "ImportError";
+} & Readonly<A>;
+/** `import ... from "cssints"` without the attribute names something that only exists at build time. */
+declare class ImportError extends ImportError_base<{
+  readonly message: string;
+  readonly file: string;
+  readonly offset: number;
+}> {}
+declare const ContrastError_base: new <A extends Record<string, any> = {}>(args: import("effect/Types").VoidIfEmpty<{ readonly [P in keyof A as P extends "_tag" ? never : P]: A[P]; }>) => import("effect/Cause").YieldableError & {
+  readonly _tag: "ContrastError";
+} & Readonly<A>;
+/** cssints/check `contrast`: a colour that has no contrast (one it cannot read, or a translucent one). */
+declare class ContrastError extends ContrastError_base<{
+  readonly message: string;
+  /** The colour as given. */
+  readonly colour: string;
+}> {}
+//#endregion
+export { ImportError as n, MacroError as r, ContrastError as t };

package/dist/frame-BoBKjgBB.mjs

@@ -0,0 +1,92 @@
+import { scope } from "cssints/plugin";
+//#region src/frame.ts
+const registered = (names) => names.map((n) => `@property --_${n} { syntax: "<length>"; inherits: false; initial-value: 0px; }`).join("\n");
+const inner = "max(var(--_x) - var(--_p) - var(--_b), 0px)";
+const outer = (parent) => `max(var(${parent}, calc(var(--_r) + var(--_m))) - var(--_m), 0px)`;
+const css = `
+& {
+  padding: var(--_p);
+  margin: var(--_m);
+  border: var(--_b) solid;
+  border-radius: var(--_x);
+}
+@container (style(--_c: e)) or (not style(--_c)) {
+  & { --_c: o; --_x: ${outer("--_e")}; --_o: ${inner}; }
+}
+@container style(--_c: o) {
+  & { --_c: e; --_x: ${outer("--_o")}; --_e: ${inner}; }
+}`;
+const fallback = `
+:root[data-cssints-poly] & {
+  --_u: calc(var(--_r) + var(--_m));
+  --_i: max(max(var(--_u) - var(--_m), 0px) - var(--_p) - var(--_b), 0px);
+  --_t: var(--_i);
+  border-radius: max(var(--_u) - var(--_m), 0px);
+  transition: --_t 1ms;
+}`;
+const length = "<length [0,∞]>";
+/**
+* `frame().radius(t.radius.lg).padding(4).border("1px").margin(2)`: a box whose radius follows from the frames around it
+* (`radius` is the radius of the outermost frame; inside, it is the parent's inner radius less the margin). `padding` and
+* `margin` take a step of the spacing scale; each method once. It stands for `padding`, `margin`, `border-radius` and the
+* border widths and styles, so mixing it with them in one `cn()` is a build error (border colours are fine).
+*/
+const frameScope = scope("frame", {
+	core: {
+		css,
+		atProperty: registered([
+			"r",
+			"p",
+			"b",
+			"m",
+			"u",
+			"i",
+			"t"
+		]),
+		requires: ["css.at-rules.property", "css.types.max"]
+	},
+	fallback: {
+		polyfills: ["css.at-rules.container.style_queries_for_custom_properties"],
+		parentVars: [{
+			marker: "&",
+			read: "--_i",
+			write: "--_u",
+			watch: "--_t"
+		}],
+		css: fallback
+	},
+	noBox: {
+		props: [/^(padding|margin)(-|$)/, /^border(?!.*color)/],
+		message: "frame() sets padding, margin, border-radius and the border: use its methods"
+	},
+	frame: {
+		uses: [
+			"core",
+			"fallback",
+			"noBox"
+		],
+		chain: {
+			radius: {
+				args: length,
+				emit: (v) => [["--_r", v]]
+			},
+			padding: {
+				args: length,
+				spacing: true,
+				emit: (v) => [["--_p", v]]
+			},
+			border: {
+				args: length,
+				emit: (v) => [["--_b", v]]
+			},
+			margin: {
+				args: "<length>",
+				spacing: true,
+				emit: (v) => [["--_m", v]]
+			}
+		}
+	}
+});
+const { frame } = frameScope.export();
+//#endregion
+export { frameScope as n, frame as t };

package/dist/frame.d.mts

@@ -0,0 +1,72 @@
+//#region src/frame.d.ts
+/**
+ * `frame().radius(t.radius.lg).padding(4).border("1px").margin(2)`: a box whose radius follows from the frames around it
+ * (`radius` is the radius of the outermost frame; inside, it is the parent's inner radius less the margin). `padding` and
+ * `margin` take a step of the spacing scale; each method once. It stands for `padding`, `margin`, `border-radius` and the
+ * border widths and styles, so mixing it with them in one `cn()` is a build error (border colours are fine).
+ */
+export declare const frameScope: import("cssints/plugin").Scope<"frame", {
+  readonly core: {
+    readonly css: string;
+    readonly atProperty: string;
+    readonly requires: ["css.at-rules.property", "css.types.max"];
+  };
+  readonly fallback: {
+    readonly polyfills: ["css.at-rules.container.style_queries_for_custom_properties"];
+    readonly parentVars: [{
+      readonly marker: "&";
+      readonly read: "--_i";
+      readonly write: "--_u";
+      readonly watch: "--_t";
+    }];
+    readonly css: "\n:root[data-cssints-poly] & {\n  --_u: calc(var(--_r) + var(--_m));\n  --_i: max(max(var(--_u) - var(--_m), 0px) - var(--_p) - var(--_b), 0px);\n  --_t: var(--_i);\n  border-radius: max(var(--_u) - var(--_m), 0px);\n  transition: --_t 1ms;\n}";
+  };
+  readonly noBox: {
+    readonly props: [RegExp, RegExp];
+    readonly message: "frame() sets padding, margin, border-radius and the border: use its methods";
+  };
+  readonly frame: {
+    readonly uses: readonly ["core", "fallback", "noBox"];
+    readonly chain: {
+      readonly radius: {
+        readonly args: "<length [0,∞]>";
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly padding: {
+        readonly args: "<length [0,∞]>";
+        readonly spacing: true;
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly border: {
+        readonly args: "<length [0,∞]>";
+        readonly emit: (v: string) => [string, string][];
+      };
+      readonly margin: {
+        readonly args: "<length>";
+        readonly spacing: true;
+        readonly emit: (v: string) => [string, string][];
+      };
+    };
+  };
+}>;
+export declare const frame: () => import("cssints/plugin").Chain<"frame", {
+  readonly radius: {
+    readonly args: "<length [0,∞]>";
+    readonly emit: (v: string) => [string, string][];
+  };
+  readonly padding: {
+    readonly args: "<length [0,∞]>";
+    readonly spacing: true;
+    readonly emit: (v: string) => [string, string][];
+  };
+  readonly border: {
+    readonly args: "<length [0,∞]>";
+    readonly emit: (v: string) => [string, string][];
+  };
+  readonly margin: {
+    readonly args: "<length>";
+    readonly spacing: true;
+    readonly emit: (v: string) => [string, string][];
+  };
+}, {}>;
+//#endregion

package/dist/frame.mjs

@@ -0,0 +1,2 @@
+import { n as frameScope, t as frame } from "./frame-BoBKjgBB.mjs";
+export { frame, frameScope };

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import { a as Kernel } from "./author-types-C1AhsnrT.mjs";
+import { n as cx } from "./runtime-CTvuM-Hm.mjs";
+import { n as At, t as CssNode } from "./node-CdhAGmF3.mjs";
+import { t as Fallback } from "./lib-2OEIfPAE.mjs";
+import { CSS, CSSColorValue, CSSImageValue, CSSStyleValue, CSSUnitValue } from "@cssints/css-grammar/values";
+//#region src/macro.d.ts
+export declare const firstThatWorks: (...values: unknown[]) => Fallback;
+export declare class CSSAtRuleValue extends CSSStyleValue {
+  readonly kernel: Kernel;
+  readonly name: string;
+  constructor(name: string, kernel: Kernel);
+  toString(): string;
+}
+export declare const keyframes: (steps: unknown) => CSSAtRuleValue;
+export declare const positionTry: (...args: unknown[]) => CSSAtRuleValue | CssNode;
+export declare const cn: (...args: unknown[]) => CssNode;
+export declare const flex: (...args: unknown[]) => CssNode;
+export declare const grid: (...args: unknown[]) => CssNode;
+type Styles = Record<string, Record<string, unknown>>;
+interface CvConfig {
+  base?: unknown;
+  variants?: Styles;
+  defaultVariants?: Record<string, string | boolean>;
+  compoundVariants?: Record<string, string | boolean | CssNode>[];
+}
+export declare const cv: (config: CvConfig) => ((props?: Record<string, string | boolean | undefined>) => string) & {
+  __cv: CvConfig;
+};
+export declare const css: Record<string, unknown>;
+export declare function __at(file: string, site: number, offset: number): At;
+export declare const __unseen: (file: string, site: number) => boolean;
+export declare function __site(at: At, value: unknown): unknown;
+//#endregion
+export { CSS, CSSColorValue, CSSImageValue, CSSStyleValue, CSSUnitValue, cx };