@styleframe/transpiler 1.0.0

package/src/generator/genDeclarationsBlock.test.ts

@@ -0,0 +1,278 @@
+import { describe, expect, it } from "vitest";
+import { genDeclarationsBlock } from "./genDeclarationsBlock";
+
+describe("genDeclarationsBlock", () => {
+	it("should generate an empty block for empty declarations array", () => {
+		const result = genDeclarationsBlock([]);
+		expect(result).toBe("{}");
+	});
+
+	it("should generate a block with a single declaration", () => {
+		const result = genDeclarationsBlock(["color: red;"]);
+		expect(result).toBe("{\n\tcolor: red;\n}");
+	});
+
+	it("should generate a block with multiple declarations", () => {
+		const result = genDeclarationsBlock([
+			"color: red;",
+			"background: blue;",
+			"margin: 10px;",
+		]);
+		expect(result).toBe(
+			"{\n\tcolor: red;\n\tbackground: blue;\n\tmargin: 10px;\n}",
+		);
+	});
+
+	it("should handle declarations with complex values", () => {
+		const result = genDeclarationsBlock([
+			"background: linear-gradient(to right, red, blue);",
+			"box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);",
+		]);
+		expect(result).toBe(
+			"{\n\tbackground: linear-gradient(to right, red, blue);\n\tbox-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}",
+		);
+	});
+
+	it("should handle CSS custom properties", () => {
+		const result = genDeclarationsBlock([
+			"--primary-color: #007bff;",
+			"--spacing: 1rem;",
+			"color: var(--primary-color);",
+		]);
+		expect(result).toBe(
+			"{\n\t--primary-color: #007bff;\n\t--spacing: 1rem;\n\tcolor: var(--primary-color);\n}",
+		);
+	});
+
+	it("should handle declarations with !important", () => {
+		const result = genDeclarationsBlock([
+			"color: red !important;",
+			"display: none !important;",
+		]);
+		expect(result).toBe(
+			"{\n\tcolor: red !important;\n\tdisplay: none !important;\n}",
+		);
+	});
+
+	it("should handle vendor-prefixed properties", () => {
+		const result = genDeclarationsBlock([
+			"-webkit-transform: rotate(45deg);",
+			"-moz-transform: rotate(45deg);",
+			"transform: rotate(45deg);",
+		]);
+		expect(result).toBe(
+			"{\n\t-webkit-transform: rotate(45deg);\n\t-moz-transform: rotate(45deg);\n\ttransform: rotate(45deg);\n}",
+		);
+	});
+
+	it("should handle declarations with calc() values", () => {
+		const result = genDeclarationsBlock([
+			"width: calc(100% - 20px);",
+			"height: calc(100vh - 80px);",
+		]);
+		expect(result).toBe(
+			"{\n\twidth: calc(100% - 20px);\n\theight: calc(100vh - 80px);\n}",
+		);
+	});
+
+	it("should handle declarations with url() values", () => {
+		const result = genDeclarationsBlock([
+			"background-image: url('image.jpg');",
+			"cursor: url('cursor.png'), auto;",
+		]);
+		expect(result).toBe(
+			"{\n\tbackground-image: url('image.jpg');\n\tcursor: url('cursor.png'), auto;\n}",
+		);
+	});
+
+	it("should handle grid and flexbox properties", () => {
+		const result = genDeclarationsBlock([
+			"display: grid;",
+			"grid-template-columns: repeat(3, 1fr);",
+			"gap: 20px;",
+			"align-items: center;",
+		]);
+		expect(result).toBe(
+			"{\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: 20px;\n\talign-items: center;\n}",
+		);
+	});
+
+	it("should handle animation and transition properties", () => {
+		const result = genDeclarationsBlock([
+			"animation: slide 2s ease-in-out infinite;",
+			"transition: all 0.3s ease;",
+		]);
+		expect(result).toBe(
+			"{\n\tanimation: slide 2s ease-in-out infinite;\n\ttransition: all 0.3s ease;\n}",
+		);
+	});
+
+	it("should handle shorthand properties", () => {
+		const result = genDeclarationsBlock([
+			"margin: 10px 20px 30px 40px;",
+			"padding: 10px;",
+			"border: 1px solid #ccc;",
+		]);
+		expect(result).toBe(
+			"{\n\tmargin: 10px 20px 30px 40px;\n\tpadding: 10px;\n\tborder: 1px solid #ccc;\n}",
+		);
+	});
+
+	it("should handle font properties", () => {
+		const result = genDeclarationsBlock([
+			"font-family: 'Helvetica Neue', Arial, sans-serif;",
+			"font-size: 16px;",
+			"font-weight: bold;",
+			"line-height: 1.5;",
+		]);
+		expect(result).toBe(
+			"{\n\tfont-family: 'Helvetica Neue', Arial, sans-serif;\n\tfont-size: 16px;\n\tfont-weight: bold;\n\tline-height: 1.5;\n}",
+		);
+	});
+
+	it("should handle transform functions", () => {
+		const result = genDeclarationsBlock([
+			"transform: translateX(50%) rotate(45deg) scale(1.5);",
+		]);
+		expect(result).toBe(
+			"{\n\ttransform: translateX(50%) rotate(45deg) scale(1.5);\n}",
+		);
+	});
+
+	it("should handle filter functions", () => {
+		const result = genDeclarationsBlock([
+			"filter: blur(5px) brightness(1.5) contrast(2);",
+		]);
+		expect(result).toBe(
+			"{\n\tfilter: blur(5px) brightness(1.5) contrast(2);\n}",
+		);
+	});
+
+	it("should handle declarations with empty values", () => {
+		const result = genDeclarationsBlock(["content: '';", 'content: "";']);
+		expect(result).toBe("{\n\tcontent: '';\n\tcontent: \"\";\n}");
+	});
+
+	it("should handle declarations with special characters", () => {
+		const result = genDeclarationsBlock([
+			"content: '\\2022';",
+			"content: '\\00a0';",
+		]);
+		expect(result).toBe("{\n\tcontent: '\\2022';\n\tcontent: '\\00a0';\n}");
+	});
+
+	it("should handle declarations with data URIs", () => {
+		const result = genDeclarationsBlock([
+			"background-image: url('data:image/png;base64,iVBORw0KGgo...');",
+		]);
+		expect(result).toBe(
+			"{\n\tbackground-image: url('data:image/png;base64,iVBORw0KGgo...');\n}",
+		);
+	});
+
+	it("should handle CSS math functions", () => {
+		const result = genDeclarationsBlock([
+			"width: min(100%, 500px);",
+			"height: max(50vh, 300px);",
+			"font-size: clamp(1rem, 2vw, 3rem);",
+		]);
+		expect(result).toBe(
+			"{\n\twidth: min(100%, 500px);\n\theight: max(50vh, 300px);\n\tfont-size: clamp(1rem, 2vw, 3rem);\n}",
+		);
+	});
+
+	it("should handle CSS logical properties", () => {
+		const result = genDeclarationsBlock([
+			"margin-block-start: 1rem;",
+			"padding-inline-end: 2rem;",
+			"border-block-end: 1px solid black;",
+		]);
+		expect(result).toBe(
+			"{\n\tmargin-block-start: 1rem;\n\tpadding-inline-end: 2rem;\n\tborder-block-end: 1px solid black;\n}",
+		);
+	});
+
+	it("should handle CSS environment variables", () => {
+		const result = genDeclarationsBlock([
+			"padding-top: env(safe-area-inset-top);",
+			"padding-bottom: env(safe-area-inset-bottom);",
+		]);
+		expect(result).toBe(
+			"{\n\tpadding-top: env(safe-area-inset-top);\n\tpadding-bottom: env(safe-area-inset-bottom);\n}",
+		);
+	});
+
+	it("should handle CSS counters", () => {
+		const result = genDeclarationsBlock([
+			"counter-reset: section;",
+			"counter-increment: section;",
+			"content: counter(section);",
+		]);
+		expect(result).toBe(
+			"{\n\tcounter-reset: section;\n\tcounter-increment: section;\n\tcontent: counter(section);\n}",
+		);
+	});
+
+	it("should handle CSS attr() function", () => {
+		const result = genDeclarationsBlock([
+			"content: attr(data-label);",
+			"content: attr(href);",
+		]);
+		expect(result).toBe(
+			"{\n\tcontent: attr(data-label);\n\tcontent: attr(href);\n}",
+		);
+	});
+
+	it("should handle single declaration without array wrapper", () => {
+		const result = genDeclarationsBlock(["display: block;"]);
+		expect(result).toBe("{\n\tdisplay: block;\n}");
+	});
+
+	it("should preserve exact declaration strings", () => {
+		const result = genDeclarationsBlock([
+			"color:red;",
+			"background:    blue    ;",
+			"margin:10px 20px;",
+		]);
+		expect(result).toBe(
+			"{\n\tcolor:red;\n\tbackground:    blue    ;\n\tmargin:10px 20px;\n}",
+		);
+	});
+
+	it("should handle declarations with newlines in values", () => {
+		const result = genDeclarationsBlock([
+			"white-space: pre-wrap;",
+			"content: 'Line 1\\A Line 2';",
+		]);
+		expect(result).toBe(
+			"{\n\twhite-space: pre-wrap;\n\tcontent: 'Line 1\\A Line 2';\n}",
+		);
+	});
+
+	it("should handle very long declaration values", () => {
+		const longGradient =
+			"linear-gradient(to right, red 0%, orange 10%, yellow 20%, green 30%, blue 40%, indigo 50%, violet 60%, red 70%, orange 80%, yellow 90%, green 100%)";
+		const result = genDeclarationsBlock([`background: ${longGradient};`]);
+		expect(result).toBe(`{\n\tbackground: ${longGradient};\n}`);
+	});
+
+	it("should handle declarations with multiple semicolons", () => {
+		const result = genDeclarationsBlock(["content: ';';", "content: ';;';"]);
+		expect(result).toBe("{\n\tcontent: ';';\n\tcontent: ';;';\n}");
+	});
+
+	it("should handle CSS container queries", () => {
+		const result = genDeclarationsBlock([
+			"container-type: inline-size;",
+			"container-name: sidebar;",
+		]);
+		expect(result).toBe(
+			"{\n\tcontainer-type: inline-size;\n\tcontainer-name: sidebar;\n}",
+		);
+	});
+
+	it("should handle CSS cascade layers", () => {
+		const result = genDeclarationsBlock(["layer: utilities;", "layer: base;"]);
+		expect(result).toBe("{\n\tlayer: utilities;\n\tlayer: base;\n}");
+	});
+});

package/src/generator/genDeclarationsBlock.ts

@@ -0,0 +1,7 @@
+import { indentLines } from "../utils";
+
+export function genDeclarationsBlock(declarations: string[]) {
+	return `{${declarations.length > 0 ? "\n" : ""}${declarations
+		.map((declaration) => `${indentLines(`${declaration}`)}\n`)
+		.join("")}}`;
+}

package/src/generator/genDeclareVariable.test.ts

@@ -0,0 +1,323 @@
+import { describe, expect, it } from "vitest";
+import { genDeclareVariable } from "./genDeclareVariable";
+
+describe("genDeclareVariable", () => {
+	it("should generate a CSS variable declaration with -- prefix", () => {
+		const result = genDeclareVariable("primary-color", "#007bff");
+		expect(result).toBe("--primary-color: #007bff;");
+	});
+
+	it("should preserve existing -- prefix", () => {
+		const result = genDeclareVariable("--secondary-color", "#6c757d");
+		expect(result).toBe("--secondary-color: #6c757d;");
+	});
+
+	it("should handle simple color values", () => {
+		const result = genDeclareVariable("text-color", "black");
+		expect(result).toBe("--text-color: black;");
+	});
+
+	it("should handle hex color values", () => {
+		const result = genDeclareVariable("background", "#ffffff");
+		expect(result).toBe("--background: #ffffff;");
+	});
+
+	it("should handle rgb values", () => {
+		const result = genDeclareVariable("accent", "rgb(255, 0, 0)");
+		expect(result).toBe("--accent: rgb(255, 0, 0);");
+	});
+
+	it("should handle rgba values", () => {
+		const result = genDeclareVariable("overlay", "rgba(0, 0, 0, 0.5)");
+		expect(result).toBe("--overlay: rgba(0, 0, 0, 0.5);");
+	});
+
+	it("should handle hsl values", () => {
+		const result = genDeclareVariable("theme-color", "hsl(210, 100%, 50%)");
+		expect(result).toBe("--theme-color: hsl(210, 100%, 50%);");
+	});
+
+	it("should handle numeric values", () => {
+		const result = genDeclareVariable("spacing", "16px");
+		expect(result).toBe("--spacing: 16px;");
+	});
+
+	it("should handle percentage values", () => {
+		const result = genDeclareVariable("width", "100%");
+		expect(result).toBe("--width: 100%;");
+	});
+
+	it("should handle em values", () => {
+		const result = genDeclareVariable("font-size", "1.5em");
+		expect(result).toBe("--font-size: 1.5em;");
+	});
+
+	it("should handle rem values", () => {
+		const result = genDeclareVariable("margin", "2rem");
+		expect(result).toBe("--margin: 2rem;");
+	});
+
+	it("should handle viewport units", () => {
+		const result = genDeclareVariable("height", "100vh");
+		expect(result).toBe("--height: 100vh;");
+	});
+
+	it("should handle calc() expressions", () => {
+		const result = genDeclareVariable("computed-width", "calc(100% - 20px)");
+		expect(result).toBe("--computed-width: calc(100% - 20px);");
+	});
+
+	it("should handle var() references", () => {
+		const result = genDeclareVariable("derived-color", "var(--primary-color)");
+		expect(result).toBe("--derived-color: var(--primary-color);");
+	});
+
+	it("should handle var() with fallback", () => {
+		const result = genDeclareVariable(
+			"safe-color",
+			"var(--custom-color, #000000)",
+		);
+		expect(result).toBe("--safe-color: var(--custom-color, #000000);");
+	});
+
+	it("should handle gradient values", () => {
+		const result = genDeclareVariable(
+			"gradient",
+			"linear-gradient(to right, red, blue)",
+		);
+		expect(result).toBe("--gradient: linear-gradient(to right, red, blue);");
+	});
+
+	it("should handle shadow values", () => {
+		const result = genDeclareVariable("shadow", "0 4px 6px rgba(0, 0, 0, 0.1)");
+		expect(result).toBe("--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);");
+	});
+
+	it("should handle font-family values", () => {
+		const result = genDeclareVariable(
+			"font-stack",
+			"'Helvetica Neue', Arial, sans-serif",
+		);
+		expect(result).toBe("--font-stack: 'Helvetica Neue', Arial, sans-serif;");
+	});
+
+	it("should handle transition timing", () => {
+		const result = genDeclareVariable("transition", "all 0.3s ease-in-out");
+		expect(result).toBe("--transition: all 0.3s ease-in-out;");
+	});
+
+	it("should handle transform functions", () => {
+		const result = genDeclareVariable("transform", "rotate(45deg) scale(1.5)");
+		expect(result).toBe("--transform: rotate(45deg) scale(1.5);");
+	});
+
+	it("should handle url() values", () => {
+		const result = genDeclareVariable("background-image", "url('image.jpg')");
+		expect(result).toBe("--background-image: url('image.jpg');");
+	});
+
+	it("should handle multiple values", () => {
+		const result = genDeclareVariable("margin-values", "10px 20px 30px 40px");
+		expect(result).toBe("--margin-values: 10px 20px 30px 40px;");
+	});
+
+	it("should handle empty string value", () => {
+		const result = genDeclareVariable("empty", "");
+		expect(result).toBe("--empty: ;");
+	});
+
+	it("should handle quoted string values", () => {
+		const result = genDeclareVariable("content", '"Hello World"');
+		expect(result).toBe('--content: "Hello World";');
+	});
+
+	it("should handle single quoted string values", () => {
+		const result = genDeclareVariable("label", "'Click here'");
+		expect(result).toBe("--label: 'Click here';");
+	});
+
+	it("should handle numeric values without units", () => {
+		const result = genDeclareVariable("line-height", "1.5");
+		expect(result).toBe("--line-height: 1.5;");
+	});
+
+	it("should handle zero value", () => {
+		const result = genDeclareVariable("reset", "0");
+		expect(result).toBe("--reset: 0;");
+	});
+
+	it("should handle negative values", () => {
+		const result = genDeclareVariable("offset", "-10px");
+		expect(result).toBe("--offset: -10px;");
+	});
+
+	it("should handle decimal values", () => {
+		const result = genDeclareVariable("opacity", "0.75");
+		expect(result).toBe("--opacity: 0.75;");
+	});
+
+	it("should handle CSS keywords", () => {
+		const result = genDeclareVariable("display", "none");
+		expect(result).toBe("--display: none;");
+	});
+
+	it("should handle inherit keyword", () => {
+		const result = genDeclareVariable("color", "inherit");
+		expect(result).toBe("--color: inherit;");
+	});
+
+	it("should handle initial keyword", () => {
+		const result = genDeclareVariable("value", "initial");
+		expect(result).toBe("--value: initial;");
+	});
+
+	it("should handle unset keyword", () => {
+		const result = genDeclareVariable("property", "unset");
+		expect(result).toBe("--property: unset;");
+	});
+
+	it("should handle currentColor keyword", () => {
+		const result = genDeclareVariable("border-color", "currentColor");
+		expect(result).toBe("--border-color: currentColor;");
+	});
+
+	it("should handle transparent keyword", () => {
+		const result = genDeclareVariable("bg", "transparent");
+		expect(result).toBe("--bg: transparent;");
+	});
+
+	it("should handle variable names with numbers", () => {
+		const result = genDeclareVariable("spacing-2", "8px");
+		expect(result).toBe("--spacing-2: 8px;");
+	});
+
+	it("should handle variable names with underscores", () => {
+		const result = genDeclareVariable("primary_color", "#007bff");
+		expect(result).toBe("--primary_color: #007bff;");
+	});
+
+	it("should handle camelCase variable names", () => {
+		const result = genDeclareVariable("primaryColor", "#007bff");
+		expect(result).toBe("--primaryColor: #007bff;");
+	});
+
+	it("should handle variable names starting with numbers (CSS allows this with --)", () => {
+		const result = genDeclareVariable("1-column", "100px");
+		expect(result).toBe("--1-column: 100px;");
+	});
+
+	it("should handle complex calc with nested operations", () => {
+		const result = genDeclareVariable("complex", "calc((100% - 20px) / 2)");
+		expect(result).toBe("--complex: calc((100% - 20px) / 2);");
+	});
+
+	it("should handle min() function", () => {
+		const result = genDeclareVariable("width", "min(100%, 500px)");
+		expect(result).toBe("--width: min(100%, 500px);");
+	});
+
+	it("should handle max() function", () => {
+		const result = genDeclareVariable("height", "max(50vh, 300px)");
+		expect(result).toBe("--height: max(50vh, 300px);");
+	});
+
+	it("should handle clamp() function", () => {
+		const result = genDeclareVariable("font-size", "clamp(1rem, 2vw, 3rem)");
+		expect(result).toBe("--font-size: clamp(1rem, 2vw, 3rem);");
+	});
+
+	it("should handle cubic-bezier timing function", () => {
+		const result = genDeclareVariable("easing", "cubic-bezier(0.4, 0, 0.2, 1)");
+		expect(result).toBe("--easing: cubic-bezier(0.4, 0, 0.2, 1);");
+	});
+
+	it("should handle filter functions", () => {
+		const result = genDeclareVariable("blur", "blur(5px)");
+		expect(result).toBe("--blur: blur(5px);");
+	});
+
+	it("should handle multiple box-shadow values", () => {
+		const result = genDeclareVariable(
+			"shadows",
+			"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
+		);
+		expect(result).toBe(
+			"--shadows: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);",
+		);
+	});
+
+	it("should handle grid template values", () => {
+		const result = genDeclareVariable("grid-columns", "repeat(3, 1fr)");
+		expect(result).toBe("--grid-columns: repeat(3, 1fr);");
+	});
+
+	it("should handle CSS Grid line names", () => {
+		const result = genDeclareVariable(
+			"grid-rows",
+			"[header-start] 100px [header-end content-start] 1fr [content-end]",
+		);
+		expect(result).toBe(
+			"--grid-rows: [header-start] 100px [header-end content-start] 1fr [content-end];",
+		);
+	});
+
+	it("should handle env() function", () => {
+		const result = genDeclareVariable("safe-top", "env(safe-area-inset-top)");
+		expect(result).toBe("--safe-top: env(safe-area-inset-top);");
+	});
+
+	it("should handle attr() function", () => {
+		const result = genDeclareVariable("content", "attr(data-label)");
+		expect(result).toBe("--content: attr(data-label);");
+	});
+
+	it("should handle counter() function", () => {
+		const result = genDeclareVariable("counter", "counter(section)");
+		expect(result).toBe("--counter: counter(section);");
+	});
+
+	it("should handle whitespace in values", () => {
+		const result = genDeclareVariable("padding", "  10px   20px  ");
+		expect(result).toBe("--padding:   10px   20px  ;");
+	});
+
+	it("should handle special CSS color names", () => {
+		const result = genDeclareVariable("color", "rebeccapurple");
+		expect(result).toBe("--color: rebeccapurple;");
+	});
+
+	it("should handle system colors", () => {
+		const result = genDeclareVariable("color", "ButtonText");
+		expect(result).toBe("--color: ButtonText;");
+	});
+
+	it("should handle variable name with single dash", () => {
+		const result = genDeclareVariable("-custom", "value");
+		expect(result).toBe("---custom: value;");
+	});
+
+	it("should handle variable name with triple dash", () => {
+		const result = genDeclareVariable("---extra", "value");
+		expect(result).toBe("---extra: value;");
+	});
+
+	it("should handle emoji in values", () => {
+		const result = genDeclareVariable("emoji", "'🎉'");
+		expect(result).toBe("--emoji: '🎉';");
+	});
+
+	it("should handle unicode escape sequences", () => {
+		const result = genDeclareVariable("unicode", "'\\2022'");
+		expect(result).toBe("--unicode: '\\2022';");
+	});
+
+	it("should handle data URI values", () => {
+		const result = genDeclareVariable(
+			"icon",
+			"url('data:image/svg+xml;base64,PHN2ZyB4...')",
+		);
+		expect(result).toBe(
+			"--icon: url('data:image/svg+xml;base64,PHN2ZyB4...');",
+		);
+	});
+});

package/src/generator/genDeclareVariable.ts

@@ -0,0 +1,6 @@
+import { genDeclaration } from "./genDeclaration";
+import { genSafeVariableName } from "./genSafeVariableName";
+
+export function genDeclareVariable(name: string, value: string) {
+	return genDeclaration(genSafeVariableName(name), value);
+}