@styleframe/transpiler 1.0.0

package/src/consume/at-rule.test.ts

@@ -0,0 +1,339 @@
+import type { Root, StyleframeOptions } from "@styleframe/core";
+import {
+	createAtRuleFunction,
+	createRefFunction,
+	createRoot,
+} from "@styleframe/core";
+import { createAtRuleConsumer } from "./at-rule";
+import { consume } from "./consume";
+
+describe("createAtRuleConsumer", () => {
+	let root: Root;
+	let atRule: ReturnType<typeof createAtRuleFunction>;
+	let ref: ReturnType<typeof createRefFunction>;
+
+	const consumeAtRule = createAtRuleConsumer(consume);
+	const options: StyleframeOptions = {};
+
+	beforeEach(() => {
+		root = createRoot();
+		atRule = createAtRuleFunction(root, root);
+		ref = createRefFunction(root, root);
+	});
+
+	it("should create a simple at-rule with no body", () => {
+		const importRule = atRule("import", '"./styles.css"');
+
+		const result = consumeAtRule(importRule, options);
+
+		expect(result).toBe('@import "./styles.css";');
+	});
+
+	it("should create a media query with declarations", () => {
+		const mediaRule = atRule("media", "(min-width: 768px)", {
+			padding: "2rem",
+			fontSize: "18px",
+		});
+
+		const result = consumeAtRule(mediaRule, options);
+
+		expect(result).toBe(`@media (min-width: 768px) {
+	padding: 2rem;
+	font-size: 18px;
+}`);
+	});
+
+	it("should create an at-rule with variables", () => {
+		const mediaRule = atRule("media", "(min-width: 768px)", ({ variable }) => {
+			variable("breakpoint-padding", "2rem");
+
+			return {
+				padding: ref("breakpoint-padding"),
+			};
+		});
+
+		const result = consumeAtRule(mediaRule, options);
+
+		expect(result).toBe(`@media (min-width: 768px) {
+\t--breakpoint-padding: 2rem;
+\t
+\tpadding: var(--breakpoint-padding);
+}`);
+	});
+
+	it("should create an at-rule with nested selectors", () => {
+		const mediaRule = atRule("media", "(min-width: 768px)", ({ selector }) => {
+			selector(".card", {
+				width: "50%",
+				margin: "0 auto",
+			});
+
+			selector(".button", {
+				padding: "1rem 2rem",
+			});
+		});
+
+		const result = consumeAtRule(mediaRule, options);
+
+		expect(result).toBe(`@media (min-width: 768px) {
+\t.card {
+\t\twidth: 50%;
+\t\tmargin: 0 auto;
+\t}
+\t
+\t.button {
+\t\tpadding: 1rem 2rem;
+\t}
+}`);
+	});
+
+	it("should create an at-rule with variables, declarations, and children", () => {
+		const mediaRule = atRule(
+			"media",
+			"(min-width: 1024px)",
+			({ variable, selector }) => {
+				const spacingVar = variable("large-spacing", "3rem");
+
+				selector(".container", {
+					maxWidth: "1200px",
+					padding: ref(spacingVar),
+				});
+
+				return {
+					fontSize: "20px",
+				};
+			},
+		);
+
+		const result = consumeAtRule(mediaRule, options);
+
+		expect(result).toBe(`@media (min-width: 1024px) {
+\t--large-spacing: 3rem;
+\t
+\tfont-size: 20px;
+\t
+\t.container {
+\t\tmax-width: 1200px;
+\t\tpadding: var(--large-spacing);
+\t}
+}`);
+	});
+
+	it("should handle keyframes at-rule", () => {
+		const keyframesRule = atRule("keyframes", "fadeIn", ({ selector }) => {
+			selector("0%", {
+				opacity: "0",
+				transform: "translateY(20px)",
+			});
+
+			selector("100%", {
+				opacity: "1",
+				transform: "translateY(0)",
+			});
+		});
+
+		const result = consumeAtRule(keyframesRule, options);
+
+		expect(result).toBe(`@keyframes fadeIn {
+\t0% {
+\t\topacity: 0;
+\t\ttransform: translateY(20px);
+\t}
+\t
+\t100% {
+\t\topacity: 1;
+\t\ttransform: translateY(0);
+\t}
+}`);
+	});
+
+	it("should handle supports at-rule", () => {
+		const supportsRule = atRule(
+			"supports",
+			"(display: grid)",
+			({ selector }) => {
+				selector(".layout", {
+					display: "grid",
+					gridTemplateColumns: "repeat(3, 1fr)",
+					gap: "1rem",
+				});
+			},
+		);
+
+		const result = consumeAtRule(supportsRule, options);
+
+		expect(result).toBe(`@supports (display: grid) {
+\t.layout {
+\t\tdisplay: grid;
+\t\tgrid-template-columns: repeat(3, 1fr);
+\t\tgap: 1rem;
+\t}
+}`);
+	});
+
+	it("should handle container queries", () => {
+		const containerRule = atRule(
+			"container",
+			"(min-width: 400px)",
+			({ selector }) => {
+				selector(".card-content", {
+					fontSize: "1.2rem",
+					padding: "1.5rem",
+				});
+			},
+		);
+
+		const result = consumeAtRule(containerRule, options);
+
+		expect(result).toBe(`@container (min-width: 400px) {
+\t.card-content {
+\t\tfont-size: 1.2rem;
+\t\tpadding: 1.5rem;
+\t}
+}`);
+	});
+
+	it("should handle nested at-rules", () => {
+		const mediaRule = atRule("media", "(min-width: 768px)", ({ atRule }) => {
+			atRule("supports", "(display: flex)", ({ selector }) => {
+				selector(".flex-container", {
+					display: "flex",
+					alignItems: "center",
+				});
+			});
+		});
+
+		const result = consumeAtRule(mediaRule, options);
+
+		expect(result).toBe(`@media (min-width: 768px) {
+\t@supports (display: flex) {
+\t\t.flex-container {
+\t\t\tdisplay: flex;
+\t\t\talign-items: center;
+\t\t}
+\t}
+}`);
+	});
+
+	it("should handle empty at-rules with only the rule part", () => {
+		const mediaRule = atRule("media", "(min-width: 768px)", {});
+
+		const result = consumeAtRule(mediaRule, options);
+
+		expect(result).toBe("@media (min-width: 768px) {}");
+	});
+
+	it("should handle at-rules with complex rule strings", () => {
+		const mediaRule = atRule(
+			"media",
+			"screen and (min-width: 768px) and (max-width: 1024px)",
+			{
+				fontSize: "16px",
+			},
+		);
+
+		const result = consumeAtRule(mediaRule, options);
+
+		expect(result).toBe(
+			`@media screen and (min-width: 768px) and (max-width: 1024px) {
+\tfont-size: 16px;
+}`,
+		);
+	});
+
+	it("should respect variable prefix in options", () => {
+		const prefixOptions: StyleframeOptions = {
+			variables: {
+				name: ({ name }) => `--sf-${name}`,
+			},
+		};
+
+		const mediaRule = atRule("media", "(min-width: 768px)", ({ variable }) => {
+			variable("responsive-padding", "2rem");
+
+			return {
+				padding: ref("responsive-padding"),
+			};
+		});
+
+		const result = consumeAtRule(mediaRule, prefixOptions);
+
+		expect(result).toBe(`@media (min-width: 768px) {
+\t--sf-responsive-padding: 2rem;
+\t
+\tpadding: var(--sf-responsive-padding);
+}`);
+	});
+
+	it("should handle at-rules with custom indentation", () => {
+		const customOptions: StyleframeOptions = {
+			indent: "    ", // 4 spaces instead of default 2
+		};
+
+		const mediaRule = atRule("media", "(min-width: 768px)", {
+			padding: "2rem",
+			fontSize: "18px",
+		});
+
+		const result = consumeAtRule(mediaRule, customOptions);
+
+		expect(result).toBe(`@media (min-width: 768px) {
+\tpadding: 2rem;
+\tfont-size: 18px;
+}`);
+	});
+
+	it("should handle page at-rules", () => {
+		const pageRule = atRule("page", ":first", {
+			marginTop: "50mm",
+		});
+
+		const result = consumeAtRule(pageRule, options);
+
+		expect(result).toBe(`@page :first {
+\tmargin-top: 50mm;
+}`);
+	});
+
+	it("should handle font-face at-rules", () => {
+		const fontFaceRule = atRule("font-face", "", {
+			fontFamily: '"MyFont"',
+			src: 'url("myfont.woff2") format("woff2")',
+			fontWeight: "normal",
+			fontStyle: "normal",
+		});
+
+		const result = consumeAtRule(fontFaceRule, options);
+
+		expect(result).toBe(`@font-face {
+\tfont-family: "MyFont";
+\tsrc: url("myfont.woff2") format("woff2");
+\tfont-weight: normal;
+\tfont-style: normal;
+}`);
+	});
+
+	it("should handle layer at-rules", () => {
+		const layerRule = atRule("layer", "utilities", ({ selector }) => {
+			selector(".text-center", {
+				textAlign: "center",
+			});
+
+			selector(".hidden", {
+				display: "none",
+			});
+		});
+
+		const result = consumeAtRule(layerRule, options);
+
+		expect(result).toBe(`@layer utilities {
+\t.text-center {
+\t\ttext-align: center;
+\t}
+\t
+\t.hidden {
+\t\tdisplay: none;
+\t}
+}`);
+	});
+});

package/src/consume/at-rule.ts

@@ -0,0 +1,34 @@
+import type { AtRule, StyleframeOptions } from "@styleframe/core";
+import { STATEMENT_AT_RULES, STATEMENT_OR_BLOCK_AT_RULES } from "../constants";
+import { genAtRuleQuery } from "../generator";
+import type { ConsumeFunction } from "../types";
+import { createContainerConsumer } from "./container";
+
+/**
+ * Consumes a generic at-rule instance, equivalent to setting a CSS at-rule
+ * such as @media, @supports, @keyframes, etc.
+ */
+export function createAtRuleConsumer(consume: ConsumeFunction) {
+	const consumeContainer = createContainerConsumer(consume);
+
+	return function consumeAtRule(
+		instance: AtRule,
+		options: StyleframeOptions,
+	): string {
+		const isStatement = STATEMENT_AT_RULES.includes(instance.identifier);
+		const isStatementOrBlock = STATEMENT_OR_BLOCK_AT_RULES.includes(
+			instance.identifier,
+		);
+
+		const hasDeclarations = Object.keys(instance.declarations).length > 0;
+		const hasVariables = instance.variables.length > 0;
+		const hasChildren = instance.children.length > 0;
+
+		const query = genAtRuleQuery(instance.identifier, instance.rule);
+
+		return isStatement ||
+			(isStatementOrBlock && !(hasDeclarations || hasVariables || hasChildren))
+			? `${query};`
+			: consumeContainer(query, instance, options);
+	};
+}

package/src/consume/consume.test.ts

@@ -0,0 +1,259 @@
+import type { Root, StyleframeOptions } from "@styleframe/core";
+import {
+	createAtRuleFunction,
+	createCssFunction,
+	createRefFunction,
+	createRoot,
+	createSelectorFunction,
+	createThemeFunction,
+	createUtilityFunction,
+	createVariableFunction,
+	isUtility,
+} from "@styleframe/core";
+import { consume } from "./consume";
+
+describe("consume", () => {
+	let root: Root;
+	let variable: ReturnType<typeof createVariableFunction>;
+	let ref: ReturnType<typeof createRefFunction>;
+	let css: ReturnType<typeof createCssFunction>;
+	let selector: ReturnType<typeof createSelectorFunction>;
+	let theme: ReturnType<typeof createThemeFunction>;
+	let atRule: ReturnType<typeof createAtRuleFunction>;
+	let utility: ReturnType<typeof createUtilityFunction>;
+
+	const options: StyleframeOptions = {};
+
+	beforeEach(() => {
+		root = createRoot();
+		variable = createVariableFunction(root, root);
+		ref = createRefFunction(root, root);
+		css = createCssFunction(root, root);
+		selector = createSelectorFunction(root, root);
+		theme = createThemeFunction(root, root);
+		atRule = createAtRuleFunction(root, root);
+		utility = createUtilityFunction(root, root);
+	});
+
+	it("should consume a variable instance", () => {
+		const colorVar = variable("primary-color", "#006cff");
+		const result = consume(colorVar, options);
+
+		expect(result).toBe("--primary-color: #006cff;");
+	});
+
+	it("should consume a reference instance", () => {
+		const colorRef = ref("primary-color");
+		const result = consume(colorRef, options);
+
+		expect(result).toBe("var(--primary-color)");
+	});
+
+	it("should consume a CSS instance", () => {
+		const cssValue = css`16px solid #000`;
+		const result = consume(cssValue, options);
+
+		expect(result).toBe("16px solid #000");
+	});
+
+	it("should consume a selector instance", () => {
+		const buttonSelector = selector(".button", {
+			padding: "0.5rem 1rem",
+			backgroundColor: "#006cff",
+		});
+
+		const result = consume(buttonSelector, options);
+
+		expect(result).toEqual(`.button {
+\tpadding: 0.5rem 1rem;
+\tbackground-color: #006cff;
+}`);
+	});
+
+	it("should consume a theme instance", () => {
+		const lightTheme = theme("light", ({ variable: v }) => {
+			v("background-color", "#ffffff");
+			v("text-color", "#000000");
+		});
+
+		const result = consume(lightTheme, options);
+
+		expect(result).toEqual(`[data-theme="light"] {
+\t--background-color: #ffffff;
+\t--text-color: #000000;
+}`);
+	});
+
+	it("should consume an at-rule instance", () => {
+		const mediaRule = atRule("media", "(min-width: 768px)", {
+			fontSize: "18px",
+		});
+
+		const result = consume(mediaRule, options);
+
+		expect(result).toEqual(`@media (min-width: 768px) {
+\tfont-size: 18px;
+}`);
+	});
+
+	it("should consume a utility instance", () => {
+		const createMarginUtility = utility("margin", ({ value }) => ({
+			margin: value,
+		}));
+
+		createMarginUtility({
+			sm: "8px",
+			md: "16px",
+		});
+
+		const marginUtility = root.children.find(
+			(u) => isUtility(u) && u.name === "margin",
+		);
+		const result = consume(marginUtility, options);
+
+		expect(result).toEqual(`._margin\\:sm {
+\tmargin: 8px;
+}`);
+	});
+
+	it("should consume primitive values", () => {
+		expect(consume("test string", options)).toBe("test string");
+		expect(consume(42, options)).toBe("42");
+		expect(consume(true, options)).toBe("true");
+		expect(consume(false, options)).toBe("false");
+		expect(consume(null, options)).toBe("");
+		expect(consume(undefined, options)).toBe("");
+	});
+
+	it("should consume complex nested structures", () => {
+		variable("card-bg", "#ffffff");
+		variable("card-shadow", "0 2px 4px rgba(0,0,0,0.1)");
+
+		selector(".card", ({ variable, selector }) => {
+			const colorVar = variable("card-bg", "#ffffff");
+			const shadowVar = variable("card-shadow", "0 2px 4px rgba(0,0,0,0.1)");
+
+			selector("&:hover", {
+				transform: "translateY(-2px)",
+				boxShadow: ref(shadowVar),
+			});
+
+			return {
+				backgroundColor: ref(colorVar),
+				borderRadius: "8px",
+				padding: "1rem",
+			};
+		});
+
+		theme("dark", ({ variable, selector }) => {
+			const colorVar = variable("card-bg", "#333");
+			variable("card-shadow", "0 2px 4px rgba(0,0,0,0.2)");
+
+			selector(".card", ({ variable, selector }) => {
+				variable("shadow", ref(colorVar));
+
+				selector("&:hover", {
+					transform: "translateY(-6px)",
+				});
+
+				return {
+					boxShadow: ref("shadow"),
+					border: "1px solid #ccc",
+				};
+			});
+		});
+
+		const result = consume(root, options);
+		const expected = `:root {
+\t--card-bg: #ffffff;
+\t--card-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.card {
+\t--card-bg: #ffffff;
+\t--card-shadow: 0 2px 4px rgba(0,0,0,0.1);
+\t
+\tbackground-color: var(--card-bg);
+\tborder-radius: 8px;
+\tpadding: 1rem;
+\t
+\t&:hover {
+\t\ttransform: translateY(-2px);
+\t\tbox-shadow: var(--card-shadow);
+\t}
+}
+
+[data-theme="dark"] {
+\t--card-bg: #333;
+\t--card-shadow: 0 2px 4px rgba(0,0,0,0.2);
+\t
+\t.card {
+\t\t--shadow: var(--card-bg);
+\t\t
+\t\tbox-shadow: var(--shadow);
+\t\tborder: 1px solid #ccc;
+\t\t
+\t\t&:hover {
+\t\t\ttransform: translateY(-6px);
+\t\t}
+\t}
+}`;
+
+		expect(result).toEqual(expected);
+	});
+
+	it("should preserve variable references across different instance types", () => {
+		const colorVar = variable("brand-color", "#006cff");
+
+		// Test in selector
+		const buttonSelector = selector(".button", {
+			backgroundColor: ref(colorVar),
+		});
+
+		// Test in CSS
+		const borderStyle = css`2px solid ${ref(colorVar)}`;
+
+		// Test in theme
+		const brandTheme = theme("brand", ({ selector }) => {
+			selector(".accent", {
+				color: ref(colorVar),
+			});
+		});
+
+		const selectorResult = consume(buttonSelector, options);
+		const cssResult = consume(borderStyle, options);
+		const themeResult = consume(brandTheme, options);
+
+		expect(selectorResult).toEqual(`.button {
+\tbackground-color: var(--brand-color);
+}`);
+		expect(cssResult).toBe("2px solid var(--brand-color)");
+		expect(themeResult).toContain("color: var(--brand-color);");
+	});
+
+	it("should handle options consistently across all instance types", () => {
+		const prefixOptions: StyleframeOptions = {
+			variables: {
+				name: ({ name }) => `--app-${name}`,
+			},
+		};
+
+		const colorVar = variable("primary", "#006cff");
+		const colorRef = ref("secondary");
+		const buttonSelector = selector(".button", {
+			backgroundColor: ref(colorVar),
+			color: colorRef,
+		});
+
+		const varResult = consume(colorVar, prefixOptions);
+		const refResult = consume(colorRef, prefixOptions);
+		const selectorResult = consume(buttonSelector, prefixOptions);
+
+		expect(varResult).toBe("--app-primary: #006cff;");
+		expect(refResult).toBe("var(--app-secondary)");
+		expect(selectorResult).toEqual(`.button {
+\tbackground-color: var(--app-primary);
+\tcolor: var(--app-secondary);
+}`);
+	});
+});

package/src/consume/consume.ts

@@ -0,0 +1,60 @@
+import type { StyleframeOptions } from "@styleframe/core";
+import {
+	isAtRule,
+	isCSS,
+	isRef,
+	isRoot,
+	isSelector,
+	isTheme,
+	isUtility,
+	isVariable,
+} from "@styleframe/core";
+import { createAtRuleConsumer } from "./at-rule";
+import { createCSSConsumer } from "./css";
+import { createPrimitiveConsumer } from "./primitive";
+import { createRefConsumer } from "./ref";
+import { createRootConsumer } from "./root";
+import { createSelectorConsumer } from "./selector";
+import { createThemeConsumer } from "./theme";
+import { createUtilityConsumer } from "./utility";
+import { createVariableConsumer } from "./variable";
+
+/**
+ * Consumes any token instance and returns the CSS string representation
+ */
+export function consume(instance: unknown, options: StyleframeOptions): string {
+	const consumeRoot = createRootConsumer(consume);
+	const consumeSelector = createSelectorConsumer(consume);
+	const consumeUtility = createUtilityConsumer(consume);
+	const consumeAtRule = createAtRuleConsumer(consume);
+	// const consumeRecipe = createRecipeConsumer(consume);
+	const consumeTheme = createThemeConsumer(consume);
+	const consumeVariable = createVariableConsumer(consume);
+	const consumeRef = createRefConsumer(consume);
+	const consumeCSS = createCSSConsumer(consume);
+	const consumePrimitive = createPrimitiveConsumer(consume);
+
+	switch (true) {
+		case isSelector(instance):
+			return consumeSelector(instance, options);
+		case isUtility(instance):
+			return consumeUtility(instance, options);
+		case isAtRule(instance):
+			return consumeAtRule(instance, options);
+		// case isRecipe(instance):
+		// 	return consumeRecipe(instance, options);
+		// 	break;
+		case isRoot(instance):
+			return consumeRoot(instance, options);
+		case isTheme(instance):
+			return consumeTheme(instance, options);
+		case isVariable(instance):
+			return consumeVariable(instance, options);
+		case isRef(instance):
+			return consumeRef(instance, options);
+		case isCSS(instance):
+			return consumeCSS(instance, options);
+		default:
+			return consumePrimitive(instance, options);
+	}
+}