@styleframe/transpiler 1.0.2 → 1.0.3

package/src/transpile.test.ts

@@ -1,829 +0,0 @@
-import type { Styleframe, StyleframeOptions } from "@styleframe/core";
-import {
-	createAtRuleFunction,
-	createCssFunction,
-	createRefFunction,
-	createSelectorFunction,
-	createThemeFunction,
-	createUtilityFunction,
-	createVariableFunction,
-	styleframe,
-} from "@styleframe/core";
-import { createFile, transpile } from "./transpile";
-
-describe("transpile", () => {
-	let instance: Styleframe;
-	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>;
-
-	beforeEach(() => {
-		instance = styleframe();
-		({
-			variable = variable,
-			ref = ref,
-			css = css,
-			selector = selector,
-			theme = theme,
-			atRule = atRule,
-			utility = utility,
-		} = instance);
-	});
-
-	describe("createFile", () => {
-		it("should create a file with name and content", () => {
-			const file = createFile("test.css", "body { margin: 0; }");
-
-			expect(file.name).toBe("test.css");
-			expect(file.content).toEqual("body { margin: 0; }");
-		});
-
-		it("should create a file with empty content when no content provided", () => {
-			const file = createFile("empty.css");
-
-			expect(file.name).toBe("empty.css");
-			expect(file.content).toEqual("");
-		});
-
-		it("should create a file with content string", () => {
-			const content = ":root {\n\t--color: #000;\n}";
-			const file = createFile("variables.css", content);
-
-			expect(file.name).toBe("variables.css");
-			expect(file.content).toEqual(content);
-		});
-	});
-
-	describe("transpile", () => {
-		it("should transpile an empty Styleframe instance", () => {
-			const output = transpile(instance);
-
-			expect(output.files).toHaveLength(2);
-			expect(output.files[0]!.name).toBe("index.css");
-			expect(output.files[0]!.content).toEqual("");
-			expect(output.files[1]!.name).toBe("index.ts");
-			expect(output.files[1]!.content).toEqual("");
-		});
-
-		it("should transpile a simple variable", () => {
-			variable("primary-color", "#006cff");
-
-			const output = transpile(instance);
-
-			expect(output.files).toHaveLength(2);
-			expect(output.files[0]!.name).toBe("index.css");
-			expect(output.files[0]!.content).toEqual(`:root {
-\t--primary-color: #006cff;
-}`);
-			expect(output.files[1]!.name).toBe("index.ts");
-			expect(output.files[1]!.content).toEqual("");
-		});
-
-		it("should transpile multiple variables", () => {
-			variable("primary-color", "#006cff");
-			variable("secondary-color", "#ff6c00");
-			variable("font-size", "16px");
-
-			const output = transpile(instance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`:root {
-\t--primary-color: #006cff;
-\t--secondary-color: #ff6c00;
-\t--font-size: 16px;
-}`);
-		});
-
-		it("should transpile selectors", () => {
-			selector(".button", {
-				padding: "0.5rem 1rem",
-				backgroundColor: "#006cff",
-				color: "#ffffff",
-			});
-
-			const output = transpile(instance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`.button {
-\tpadding: 0.5rem 1rem;
-\tbackground-color: #006cff;
-\tcolor: #ffffff;
-}`);
-		});
-
-		it("should transpile themes", () => {
-			theme("light", ({ variable: v }) => {
-				v("background-color", "#ffffff");
-				v("text-color", "#000000");
-			});
-
-			theme("dark", ({ variable: v }) => {
-				v("background-color", "#000000");
-				v("text-color", "#ffffff");
-			});
-
-			const output = transpile(instance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`
-
-[data-theme="light"] {
-\t--background-color: #ffffff;
-\t--text-color: #000000;
-}
-
-[data-theme="dark"] {
-\t--background-color: #000000;
-\t--text-color: #ffffff;
-}`);
-		});
-
-		it("should transpile at-rules", () => {
-			atRule("media", "(min-width: 768px)", ({ selector: s }) => {
-				s(".container", {
-					maxWidth: "1200px",
-					margin: "0 auto",
-				});
-			});
-
-			const output = transpile(instance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`@media (min-width: 768px) {
-\t.container {
-\t\tmax-width: 1200px;
-\t\tmargin: 0 auto;
-\t}
-}`);
-		});
-
-		it("should transpile utilities", () => {
-			const createMarginUtility = utility("margin", ({ value }) => ({
-				margin: value,
-			}));
-
-			createMarginUtility({
-				sm: "8px",
-				md: "16px",
-				lg: "24px",
-			});
-
-			const output = transpile(instance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`._margin\\:sm {
-\tmargin: 8px;
-}
-
-._margin\\:md {
-\tmargin: 16px;
-}
-
-._margin\\:lg {
-\tmargin: 24px;
-}`);
-		});
-
-		it("should transpile with custom options", () => {
-			const customOptions: StyleframeOptions = {
-				variables: {
-					name: ({ name }) => `--app-${name}`,
-				},
-			};
-
-			const customInstance = styleframe(customOptions);
-			const customRoot = customInstance.root;
-			const customVariable = createVariableFunction(customRoot, customRoot);
-
-			customVariable("primary", "#006cff");
-			customVariable("secondary", "#ff6c00");
-
-			const output = transpile(customInstance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`:root {
-\t--app-primary: #006cff;
-\t--app-secondary: #ff6c00;
-}`);
-		});
-
-		it("should handle variable references", () => {
-			const primaryColor = variable("primary-color", "#006cff");
-
-			selector(".button", {
-				backgroundColor: ref(primaryColor),
-				border: css`2px solid ${ref(primaryColor)}`,
-			});
-
-			const output = transpile(instance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`:root {
-\t--primary-color: #006cff;
-}
-
-.button {
-\tbackground-color: var(--primary-color);
-\tborder: 2px solid var(--primary-color);
-}`);
-		});
-
-		it("should handle nested selectors", () => {
-			selector(".card", ({ selector: s }) => {
-				s(".title", {
-					fontSize: "1.5rem",
-					fontWeight: "bold",
-				});
-
-				s("&:hover", {
-					transform: "translateY(-2px)",
-					boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
-				});
-
-				return {
-					padding: "1rem",
-					borderRadius: "8px",
-				};
-			});
-
-			const output = transpile(instance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`.card {
-\tpadding: 1rem;
-\tborder-radius: 8px;
-\t
-\t.title {
-\t\tfont-size: 1.5rem;
-\t\tfont-weight: bold;
-\t}
-\t
-\t&:hover {
-\t\ttransform: translateY(-2px);
-\t\tbox-shadow: 0 4px 8px rgba(0,0,0,0.1);
-\t}
-}`);
-		});
-
-		it("should transpile a complex scenario with utilities, modifiers, themes, and nested structures", () => {
-			// Define global variables
-			const primaryColor = variable("primary-color", "#006cff");
-			const secondaryColor = variable("secondary-color", "#ff6c00");
-			variable("font-family", "'Inter', sans-serif");
-			variable("spacing-unit", "8px");
-
-			// Create utilities
-			const createPaddingUtility = utility("padding", ({ value }) => ({
-				padding: value,
-			}));
-
-			const createFlexUtility = utility("flex", ({ value }) => ({
-				display: "flex",
-				flexDirection: value,
-			}));
-
-			createPaddingUtility({
-				sm: "8px",
-				md: "16px",
-				lg: "24px",
-				xl: "32px",
-			});
-
-			createFlexUtility({
-				row: "row",
-				col: "column",
-			});
-
-			// Create base styles
-			selector("*", {
-				boxSizing: "border-box",
-				margin: "0",
-				padding: "0",
-			});
-
-			selector("body", {
-				fontFamily: ref("font-family"),
-				lineHeight: "1.6",
-			});
-
-			// Create component styles with nested selectors and modifiers
-			selector(".button", ({ selector: s, variable: v }) => {
-				v("button-bg", ref(primaryColor));
-				v("button-hover-bg", ref(secondaryColor));
-
-				s("&:hover", {
-					backgroundColor: ref("button-hover-bg"),
-					transform: "scale(1.05)",
-				});
-
-				s("&:active", {
-					transform: "scale(0.98)",
-				});
-
-				s("&.button--large", {
-					padding: "1rem 2rem",
-					fontSize: "1.125rem",
-				});
-
-				s("&.button--disabled", {
-					opacity: "0.5",
-					cursor: "not-allowed",
-				});
-
-				s(".button__icon", {
-					marginRight: "0.5rem",
-					verticalAlign: "middle",
-				});
-
-				return {
-					backgroundColor: ref("button-bg"),
-					color: "#ffffff",
-					padding: "0.75rem 1.5rem",
-					border: "none",
-					borderRadius: "4px",
-					cursor: "pointer",
-					transition: "all 0.3s ease",
-					fontSize: "1rem",
-				};
-			});
-
-			// Create card component with complex nesting
-			selector(".card", ({ selector: s, variable: v }) => {
-				v("card-shadow", "0 2px 8px rgba(0,0,0,0.1)");
-				v("card-bg", "#ffffff");
-
-				s(".card__header", ({ selector: nested }) => {
-					nested(".card__title", {
-						fontSize: "1.5rem",
-						fontWeight: "600",
-						color: ref(primaryColor),
-					});
-
-					nested(".card__subtitle", {
-						fontSize: "0.875rem",
-						color: "#666666",
-						marginTop: "0.25rem",
-					});
-
-					return {
-						padding: "1.5rem",
-						borderBottom: "1px solid #e0e0e0",
-					};
-				});
-
-				s(".card__body", {
-					padding: "1.5rem",
-				});
-
-				s(".card__footer", ({ selector: nested }) => {
-					nested(".button", {
-						marginRight: "0.5rem",
-					});
-
-					return {
-						padding: "1rem 1.5rem",
-						borderTop: "1px solid #e0e0e0",
-						display: "flex",
-						justifyContent: "flex-end",
-					};
-				});
-
-				s("&:hover", {
-					boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
-					transform: "translateY(-2px)",
-				});
-
-				return {
-					backgroundColor: ref("card-bg"),
-					boxShadow: ref("card-shadow"),
-					borderRadius: "8px",
-					overflow: "hidden",
-					transition: "all 0.3s ease",
-				};
-			});
-
-			// Create themes with overrides
-			theme("light", ({ variable: v, selector: s }) => {
-				v("bg-primary", "#ffffff");
-				v("bg-secondary", "#f5f5f5");
-				v("text-primary", "#1a1a1a");
-				v("text-secondary", "#666666");
-				v("border-color", "#e0e0e0");
-
-				s(".card", ({ variable: cardVar }) => {
-					cardVar("card-bg", ref("bg-primary"));
-					cardVar("card-shadow", "0 2px 8px rgba(0,0,0,0.08)");
-				});
-
-				s(".button", ({ variable: btnVar }) => {
-					btnVar("button-bg", ref(primaryColor));
-				});
-			});
-
-			theme("dark", ({ variable: v, selector: s }) => {
-				v("bg-primary", "#1a1a1a");
-				v("bg-secondary", "#2d2d2d");
-				v("text-primary", "#ffffff");
-				v("text-secondary", "#b0b0b0");
-				v("border-color", "#404040");
-
-				s("body", {
-					backgroundColor: ref("bg-primary"),
-					color: ref("text-primary"),
-				});
-
-				s(".card", ({ variable: cardVar }) => {
-					cardVar("card-bg", ref("bg-secondary"));
-					cardVar("card-shadow", "0 2px 8px rgba(0,0,0,0.3)");
-
-					return {
-						borderColor: ref("border-color"),
-					};
-				});
-
-				s(".button", ({ variable: btnVar }) => {
-					btnVar("button-bg", "#0080ff");
-					btnVar("button-hover-bg", "#0066cc");
-				});
-			});
-
-			// Create responsive at-rules
-			atRule("media", "(min-width: 768px)", ({ selector: s }) => {
-				s(".container", {
-					maxWidth: "768px",
-					margin: "0 auto",
-					padding: "0 1rem",
-				});
-
-				s(".card", {
-					maxWidth: "600px",
-				});
-			});
-
-			atRule("media", "(min-width: 1024px)", ({ selector: s }) => {
-				s(".container", {
-					maxWidth: "1024px",
-				});
-
-				s(".grid", {
-					display: "grid",
-					gridTemplateColumns: "repeat(3, 1fr)",
-					gap: "1.5rem",
-				});
-			});
-
-			// Create print styles
-			atRule("media", "print", ({ selector: s }) => {
-				s("body", {
-					backgroundColor: "#ffffff",
-					color: "#000000",
-				});
-
-				s(".button", {
-					display: "none",
-				});
-
-				s(".card", {
-					boxShadow: "none",
-					border: "1px solid #000000",
-				});
-			});
-
-			// Create animation keyframes
-			atRule("keyframes", "fadeIn", {
-				"0%": {
-					opacity: "0",
-				},
-				"100%": {
-					opacity: "1",
-				},
-			});
-
-			atRule("keyframes", "slideUp", {
-				"0%": {
-					transform: "translateY(20px)",
-					opacity: "0",
-				},
-				"100%": {
-					transform: "translateY(0)",
-					opacity: "1",
-				},
-			});
-
-			// Create animation classes using the keyframes
-			selector(".fade-in", {
-				animation: "fadeIn 0.3s ease-in-out",
-			});
-
-			selector(".slide-up", {
-				animation: "slideUp 0.5s ease-out",
-			});
-
-			// Transpile the complex scenario
-			const output = transpile(instance);
-
-			expect(output.files).toHaveLength(2);
-			expect(output.files[0]!.name).toBe("index.css");
-
-			const content = output.files[0]!.content;
-
-			// This is a complex test that validates the structure is correct
-			// TODO: Fix keyframes output - currently outputs as [object Object] instead of proper CSS properties
-			// Note: The order of items matters - atRules and keyframes come before themes in the output
-			expect(content).toEqual(`:root {
-\t--primary-color: #006cff;
-\t--secondary-color: #ff6c00;
-\t--font-family: 'Inter', sans-serif;
-\t--spacing-unit: 8px;
-}
-
-._padding\\:sm {
-\tpadding: 8px;
-}
-
-._padding\\:md {
-\tpadding: 16px;
-}
-
-._padding\\:lg {
-\tpadding: 24px;
-}
-
-._padding\\:xl {
-\tpadding: 32px;
-}
-
-._flex\\:row {
-\tdisplay: flex;
-\tflex-direction: row;
-}
-
-._flex\\:col {
-\tdisplay: flex;
-\tflex-direction: column;
-}
-
-* {
-\tbox-sizing: border-box;
-\tmargin: 0;
-\tpadding: 0;
-}
-
-body {
-\tfont-family: var(--font-family);
-\tline-height: 1.6;
-}
-
-.button {
-\t--button-bg: var(--primary-color);
-\t--button-hover-bg: var(--secondary-color);
-\t
-\tbackground-color: var(--button-bg);
-\tcolor: #ffffff;
-\tpadding: 0.75rem 1.5rem;
-\tborder: none;
-\tborder-radius: 4px;
-\tcursor: pointer;
-\ttransition: all 0.3s ease;
-\tfont-size: 1rem;
-\t
-\t&:hover {
-\t\tbackground-color: var(--button-hover-bg);
-\t\ttransform: scale(1.05);
-\t}
-\t
-\t&:active {
-\t\ttransform: scale(0.98);
-\t}
-\t
-\t&.button--large {
-\t\tpadding: 1rem 2rem;
-\t\tfont-size: 1.125rem;
-\t}
-\t
-\t&.button--disabled {
-\t\topacity: 0.5;
-\t\tcursor: not-allowed;
-\t}
-\t
-\t.button__icon {
-\t\tmargin-right: 0.5rem;
-\t\tvertical-align: middle;
-\t}
-}
-
-.card {
-\t--card-shadow: 0 2px 8px rgba(0,0,0,0.1);
-\t--card-bg: #ffffff;
-\t
-\tbackground-color: var(--card-bg);
-\tbox-shadow: var(--card-shadow);
-\tborder-radius: 8px;
-\toverflow: hidden;
-\ttransition: all 0.3s ease;
-\t
-\t.card__header {
-\t\tpadding: 1.5rem;
-\t\tborder-bottom: 1px solid #e0e0e0;
-\t\t
-\t\t.card__title {
-\t\t\tfont-size: 1.5rem;
-\t\t\tfont-weight: 600;
-\t\t\tcolor: var(--primary-color);
-\t\t}
-\t\t
-\t\t.card__subtitle {
-\t\t\tfont-size: 0.875rem;
-\t\t\tcolor: #666666;
-\t\t\tmargin-top: 0.25rem;
-\t\t}
-\t}
-\t
-\t.card__body {
-\t\tpadding: 1.5rem;
-\t}
-\t
-\t.card__footer {
-\t\tpadding: 1rem 1.5rem;
-\t\tborder-top: 1px solid #e0e0e0;
-\t\tdisplay: flex;
-\t\tjustify-content: flex-end;
-\t\t
-\t\t.button {
-\t\t\tmargin-right: 0.5rem;
-\t\t}
-\t}
-\t
-\t&:hover {
-\t\tbox-shadow: 0 4px 16px rgba(0,0,0,0.15);
-\t\ttransform: translateY(-2px);
-\t}
-}
-
-@media (min-width: 768px) {
-\t.container {
-\t\tmax-width: 768px;
-\t\tmargin: 0 auto;
-\t\tpadding: 0 1rem;
-\t}
-\t
-\t.card {
-\t\tmax-width: 600px;
-\t}
-}
-
-@media (min-width: 1024px) {
-\t.container {
-\t\tmax-width: 1024px;
-\t}
-\t
-\t.grid {
-\t\tdisplay: grid;
-\t\tgrid-template-columns: repeat(3, 1fr);
-\t\tgap: 1.5rem;
-\t}
-}
-
-@media print {
-\tbody {
-\t\tbackground-color: #ffffff;
-\t\tcolor: #000000;
-\t}
-\t
-\t.button {
-\t\tdisplay: none;
-\t}
-\t
-\t.card {
-\t\tbox-shadow: none;
-\t\tborder: 1px solid #000000;
-\t}
-}
-
-@keyframes fadeIn {
-\t0%: [object Object];
-\t100%: [object Object];
-}
-
-@keyframes slideUp {
-\t0%: [object Object];
-\t100%: [object Object];
-}
-
-.fade-in {
-\tanimation: fadeIn 0.3s ease-in-out;
-}
-
-.slide-up {
-\tanimation: slideUp 0.5s ease-out;
-}
-
-[data-theme="light"] {
-\t--bg-primary: #ffffff;
-\t--bg-secondary: #f5f5f5;
-\t--text-primary: #1a1a1a;
-\t--text-secondary: #666666;
-\t--border-color: #e0e0e0;
-\t
-\t.card {
-\t\t--card-bg: var(--bg-primary);
-\t\t--card-shadow: 0 2px 8px rgba(0,0,0,0.08);
-\t}
-\t
-\t.button {
-\t\t--button-bg: var(--primary-color);
-\t}
-}
-
-[data-theme="dark"] {
-\t--bg-primary: #1a1a1a;
-\t--bg-secondary: #2d2d2d;
-\t--text-primary: #ffffff;
-\t--text-secondary: #b0b0b0;
-\t--border-color: #404040;
-\t
-\tbody {
-\t\tbackground-color: var(--bg-primary);
-\t\tcolor: var(--text-primary);
-\t}
-\t
-\t.card {
-\t\t--card-bg: var(--bg-secondary);
-\t\t--card-shadow: 0 2px 8px rgba(0,0,0,0.3);
-\t\t
-\t\tborder-color: var(--border-color);
-\t}
-\t
-\t.button {
-\t\t--button-bg: #0080ff;
-\t\t--button-hover-bg: #0066cc;
-\t}
-}`);
-		});
-
-		it("should maintain output file structure", () => {
-			variable("test", "value");
-			selector(".test", { color: "red" });
-
-			const output = transpile(instance);
-
-			expect(output).toHaveProperty("files");
-			expect(Array.isArray(output.files)).toBe(true);
-			expect(output.files[0]!).toHaveProperty("name");
-			expect(output.files[0]!).toHaveProperty("content");
-			expect(typeof output.files[0]!.content).toBe("string");
-
-			const content = output.files[0]!.content;
-			expect(content).toEqual(`:root {
-\t--test: value;
-}
-
-.test {
-\tcolor: red;
-}`);
-		});
-
-		it("should pass options to consume function", () => {
-			const customOptions: StyleframeOptions = {
-				variables: {
-					name: ({ name }) => `--custom-${name}`,
-				},
-			};
-
-			const customInstance = styleframe(customOptions);
-			const customRoot = customInstance.root;
-			const customVariable = createVariableFunction(customRoot, customRoot);
-			const customUtility = createUtilityFunction(customRoot, customRoot);
-
-			customVariable("color", "#123456");
-
-			const createSpacingUtility = customUtility("space", ({ value }) => ({
-				marginBottom: value,
-			}));
-
-			createSpacingUtility({
-				small: "4px",
-				large: "16px",
-			});
-
-			const output = transpile(customInstance);
-			const content = output.files[0]!.content;
-
-			expect(content).toEqual(`:root {
-\t--custom-color: #123456;
-}
-
-._space\\:small {
-\tmargin-bottom: 4px;
-}
-
-._space\\:large {
-\tmargin-bottom: 16px;
-}`);
-		});
-	});
-});