@styleframe/transpiler 1.0.0

package/src/consume/variable.test.ts

@@ -0,0 +1,197 @@
+import type { Root, StyleframeOptions } from "@styleframe/core";
+import {
+	createRefFunction,
+	createRoot,
+	createVariableFunction,
+} from "@styleframe/core";
+import { createVariableConsumer } from "./variable";
+import { consume } from "./consume";
+
+describe("createVariableConsumer", () => {
+	let root: Root;
+	let variable: ReturnType<typeof createVariableFunction>;
+	let ref: ReturnType<typeof createRefFunction>;
+
+	const consumeVariable = createVariableConsumer(consume);
+	const options: StyleframeOptions = {};
+
+	beforeEach(() => {
+		root = createRoot();
+		variable = createVariableFunction(root, root);
+		ref = createRefFunction(root, root);
+	});
+
+	it("should convert a basic variable to CSS variable declaration", () => {
+		const colorVar = variable("color-primary", "#006cff");
+		const result = consumeVariable(colorVar, options);
+
+		expect(result).toBe("--color-primary: #006cff;");
+	});
+
+	it("should handle variable with dashed names", () => {
+		const spacingVar = variable("spacing--md", "1rem");
+		const result = consumeVariable(spacingVar, options);
+
+		expect(result).toBe("--spacing--md: 1rem;");
+	});
+
+	it("should convert variable with numeric value", () => {
+		const zIndexVar = variable("z-index-header", 100);
+		const result = consumeVariable(zIndexVar, options);
+
+		expect(result).toBe("--z-index-header: 100;");
+	});
+
+	it("should handle variable with empty string value", () => {
+		const emptyVar = variable("empty-var", "");
+		const result = consumeVariable(emptyVar, options);
+
+		expect(result).toBe("--empty-var: ;");
+	});
+
+	it("should respect prefix in options if provided", () => {
+		const prefixOptions: StyleframeOptions = {
+			variables: {
+				name: ({ name }) => `--sf-${name}`,
+			},
+		};
+
+		const colorVar = variable("color-primary", "#006cff");
+		const result = consumeVariable(colorVar, prefixOptions);
+
+		expect(result).toBe("--sf-color-primary: #006cff;");
+	});
+
+	it("should handle variable with complex values like calc expressions", () => {
+		const calcVar = variable("sidebar-width", "calc(100% - 200px)");
+		const result = consumeVariable(calcVar, options);
+
+		expect(result).toBe("--sidebar-width: calc(100% - 200px);");
+	});
+
+	it("should handle variable referencing another variable", () => {
+		// Create a base variable
+		const baseColorVar = variable("color-base", "#006cff");
+
+		// Create a reference to the base variable
+		const baseColorRef = ref(baseColorVar);
+
+		// Create a variable that uses the reference
+		const colorPrimaryVar = variable("color-primary", baseColorRef);
+
+		const result = consumeVariable(colorPrimaryVar, options);
+
+		expect(result).toBe("--color-primary: var(--color-base);");
+	});
+
+	it("should handle variable with string reference", () => {
+		// Create a reference using a string name
+		const colorRef = ref("color-base");
+
+		// Create a variable that uses the reference
+		const colorPrimaryVar = variable("color-primary", colorRef);
+
+		const result = consumeVariable(colorPrimaryVar, options);
+
+		expect(result).toBe("--color-primary: var(--color-base);");
+	});
+
+	it("should handle variable with reference that has fallback", () => {
+		// Create a reference with fallback value
+		const fontSizeRef = ref("font-size", "16px");
+
+		// Create a variable that uses the reference with fallback
+		const bodyFontVar = variable("body-font-size", fontSizeRef);
+
+		const result = consumeVariable(bodyFontVar, options);
+
+		expect(result).toBe("--body-font-size: var(--font-size, 16px);");
+	});
+
+	it("should handle variable with null value", () => {
+		const nullVar = variable("null-var", null);
+		const result = consumeVariable(nullVar, options);
+
+		expect(result).toBe("--null-var: ;");
+	});
+
+	it("should handle variable with undefined value", () => {
+		const undefinedVar = variable("undefined-var", undefined);
+		const result = consumeVariable(undefinedVar, options);
+
+		expect(result).toBe("--undefined-var: ;");
+	});
+
+	it("should handle variable with boolean value", () => {
+		const boolVar = variable("feature-enabled", true);
+		const result = consumeVariable(boolVar, options);
+
+		expect(result).toBe("--feature-enabled: true;");
+	});
+
+	it("should handle variable with array value", () => {
+		const arrayVar = variable("font-stack", [
+			"Helvetica",
+			"Arial",
+			"sans-serif",
+		]);
+		const result = consumeVariable(arrayVar, options);
+
+		expect(result).toBe("--font-stack: Helvetica,Arial,sans-serif;");
+	});
+
+	it("should handle variable with complex CSS values", () => {
+		const shadowVar = variable(
+			"box-shadow",
+			"0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05)",
+		);
+		const result = consumeVariable(shadowVar, options);
+
+		expect(result).toBe(
+			"--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);",
+		);
+	});
+
+	it("should handle chained variable references", () => {
+		// Create a base color variable
+		const baseColorVar = variable("color-base", "#006cff");
+
+		// Create an intermediate variable that references the base
+		const primaryColorVar = variable("color-primary", ref(baseColorVar));
+
+		// Create a final variable that references the intermediate one
+		const buttonColorVar = variable("button-color", ref(primaryColorVar));
+
+		const result = consumeVariable(buttonColorVar, options);
+
+		expect(result).toBe("--button-color: var(--color-primary);");
+	});
+
+	it("should handle variable with object value by converting to string", () => {
+		// @ts-expect-error - Ignoring type to test object handling
+		const objVar = variable("object-var", { key: "value" });
+		const result = consumeVariable(objVar, options);
+
+		// Object should be converted to string
+		expect(result).toBe("--object-var: [object Object];");
+	});
+
+	it("should apply variable prefix consistently when referencing other variables", () => {
+		const prefixOptions: StyleframeOptions = {
+			variables: {
+				name: ({ name }) => `--sf-${name}`,
+			},
+		};
+
+		// Create a base color variable
+		const baseColorVar = variable("color-base", "#006cff");
+
+		// Create a variable that references the base
+		const primaryColorVar = variable("color-primary", ref(baseColorVar));
+
+		const result = consumeVariable(primaryColorVar, prefixOptions);
+
+		// Both the variable name and the referenced variable should have the prefix
+		expect(result).toBe("--sf-color-primary: var(--sf-color-base);");
+	});
+});

package/src/consume/variable.ts

@@ -0,0 +1,20 @@
+/**
+ * Consumes a variable instance, equivalent to setting a CSS variable
+ */
+
+import type { StyleframeOptions, Variable } from "@styleframe/core";
+import { defaultVariableNameFn } from "../defaults";
+import { genDeclareVariable } from "../generator";
+import type { ConsumeFunction } from "../types";
+
+export function createVariableConsumer(consume: ConsumeFunction) {
+	return function consumeVariable(
+		instance: Variable,
+		options: StyleframeOptions,
+	): string {
+		const variableNameFn = options.variables?.name ?? defaultVariableNameFn;
+		const variableName = variableNameFn({ name: instance.name });
+
+		return genDeclareVariable(variableName, consume(instance.value, options));
+	};
+}

package/src/defaults.ts

@@ -0,0 +1,21 @@
+import type {
+	ThemeSelectorFn,
+	UtilitySelectorFn,
+	VariableNameFn,
+} from "@styleframe/core";
+
+export const defaultThemeSelectorFn: ThemeSelectorFn = ({ name }) => {
+	return `[data-theme="${name}"]`;
+};
+
+export const defaultUtilitySelectorFn: UtilitySelectorFn = ({
+	name,
+	value,
+	modifiers,
+}) => {
+	return `._${[...modifiers, name, value].filter(Boolean).join("\\:")}`;
+};
+
+export const defaultVariableNameFn: VariableNameFn = ({ name }) => {
+	return name;
+};

package/src/generator/genAtRuleQuery.test.ts

@@ -0,0 +1,148 @@
+import { describe, expect, it } from "vitest";
+import { genAtRuleQuery } from "./genAtRuleQuery";
+
+describe("genAtRuleQuery", () => {
+	it("should generate a basic media query", () => {
+		const result = genAtRuleQuery("media", "(min-width: 768px)");
+		expect(result).toBe("@media (min-width: 768px)");
+	});
+
+	it("should generate a supports query", () => {
+		const result = genAtRuleQuery("supports", "(display: grid)");
+		expect(result).toBe("@supports (display: grid)");
+	});
+
+	it("should generate a container query", () => {
+		const result = genAtRuleQuery("container", "sidebar (min-width: 400px)");
+		expect(result).toBe("@container sidebar (min-width: 400px)");
+	});
+
+	it("should generate a layer rule", () => {
+		const result = genAtRuleQuery("layer", "utilities");
+		expect(result).toBe("@layer utilities");
+	});
+
+	it("should generate a scope rule", () => {
+		const result = genAtRuleQuery("scope", "(.component)");
+		expect(result).toBe("@scope (.component)");
+	});
+
+	it("should handle complex media queries", () => {
+		const result = genAtRuleQuery(
+			"media",
+			"screen and (min-width: 768px) and (max-width: 1024px)",
+		);
+		expect(result).toBe(
+			"@media screen and (min-width: 768px) and (max-width: 1024px)",
+		);
+	});
+
+	it("should handle print media type", () => {
+		const result = genAtRuleQuery("media", "print");
+		expect(result).toBe("@media print");
+	});
+
+	it("should handle import rules", () => {
+		const result = genAtRuleQuery("import", "url('styles.css')");
+		expect(result).toBe("@import url('styles.css')");
+	});
+
+	it("should handle charset rules", () => {
+		const result = genAtRuleQuery("charset", '"UTF-8"');
+		expect(result).toBe('@charset "UTF-8"');
+	});
+
+	it("should handle namespace rules", () => {
+		const result = genAtRuleQuery(
+			"namespace",
+			"url(http://www.w3.org/1999/xhtml)",
+		);
+		expect(result).toBe("@namespace url(http://www.w3.org/1999/xhtml)");
+	});
+
+	it("should handle page rules", () => {
+		const result = genAtRuleQuery("page", ":first");
+		expect(result).toBe("@page :first");
+	});
+
+	it("should handle font-face (even though typically used without a rule)", () => {
+		const result = genAtRuleQuery("font-face", "");
+		expect(result).toBe("@font-face");
+	});
+
+	it("should handle keyframes", () => {
+		const result = genAtRuleQuery("keyframes", "slideIn");
+		expect(result).toBe("@keyframes slideIn");
+	});
+
+	it("should handle counter-style", () => {
+		const result = genAtRuleQuery("counter-style", "custom-counter");
+		expect(result).toBe("@counter-style custom-counter");
+	});
+
+	it("should handle property rules", () => {
+		const result = genAtRuleQuery("property", "--my-color");
+		expect(result).toBe("@property --my-color");
+	});
+
+	it("should handle document rules (deprecated but still valid)", () => {
+		const result = genAtRuleQuery("document", "url(http://www.example.com/)");
+		expect(result).toBe("@document url(http://www.example.com/)");
+	});
+
+	it("should handle empty rule string", () => {
+		const result = genAtRuleQuery("media", "");
+		expect(result).toBe("@media");
+	});
+
+	it("should handle whitespace in rule string", () => {
+		const result = genAtRuleQuery("media", "   (min-width: 768px)   ");
+		expect(result).toBe("@media    (min-width: 768px)   ");
+	});
+
+	it("should handle special characters in identifier", () => {
+		const result = genAtRuleQuery("-webkit-keyframes", "bounce");
+		expect(result).toBe("@-webkit-keyframes bounce");
+	});
+
+	it("should handle multiple conditions in supports", () => {
+		const result = genAtRuleQuery(
+			"supports",
+			"(display: grid) and (aspect-ratio: 1/1)",
+		);
+		expect(result).toBe("@supports (display: grid) and (aspect-ratio: 1/1)");
+	});
+
+	it("should handle not operator in supports", () => {
+		const result = genAtRuleQuery("supports", "not (display: grid)");
+		expect(result).toBe("@supports not (display: grid)");
+	});
+
+	it("should handle or operator in supports", () => {
+		const result = genAtRuleQuery(
+			"supports",
+			"(display: flex) or (display: grid)",
+		);
+		expect(result).toBe("@supports (display: flex) or (display: grid)");
+	});
+
+	it("should preserve exact spacing in complex queries", () => {
+		const result = genAtRuleQuery(
+			"media",
+			"(prefers-color-scheme: dark) and (min-width: 900px)",
+		);
+		expect(result).toBe(
+			"@media (prefers-color-scheme: dark) and (min-width: 900px)",
+		);
+	});
+
+	it("should handle nested parentheses in queries", () => {
+		const result = genAtRuleQuery(
+			"supports",
+			"((display: flex) and (gap: 1rem)) or (display: grid)",
+		);
+		expect(result).toBe(
+			"@supports ((display: flex) and (gap: 1rem)) or (display: grid)",
+		);
+	});
+});

package/src/generator/genAtRuleQuery.ts

@@ -0,0 +1,3 @@
+export function genAtRuleQuery(identifier: string, rule: string) {
+	return `@${identifier}${rule ? " " : ""}${rule}`;
+}

package/src/generator/genDeclaration.test.ts

@@ -0,0 +1,283 @@
+import { describe, expect, it } from "vitest";
+import { genDeclaration } from "./genDeclaration";
+
+describe("genDeclaration", () => {
+	it("should generate a basic CSS declaration", () => {
+		const result = genDeclaration("color", "red");
+		expect(result).toBe("color: red;");
+	});
+
+	it("should generate a declaration with hex color value", () => {
+		const result = genDeclaration("background-color", "#ff0000");
+		expect(result).toBe("background-color: #ff0000;");
+	});
+
+	it("should generate a declaration with rgb value", () => {
+		const result = genDeclaration("color", "rgb(255, 0, 0)");
+		expect(result).toBe("color: rgb(255, 0, 0);");
+	});
+
+	it("should generate a declaration with rgba value", () => {
+		const result = genDeclaration("background", "rgba(0, 0, 0, 0.5)");
+		expect(result).toBe("background: rgba(0, 0, 0, 0.5);");
+	});
+
+	it("should generate a declaration with hsl value", () => {
+		const result = genDeclaration("color", "hsl(120, 100%, 50%)");
+		expect(result).toBe("color: hsl(120, 100%, 50%);");
+	});
+
+	it("should generate a declaration with pixel value", () => {
+		const result = genDeclaration("width", "100px");
+		expect(result).toBe("width: 100px;");
+	});
+
+	it("should generate a declaration with percentage value", () => {
+		const result = genDeclaration("width", "50%");
+		expect(result).toBe("width: 50%;");
+	});
+
+	it("should generate a declaration with em value", () => {
+		const result = genDeclaration("font-size", "1.5em");
+		expect(result).toBe("font-size: 1.5em;");
+	});
+
+	it("should generate a declaration with rem value", () => {
+		const result = genDeclaration("margin", "2rem");
+		expect(result).toBe("margin: 2rem;");
+	});
+
+	it("should generate a declaration with viewport units", () => {
+		const result = genDeclaration("height", "100vh");
+		expect(result).toBe("height: 100vh;");
+	});
+
+	it("should generate a declaration with multiple values", () => {
+		const result = genDeclaration("margin", "10px 20px 30px 40px");
+		expect(result).toBe("margin: 10px 20px 30px 40px;");
+	});
+
+	it("should generate a declaration with important flag", () => {
+		const result = genDeclaration("color", "blue !important");
+		expect(result).toBe("color: blue !important;");
+	});
+
+	it("should handle CSS custom properties", () => {
+		const result = genDeclaration("--primary-color", "#007bff");
+		expect(result).toBe("--primary-color: #007bff;");
+	});
+
+	it("should handle var() function", () => {
+		const result = genDeclaration("color", "var(--primary-color)");
+		expect(result).toBe("color: var(--primary-color);");
+	});
+
+	it("should handle var() with fallback", () => {
+		const result = genDeclaration("color", "var(--text-color, black)");
+		expect(result).toBe("color: var(--text-color, black);");
+	});
+
+	it("should handle calc() function", () => {
+		const result = genDeclaration("width", "calc(100% - 20px)");
+		expect(result).toBe("width: calc(100% - 20px);");
+	});
+
+	it("should handle url() function", () => {
+		const result = genDeclaration("background-image", "url('image.jpg')");
+		expect(result).toBe("background-image: url('image.jpg');");
+	});
+
+	it("should handle linear-gradient", () => {
+		const result = genDeclaration(
+			"background",
+			"linear-gradient(to right, red, blue)",
+		);
+		expect(result).toBe("background: linear-gradient(to right, red, blue);");
+	});
+
+	it("should handle transform functions", () => {
+		const result = genDeclaration("transform", "rotate(45deg) scale(1.5)");
+		expect(result).toBe("transform: rotate(45deg) scale(1.5);");
+	});
+
+	it("should handle transition shorthand", () => {
+		const result = genDeclaration("transition", "all 0.3s ease-in-out");
+		expect(result).toBe("transition: all 0.3s ease-in-out;");
+	});
+
+	it("should handle box-shadow", () => {
+		const result = genDeclaration("box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)");
+		expect(result).toBe("box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);");
+	});
+
+	it("should handle font shorthand", () => {
+		const result = genDeclaration(
+			"font",
+			"italic bold 16px/1.5 Arial, sans-serif",
+		);
+		expect(result).toBe("font: italic bold 16px/1.5 Arial, sans-serif;");
+	});
+
+	it("should handle grid template", () => {
+		const result = genDeclaration("grid-template-columns", "repeat(3, 1fr)");
+		expect(result).toBe("grid-template-columns: repeat(3, 1fr);");
+	});
+
+	it("should handle flex shorthand", () => {
+		const result = genDeclaration("flex", "1 1 auto");
+		expect(result).toBe("flex: 1 1 auto;");
+	});
+
+	it("should handle animation shorthand", () => {
+		const result = genDeclaration("animation", "slide 2s ease-in-out infinite");
+		expect(result).toBe("animation: slide 2s ease-in-out infinite;");
+	});
+
+	it("should handle vendor prefixes", () => {
+		const result = genDeclaration("-webkit-transform", "rotate(45deg)");
+		expect(result).toBe("-webkit-transform: rotate(45deg);");
+	});
+
+	it("should handle empty string value", () => {
+		const result = genDeclaration("content", "");
+		expect(result).toBe("content: ;");
+	});
+
+	it("should handle quoted string value", () => {
+		const result = genDeclaration("content", '"Hello World"');
+		expect(result).toBe('content: "Hello World";');
+	});
+
+	it("should handle single quoted string value", () => {
+		const result = genDeclaration(
+			"font-family",
+			"'Helvetica Neue', sans-serif",
+		);
+		expect(result).toBe("font-family: 'Helvetica Neue', sans-serif;");
+	});
+
+	it("should preserve whitespace in value", () => {
+		const result = genDeclaration("margin", "  10px   20px  ");
+		expect(result).toBe("margin:   10px   20px  ;");
+	});
+
+	it("should handle special CSS keywords", () => {
+		const result = genDeclaration("display", "none");
+		expect(result).toBe("display: none;");
+	});
+
+	it("should handle inherit keyword", () => {
+		const result = genDeclaration("color", "inherit");
+		expect(result).toBe("color: inherit;");
+	});
+
+	it("should handle initial keyword", () => {
+		const result = genDeclaration("margin", "initial");
+		expect(result).toBe("margin: initial;");
+	});
+
+	it("should handle unset keyword", () => {
+		const result = genDeclaration("padding", "unset");
+		expect(result).toBe("padding: unset;");
+	});
+
+	it("should handle revert keyword", () => {
+		const result = genDeclaration("font-size", "revert");
+		expect(result).toBe("font-size: revert;");
+	});
+
+	it("should handle auto keyword", () => {
+		const result = genDeclaration("margin", "auto");
+		expect(result).toBe("margin: auto;");
+	});
+
+	it("should handle multiple box-shadow values", () => {
+		const result = genDeclaration(
+			"box-shadow",
+			"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
+		);
+		expect(result).toBe(
+			"box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);",
+		);
+	});
+
+	it("should handle CSS math functions", () => {
+		const result = genDeclaration("width", "min(100%, 500px)");
+		expect(result).toBe("width: min(100%, 500px);");
+	});
+
+	it("should handle clamp function", () => {
+		const result = genDeclaration("font-size", "clamp(1rem, 2vw, 3rem)");
+		expect(result).toBe("font-size: clamp(1rem, 2vw, 3rem);");
+	});
+
+	it("should handle max function", () => {
+		const result = genDeclaration("width", "max(50%, 300px)");
+		expect(result).toBe("width: max(50%, 300px);");
+	});
+
+	it("should handle filter functions", () => {
+		const result = genDeclaration("filter", "blur(5px) brightness(1.5)");
+		expect(result).toBe("filter: blur(5px) brightness(1.5);");
+	});
+
+	it("should handle cubic-bezier timing function", () => {
+		const result = genDeclaration(
+			"transition-timing-function",
+			"cubic-bezier(0.4, 0, 0.2, 1)",
+		);
+		expect(result).toBe(
+			"transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);",
+		);
+	});
+
+	it("should handle steps timing function", () => {
+		const result = genDeclaration("animation-timing-function", "steps(4, end)");
+		expect(result).toBe("animation-timing-function: steps(4, end);");
+	});
+
+	it("should handle negative values", () => {
+		const result = genDeclaration("margin-top", "-10px");
+		expect(result).toBe("margin-top: -10px;");
+	});
+
+	it("should handle decimal values", () => {
+		const result = genDeclaration("opacity", "0.75");
+		expect(result).toBe("opacity: 0.75;");
+	});
+
+	it("should handle zero without unit", () => {
+		const result = genDeclaration("margin", "0");
+		expect(result).toBe("margin: 0;");
+	});
+
+	it("should handle CSS Grid line names", () => {
+		const result = genDeclaration(
+			"grid-template-rows",
+			"[header-start] 100px [header-end content-start] 1fr [content-end]",
+		);
+		expect(result).toBe(
+			"grid-template-rows: [header-start] 100px [header-end content-start] 1fr [content-end];",
+		);
+	});
+
+	it("should handle attr() function", () => {
+		const result = genDeclaration("content", "attr(data-label)");
+		expect(result).toBe("content: attr(data-label);");
+	});
+
+	it("should handle counter() function", () => {
+		const result = genDeclaration("content", "counter(section)");
+		expect(result).toBe("content: counter(section);");
+	});
+
+	it("should handle env() function", () => {
+		const result = genDeclaration("padding-top", "env(safe-area-inset-top)");
+		expect(result).toBe("padding-top: env(safe-area-inset-top);");
+	});
+
+	it("should handle complex nested calc", () => {
+		const result = genDeclaration("width", "calc(100% - calc(20px + 2em))");
+		expect(result).toBe("width: calc(100% - calc(20px + 2em));");
+	});
+});

package/src/generator/genDeclaration.ts

@@ -0,0 +1,9 @@
+import { genSafePropertyName } from "./genSafePropertyName";
+
+export function genDeclaration(property: string, value: string): string {
+	const normalizedProperty = property.startsWith("--")
+		? property
+		: genSafePropertyName(property);
+
+	return `${normalizedProperty}: ${value};`;
+}