@styleframe/transpiler 1.0.0

package/src/consume/css.test.ts

@@ -0,0 +1,184 @@
+import type { Root, StyleframeOptions } from "@styleframe/core";
+import {
+	createCssFunction,
+	createRefFunction,
+	createRoot,
+	createVariableFunction,
+} from "@styleframe/core";
+import { createCSSConsumer } from "./css";
+import { consume } from "./consume";
+
+describe("createCSSConsumer", () => {
+	let root: Root;
+	let css: ReturnType<typeof createCssFunction>;
+	let variable: ReturnType<typeof createVariableFunction>;
+	let ref: ReturnType<typeof createRefFunction>;
+
+	const consumeCSS = createCSSConsumer(consume);
+	const options: StyleframeOptions = {};
+
+	beforeEach(() => {
+		root = createRoot();
+		css = createCssFunction(root, root);
+		variable = createVariableFunction(root, root);
+		ref = createRefFunction(root, root);
+	});
+
+	it("should process a simple CSS value", () => {
+		const cssValue = css`16px`;
+		expect(consumeCSS(cssValue, options)).toBe("16px");
+	});
+
+	it("should handle CSS values with variable references", () => {
+		const spacingVar = variable("spacing-md", "1rem");
+		const paddingValue = css`
+			${ref(spacingVar)} calc(${ref(spacingVar)} * 2)
+		`;
+
+		expect(consumeCSS(paddingValue, options)).toBe(
+			"var(--spacing-md) calc(var(--spacing-md) * 2)",
+		);
+	});
+
+	it("should handle empty CSS values", () => {
+		const emptyCss = css``;
+		expect(consumeCSS(emptyCss, options)).toBe("");
+	});
+
+	it("should respect prefix in options if provided", () => {
+		const prefixOptions: StyleframeOptions = {
+			variables: {
+				name: ({ name }) => `--sf-${name}`,
+			},
+		};
+
+		const colorVar = variable("color-primary", "#0066ff");
+		const colorValue = css`
+			${ref(colorVar)}
+		`;
+
+		expect(consumeCSS(colorValue, prefixOptions)).toBe(
+			"var(--sf-color-primary)",
+		);
+	});
+
+	it("should handle CSS values with numeric interpolations", () => {
+		const zIndex = 100;
+		const zIndexValue = css`
+			${zIndex}
+		`;
+
+		expect(consumeCSS(zIndexValue, options)).toBe("100");
+	});
+
+	it("should handle CSS values with string interpolations", () => {
+		const borderWidth = "2px";
+		const borderStyle = "solid";
+		const borderColor = "#000";
+		const borderValue = css`
+			${borderWidth} ${borderStyle} ${borderColor}
+		`;
+
+		expect(consumeCSS(borderValue, options)).toBe("2px solid #000");
+	});
+
+	it("should handle CSS values with array interpolations", () => {
+		const gridAreas = ["header", "main", "footer"];
+		const gridTemplateValue = css`"${gridAreas[0]}" "${gridAreas[1]}" "${gridAreas[2]}"`;
+
+		expect(consumeCSS(gridTemplateValue, options)).toBe(
+			'"header" "main" "footer"',
+		);
+	});
+
+	it("should handle complex CSS values with multiple variable references", () => {
+		const fontSize = variable("font-size-base", "16px");
+		const lineHeight = variable("line-height-normal", "1.5");
+		const fontFamily = variable("font-family-sans", "system-ui, sans-serif");
+
+		const fontValue = css`
+			${ref(fontSize)}/${ref(lineHeight)} ${ref(fontFamily)}
+		`;
+
+		expect(consumeCSS(fontValue, options)).toBe(
+			"var(--font-size-base)/var(--line-height-normal) var(--font-family-sans)",
+		);
+	});
+
+	it("should handle CSS values with calculations", () => {
+		const spacing = variable("spacing", "8px");
+		const calcValue = css`calc(100% - ${ref(spacing)} * 2)`;
+
+		expect(consumeCSS(calcValue, options)).toBe(
+			"calc(100% - var(--spacing) * 2)",
+		);
+	});
+
+	it("should handle CSS values with color functions", () => {
+		const primaryColor = variable("color-primary", "#006cff");
+		const colorValue = css`rgba(${ref(primaryColor)}, 0.5)`;
+
+		expect(consumeCSS(colorValue, options)).toBe(
+			"rgba(var(--color-primary), 0.5)",
+		);
+	});
+
+	it("should handle CSS values with gradient functions", () => {
+		const primaryColor = variable("color-primary", "#006cff");
+		const secondaryColor = variable("color-secondary", "#ff6b6b");
+
+		const gradientValue = css`linear-gradient(135deg, ${ref(primaryColor)} 0%, ${ref(secondaryColor)} 100%)`;
+
+		expect(consumeCSS(gradientValue, options)).toBe(
+			"linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%)",
+		);
+	});
+
+	it("should handle CSS values with conditional interpolations", () => {
+		const isLarge = true;
+		const conditionalValue = css`
+			${isLarge ? "2rem" : "1rem"}
+		`;
+
+		expect(consumeCSS(conditionalValue, options)).toBe("2rem");
+	});
+
+	it("should handle CSS values with fallback references", () => {
+		const spacingValue = css`
+			${ref("custom-spacing", "16px")}
+		`;
+
+		expect(consumeCSS(spacingValue, options)).toBe(
+			"var(--custom-spacing, 16px)",
+		);
+	});
+
+	it("should handle complex CSS values with multiple expressions", () => {
+		const primary = variable("color-primary", "#006cff");
+		const secondary = variable("color-secondary", "#ff6b6b");
+		const spacing = variable("spacing", "8px");
+
+		const complexValue = css`
+			${ref(spacing)} solid ${ref(primary)},
+			calc(${ref(spacing)} * 2) dashed ${ref(secondary)}
+		`;
+
+		// The function might normalize whitespace
+		const result = consumeCSS(complexValue, options);
+		expect(result).toContain("var(--spacing) solid var(--color-primary)");
+		expect(result).toContain(
+			"calc(var(--spacing) * 2) dashed var(--color-secondary)",
+		);
+	});
+
+	it("should handle CSS values with nested expressions", () => {
+		const baseSize = variable("size-base", "16px");
+		const multiplier = 1.5;
+
+		const nestedValue = css`calc(${ref(baseSize)} * ${multiplier})`;
+
+		expect(consumeCSS(nestedValue, options)).toBe(
+			"calc(var(--size-base) * 1.5)",
+		);
+	});
+});

package/src/consume/css.ts

@@ -0,0 +1,17 @@
+import type { CSS, StyleframeOptions } from "@styleframe/core";
+import type { ConsumeFunction } from "../types";
+
+/**
+ * Consumes a CSS value, equivalent to the string body of a selector
+ */
+export function createCSSConsumer(consume: ConsumeFunction) {
+	return function consumeCSS(
+		instance: CSS,
+		options: StyleframeOptions,
+	): string {
+		return instance.value
+			.map((part) => consume(part, options))
+			.join("")
+			.trim();
+	};
+}

package/src/consume/declarations.test.ts

@@ -0,0 +1,210 @@
+import type { DeclarationsBlock, StyleframeOptions } from "@styleframe/core";
+import {
+	createCssFunction,
+	createRefFunction,
+	createRoot,
+	createVariableFunction,
+} from "@styleframe/core";
+import { consume } from "./consume";
+import { createDeclarationsConsumer } from "./declarations";
+
+describe("createDeclarationsConsumer", () => {
+	let root: ReturnType<typeof createRoot>;
+	let ref: ReturnType<typeof createRefFunction>;
+	let variable: ReturnType<typeof createVariableFunction>;
+	let css: ReturnType<typeof createCssFunction>;
+
+	const consumeDeclarations = createDeclarationsConsumer(consume);
+	const options: StyleframeOptions = {};
+
+	beforeEach(() => {
+		root = createRoot();
+		ref = createRefFunction(root, root);
+		variable = createVariableFunction(root, root);
+		css = createCssFunction(root, root);
+	});
+
+	it("should convert a simple declarations block to CSS declarations", () => {
+		const declarations: DeclarationsBlock = {
+			color: "#ff0000",
+			fontSize: "16px",
+			margin: "10px",
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual([
+			"color: #ff0000;",
+			"font-size: 16px;",
+			"margin: 10px;",
+		]);
+	});
+
+	it("should handle empty declarations block", () => {
+		const declarations: DeclarationsBlock = {};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual([]);
+	});
+
+	it("should handle declarations with variable references", () => {
+		const colorVar = variable("color-primary", "#006cff");
+		const fontSizeVar = variable("font-size", "16px");
+
+		const declarations: DeclarationsBlock = {
+			color: ref(colorVar),
+			fontSize: ref(fontSizeVar),
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual([
+			"color: var(--color-primary);",
+			"font-size: var(--font-size);",
+		]);
+	});
+
+	it("should handle declarations with string references", () => {
+		const declarations: DeclarationsBlock = {
+			color: ref("color-primary"),
+			fontSize: ref("font-size"),
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual([
+			"color: var(--color-primary);",
+			"font-size: var(--font-size);",
+		]);
+	});
+
+	it("should handle declarations with references that have fallbacks", () => {
+		const declarations: DeclarationsBlock = {
+			color: ref("color-primary", "#006cff"),
+			fontSize: ref("font-size", "16px"),
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual([
+			"color: var(--color-primary, #006cff);",
+			"font-size: var(--font-size, 16px);",
+		]);
+	});
+
+	it("should handle declarations with CSS values", () => {
+		const declarations: DeclarationsBlock = {
+			boxShadow: css`0 2px 4px rgba(0, 0, 0, 0.1)`,
+			transform: css`translate(10px, 20px)`,
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual([
+			"box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);",
+			"transform: translate(10px, 20px);",
+		]);
+	});
+
+	it("should handle declarations with complex CSS values that include references", () => {
+		const spacingVar = variable("spacing", "8px");
+
+		const declarations: DeclarationsBlock = {
+			padding: css`
+				${ref(spacingVar)} calc(${ref(spacingVar)} * 2)
+			`,
+			margin: css`
+				${ref("margin", "10px")} auto
+			`,
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual([
+			"padding: var(--spacing) calc(var(--spacing) * 2);",
+			"margin: var(--margin, 10px) auto;",
+		]);
+	});
+
+	it("should handle declarations with null or undefined values", () => {
+		const declarations: DeclarationsBlock = {
+			color: null,
+			fontSize: undefined,
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual(["color: ;", "font-size: ;"]);
+	});
+
+	it("should handle declarations with numeric values", () => {
+		const declarations: DeclarationsBlock = {
+			zIndex: 100,
+			opacity: 0.5,
+			flex: 1,
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual(["z-index: 100;", "opacity: 0.5;", "flex: 1;"]);
+	});
+
+	it("should respect variable prefix in options if provided", () => {
+		const prefixOptions: StyleframeOptions = {
+			variables: {
+				name: ({ name }) => `--sf-${name}`,
+			},
+		};
+
+		const colorVar = variable("color-primary", "#006cff");
+
+		const declarations: DeclarationsBlock = {
+			color: ref(colorVar),
+			backgroundColor: ref("color-secondary"),
+		};
+
+		const result = consumeDeclarations(declarations, prefixOptions);
+
+		expect(result).toEqual([
+			"color: var(--sf-color-primary);",
+			"background-color: var(--sf-color-secondary);",
+		]);
+	});
+
+	it("should handle declarations with boolean values", () => {
+		const declarations: DeclarationsBlock = {
+			// These would be converted to strings in CSS
+			visible: true,
+			disabled: false,
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual(["visible: true;", "disabled: false;"]);
+	});
+
+	it("should handle declarations with array values", () => {
+		const declarations: DeclarationsBlock = {
+			fontFamily: ["Helvetica", "Arial", "sans-serif"],
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual(["font-family: Helvetica,Arial,sans-serif;"]);
+	});
+
+	it("should handle custom property names", () => {
+		const declarations: DeclarationsBlock = {
+			"--customProperty": "value",
+			"--another-custom": 42,
+		};
+
+		const result = consumeDeclarations(declarations, options);
+
+		expect(result).toEqual([
+			"--customProperty: value;",
+			"--another-custom: 42;",
+		]);
+	});
+});

package/src/consume/declarations.ts

@@ -0,0 +1,17 @@
+import type { DeclarationsBlock, StyleframeOptions } from "@styleframe/core";
+import { genDeclaration } from "../generator";
+import type { ConsumeFunction } from "../types";
+
+/**
+ * Consumes a declarations block, equivalent to setting CSS properties
+ */
+export function createDeclarationsConsumer(consume: ConsumeFunction) {
+	return function consumeDeclarations(
+		instance: DeclarationsBlock,
+		options: StyleframeOptions,
+	): string[] {
+		return Object.entries(instance).map(([propertyName, propertyValue]) => {
+			return genDeclaration(propertyName, consume(propertyValue, options));
+		});
+	};
+}

package/src/consume/index.ts

@@ -0,0 +1,12 @@
+export * from "./at-rule";
+export * from "./consume";
+export * from "./container";
+export * from "./css";
+export * from "./declarations";
+export * from "./primitive";
+export * from "./ref";
+export * from "./root";
+export * from "./selector";
+export * from "./theme";
+export * from "./utility";
+export * from "./variable";

package/src/consume/primitive.test.ts

@@ -0,0 +1,52 @@
+import type { StyleframeOptions } from "@styleframe/core";
+import { createPrimitiveConsumer } from "./primitive";
+import { consume } from "./consume";
+
+describe("createPrimitiveConsumer", () => {
+	const consumePrimitive = createPrimitiveConsumer(consume);
+	const options: StyleframeOptions = {};
+
+	it("should return a string representation of a number", () => {
+		expect(consumePrimitive(42, options)).toBe("42");
+	});
+
+	it("should return a string representation of a string", () => {
+		expect(consumePrimitive("test", options)).toBe("test");
+	});
+
+	it("should return a string representation of a boolean", () => {
+		expect(consumePrimitive(true, options)).toBe("true");
+		expect(consumePrimitive(false, options)).toBe("false");
+	});
+
+	it("should return a string representation of zero", () => {
+		expect(consumePrimitive(0, options)).toBe("0");
+	});
+
+	it("should return a string representation of an empty string", () => {
+		expect(consumePrimitive("", options)).toBe("");
+	});
+
+	it("should return an empty string for null", () => {
+		expect(consumePrimitive(null, options)).toBe("");
+	});
+
+	it("should return an empty string for undefined", () => {
+		expect(consumePrimitive(undefined, options)).toBe("");
+	});
+
+	it("should convert objects to string representation", () => {
+		const obj = { a: 1, b: 2 };
+		expect(consumePrimitive(obj, options)).toBe("[object Object]");
+	});
+
+	it("should convert arrays to string representation", () => {
+		const arr = [1, 2, 3];
+		expect(consumePrimitive(arr, options)).toBe("1,2,3");
+	});
+
+	it("should handle special values like NaN and Infinity", () => {
+		expect(consumePrimitive(NaN, options)).toBe("NaN");
+		expect(consumePrimitive(Infinity, options)).toBe("Infinity");
+	});
+});

package/src/consume/primitive.ts

@@ -0,0 +1,16 @@
+import type { StyleframeOptions } from "@styleframe/core";
+import type { ConsumeFunction } from "../types";
+
+/**
+ * Consumes a primitive instance, equivalent to setting a CSS value
+ */
+export function createPrimitiveConsumer(_consume: ConsumeFunction) {
+	return function consumePrimitive(
+		instance: unknown,
+		_options: StyleframeOptions,
+	): string {
+		return instance !== undefined && instance !== null
+			? `${instance as string}`
+			: "";
+	};
+}

package/src/consume/ref.test.ts

@@ -0,0 +1,84 @@
+import type { Root, StyleframeOptions } from "@styleframe/core";
+import {
+	createRefFunction,
+	createRoot,
+	createVariableFunction,
+} from "@styleframe/core";
+import { createRefConsumer } from "./ref";
+import { consume } from "./consume";
+
+describe("createRefConsumer", () => {
+	let root: Root;
+	let ref: ReturnType<typeof createRefFunction>;
+	let variable: ReturnType<typeof createVariableFunction>;
+
+	const consumeRef = createRefConsumer(consume);
+	const options: StyleframeOptions = {};
+
+	beforeEach(() => {
+		root = createRoot();
+		variable = createVariableFunction(root, root);
+		ref = createRefFunction(root, root);
+	});
+
+	it("should convert a simple reference to CSS var() syntax", () => {
+		const colorRef = ref("color-primary");
+		expect(consumeRef(colorRef, options)).toBe("var(--color-primary)");
+	});
+
+	it("should handle references created from variables", () => {
+		const colorVar = variable("color-primary", "#0066ff");
+		const colorRef = ref(colorVar);
+		expect(consumeRef(colorRef, options)).toBe("var(--color-primary)");
+	});
+
+	it("should include fallback value when provided", () => {
+		const sizeRef = ref("font-size", "16px");
+		expect(consumeRef(sizeRef, options)).toBe("var(--font-size, 16px)");
+	});
+
+	it("should handle references with dashes in the name", () => {
+		const spacingRef = ref("spacing--md");
+		expect(consumeRef(spacingRef, options)).toBe("var(--spacing--md)");
+	});
+
+	it("should not modify variable names", () => {
+		// Assuming the normalizeVariableName function is used internally
+		// and converts camelCase to kebab-case
+		const colorRef = ref("colorPrimary");
+		expect(consumeRef(colorRef, options)).toBe("var(--colorPrimary)");
+	});
+
+	it("should handle complex fallback values", () => {
+		const marginRef = ref("margin-x", "calc(2rem + 10px)");
+		expect(consumeRef(marginRef, options)).toBe(
+			"var(--margin-x, calc(2rem + 10px))",
+		);
+	});
+
+	it("should respect prefix in options if provided", () => {
+		const prefixOptions: StyleframeOptions = {
+			variables: {
+				name: ({ name }) => `--sf-${name}`,
+			},
+		};
+		const colorRef = ref("color-primary");
+		expect(consumeRef(colorRef, prefixOptions)).toBe("var(--sf-color-primary)");
+	});
+
+	it("should handle references with empty fallback values", () => {
+		const emptyRef = ref("empty-var", "");
+		expect(consumeRef(emptyRef, options)).toBe("var(--empty-var)");
+	});
+
+	it("should handle references with undefined fallback", () => {
+		const undefinedRef = ref("undefined-var", undefined);
+		expect(consumeRef(undefinedRef, options)).toBe("var(--undefined-var)");
+	});
+
+	it("should handle references with null fallback value", () => {
+		// @ts-expect-error Passing null for testing purposes
+		const nullRef = ref("null-var", null);
+		expect(consumeRef(nullRef, options)).toBe("var(--null-var)");
+	});
+});

package/src/consume/ref.ts

@@ -0,0 +1,22 @@
+import type { Reference, StyleframeOptions } from "@styleframe/core";
+import { defaultVariableNameFn } from "../defaults";
+import { genReferenceVariable } from "../generator";
+import type { ConsumeFunction } from "../types";
+
+/**
+ * Consumes a ref instance, equivalent to referencing a CSS variable with optional fallback
+ */
+export function createRefConsumer(consume: ConsumeFunction) {
+	return function consumeRef(
+		instance: Reference,
+		options: StyleframeOptions,
+	): string {
+		const variableNameFn = options.variables?.name ?? defaultVariableNameFn;
+		const variableName = variableNameFn({ name: instance.name });
+
+		return genReferenceVariable(
+			variableName,
+			instance.fallback ? consume(instance.fallback, options) : undefined,
+		);
+	};
+}