@styleframe/transpiler 1.0.0

package/src/generator/genSafePropertyName.test.ts

@@ -0,0 +1,489 @@
+import { describe, expect, it } from "vitest";
+import { genSafePropertyName } from "./genSafePropertyName";
+
+describe("genSafePropertyName", () => {
+	describe("camelCase to kebab-case conversion", () => {
+		it("should convert backgroundColor to background-color", () => {
+			const result = genSafePropertyName("backgroundColor");
+			expect(result).toBe("background-color");
+		});
+
+		it("should convert fontSize to font-size", () => {
+			const result = genSafePropertyName("fontSize");
+			expect(result).toBe("font-size");
+		});
+
+		it("should convert marginTop to margin-top", () => {
+			const result = genSafePropertyName("marginTop");
+			expect(result).toBe("margin-top");
+		});
+
+		it("should convert paddingLeft to padding-left", () => {
+			const result = genSafePropertyName("paddingLeft");
+			expect(result).toBe("padding-left");
+		});
+
+		it("should convert borderBottomWidth to border-bottom-width", () => {
+			const result = genSafePropertyName("borderBottomWidth");
+			expect(result).toBe("border-bottom-width");
+		});
+
+		it("should convert textDecorationLine to text-decoration-line", () => {
+			const result = genSafePropertyName("textDecorationLine");
+			expect(result).toBe("text-decoration-line");
+		});
+
+		it("should convert zIndex to z-index", () => {
+			const result = genSafePropertyName("zIndex");
+			expect(result).toBe("z-index");
+		});
+
+		it("should convert lineHeight to line-height", () => {
+			const result = genSafePropertyName("lineHeight");
+			expect(result).toBe("line-height");
+		});
+
+		it("should convert boxShadow to box-shadow", () => {
+			const result = genSafePropertyName("boxShadow");
+			expect(result).toBe("box-shadow");
+		});
+
+		it("should convert flexDirection to flex-direction", () => {
+			const result = genSafePropertyName("flexDirection");
+			expect(result).toBe("flex-direction");
+		});
+
+		it("should convert justifyContent to justify-content", () => {
+			const result = genSafePropertyName("justifyContent");
+			expect(result).toBe("justify-content");
+		});
+
+		it("should convert alignItems to align-items", () => {
+			const result = genSafePropertyName("alignItems");
+			expect(result).toBe("align-items");
+		});
+
+		it("should convert maxWidth to max-width", () => {
+			const result = genSafePropertyName("maxWidth");
+			expect(result).toBe("max-width");
+		});
+
+		it("should convert minHeight to min-height", () => {
+			const result = genSafePropertyName("minHeight");
+			expect(result).toBe("min-height");
+		});
+
+		it("should convert overflowX to overflow-x", () => {
+			const result = genSafePropertyName("overflowX");
+			expect(result).toBe("overflow-x");
+		});
+
+		it("should convert overflowY to overflow-y", () => {
+			const result = genSafePropertyName("overflowY");
+			expect(result).toBe("overflow-y");
+		});
+	});
+
+	describe("PascalCase to kebab-case conversion", () => {
+		it("should convert BackgroundColor to background-color", () => {
+			const result = genSafePropertyName("BackgroundColor");
+			expect(result).toBe("background-color");
+		});
+
+		it("should convert FontSize to font-size", () => {
+			const result = genSafePropertyName("FontSize");
+			expect(result).toBe("font-size");
+		});
+
+		it("should convert TextAlign to text-align", () => {
+			const result = genSafePropertyName("TextAlign");
+			expect(result).toBe("text-align");
+		});
+
+		it("should convert BorderRadius to border-radius", () => {
+			const result = genSafePropertyName("BorderRadius");
+			expect(result).toBe("border-radius");
+		});
+
+		it("should convert GridTemplateColumns to grid-template-columns", () => {
+			const result = genSafePropertyName("GridTemplateColumns");
+			expect(result).toBe("grid-template-columns");
+		});
+	});
+
+	describe("already kebab-case properties", () => {
+		it("should preserve background-color", () => {
+			const result = genSafePropertyName("background-color");
+			expect(result).toBe("background-color");
+		});
+
+		it("should preserve font-size", () => {
+			const result = genSafePropertyName("font-size");
+			expect(result).toBe("font-size");
+		});
+
+		it("should preserve margin-top", () => {
+			const result = genSafePropertyName("margin-top");
+			expect(result).toBe("margin-top");
+		});
+
+		it("should preserve border-bottom-width", () => {
+			const result = genSafePropertyName("border-bottom-width");
+			expect(result).toBe("border-bottom-width");
+		});
+
+		it("should preserve text-decoration-line", () => {
+			const result = genSafePropertyName("text-decoration-line");
+			expect(result).toBe("text-decoration-line");
+		});
+	});
+
+	describe("vendor prefixed properties", () => {
+		it("should handle WebkitTransform", () => {
+			const result = genSafePropertyName("WebkitTransform");
+			expect(result).toBe("webkit-transform");
+		});
+
+		it("should handle MozAppearance", () => {
+			const result = genSafePropertyName("MozAppearance");
+			expect(result).toBe("moz-appearance");
+		});
+
+		it("should handle msFlexAlign", () => {
+			const result = genSafePropertyName("msFlexAlign");
+			expect(result).toBe("ms-flex-align");
+		});
+
+		it("should handle OTransform", () => {
+			const result = genSafePropertyName("OTransform");
+			expect(result).toBe("o-transform");
+		});
+
+		it("should handle already prefixed -webkit-transform", () => {
+			const result = genSafePropertyName("-webkit-transform");
+			expect(result).toBe("-webkit-transform");
+		});
+
+		it("should handle already prefixed -moz-appearance", () => {
+			const result = genSafePropertyName("-moz-appearance");
+			expect(result).toBe("-moz-appearance");
+		});
+
+		it("should handle already prefixed -ms-flex", () => {
+			const result = genSafePropertyName("-ms-flex");
+			expect(result).toBe("-ms-flex");
+		});
+
+		it("should handle already prefixed -o-transform", () => {
+			const result = genSafePropertyName("-o-transform");
+			expect(result).toBe("-o-transform");
+		});
+
+		it("should handle webkitTransform (lowercase webkit)", () => {
+			const result = genSafePropertyName("webkitTransform");
+			expect(result).toBe("webkit-transform");
+		});
+
+		it("should handle mozBoxSizing", () => {
+			const result = genSafePropertyName("mozBoxSizing");
+			expect(result).toBe("moz-box-sizing");
+		});
+	});
+
+	describe("single word properties", () => {
+		it("should preserve color", () => {
+			const result = genSafePropertyName("color");
+			expect(result).toBe("color");
+		});
+
+		it("should preserve width", () => {
+			const result = genSafePropertyName("width");
+			expect(result).toBe("width");
+		});
+
+		it("should preserve height", () => {
+			const result = genSafePropertyName("height");
+			expect(result).toBe("height");
+		});
+
+		it("should preserve margin", () => {
+			const result = genSafePropertyName("margin");
+			expect(result).toBe("margin");
+		});
+
+		it("should preserve padding", () => {
+			const result = genSafePropertyName("padding");
+			expect(result).toBe("padding");
+		});
+
+		it("should preserve display", () => {
+			const result = genSafePropertyName("display");
+			expect(result).toBe("display");
+		});
+
+		it("should preserve position", () => {
+			const result = genSafePropertyName("position");
+			expect(result).toBe("position");
+		});
+
+		it("should preserve top", () => {
+			const result = genSafePropertyName("top");
+			expect(result).toBe("top");
+		});
+
+		it("should preserve left", () => {
+			const result = genSafePropertyName("left");
+			expect(result).toBe("left");
+		});
+
+		it("should preserve right", () => {
+			const result = genSafePropertyName("right");
+			expect(result).toBe("right");
+		});
+
+		it("should preserve bottom", () => {
+			const result = genSafePropertyName("bottom");
+			expect(result).toBe("bottom");
+		});
+
+		it("should preserve float", () => {
+			const result = genSafePropertyName("float");
+			expect(result).toBe("float");
+		});
+
+		it("should preserve clear", () => {
+			const result = genSafePropertyName("clear");
+			expect(result).toBe("clear");
+		});
+
+		it("should preserve content", () => {
+			const result = genSafePropertyName("content");
+			expect(result).toBe("content");
+		});
+
+		it("should preserve cursor", () => {
+			const result = genSafePropertyName("cursor");
+			expect(result).toBe("cursor");
+		});
+
+		it("should preserve opacity", () => {
+			const result = genSafePropertyName("opacity");
+			expect(result).toBe("opacity");
+		});
+
+		it("should preserve filter", () => {
+			const result = genSafePropertyName("filter");
+			expect(result).toBe("filter");
+		});
+
+		it("should preserve transform", () => {
+			const result = genSafePropertyName("transform");
+			expect(result).toBe("transform");
+		});
+
+		it("should preserve transition", () => {
+			const result = genSafePropertyName("transition");
+			expect(result).toBe("transition");
+		});
+
+		it("should preserve animation", () => {
+			const result = genSafePropertyName("animation");
+			expect(result).toBe("animation");
+		});
+	});
+
+	describe("snake_case to kebab-case conversion", () => {
+		it("should convert background_color to background-color", () => {
+			const result = genSafePropertyName("background_color");
+			expect(result).toBe("background-color");
+		});
+
+		it("should convert font_size to font-size", () => {
+			const result = genSafePropertyName("font_size");
+			expect(result).toBe("font-size");
+		});
+
+		it("should convert text_align to text-align", () => {
+			const result = genSafePropertyName("text_align");
+			expect(result).toBe("text-align");
+		});
+
+		it("should convert border_bottom_width to border-bottom-width", () => {
+			const result = genSafePropertyName("border_bottom_width");
+			expect(result).toBe("border-bottom-width");
+		});
+	});
+
+	describe("properties with spaces", () => {
+		it("should preserve spaces in 'background color'", () => {
+			const result = genSafePropertyName("background color");
+			expect(result).toBe("background color");
+		});
+
+		it("should preserve spaces in 'font size'", () => {
+			const result = genSafePropertyName("font size");
+			expect(result).toBe("font size");
+		});
+
+		it("should handle 'Border Bottom Width' with mixed case and spaces", () => {
+			const result = genSafePropertyName("Border Bottom Width");
+			expect(result).toBe("border -bottom -width");
+		});
+
+		it("should preserve multiple spaces", () => {
+			const result = genSafePropertyName("background   color");
+			expect(result).toBe("background   color");
+		});
+
+		it("should preserve leading spaces with camelCase", () => {
+			const result = genSafePropertyName("  backgroundColor");
+			expect(result).toBe("  background-color");
+		});
+
+		it("should preserve trailing spaces with camelCase", () => {
+			const result = genSafePropertyName("backgroundColor  ");
+			expect(result).toBe("background-color  ");
+		});
+	});
+
+	describe("custom properties (CSS variables)", () => {
+		it("should handle --custom-property", () => {
+			const result = genSafePropertyName("--custom-property");
+			expect(result).toBe("--custom-property");
+		});
+
+		it("should handle --theme-color-primary", () => {
+			const result = genSafePropertyName("--theme-color-primary");
+			expect(result).toBe("--theme-color-primary");
+		});
+
+		it("should handle --spacing-large", () => {
+			const result = genSafePropertyName("--spacing-large");
+			expect(result).toBe("--spacing-large");
+		});
+
+		it("should convert camelCase custom property", () => {
+			const result = genSafePropertyName("--primaryColor");
+			expect(result).toBe("--primary-color");
+		});
+
+		it("should convert PascalCase custom property", () => {
+			const result = genSafePropertyName("--PrimaryColor");
+			expect(result).toBe("--primary-color");
+		});
+	});
+
+	describe("edge cases", () => {
+		it("should handle empty string", () => {
+			const result = genSafePropertyName("");
+			expect(result).toBe("");
+		});
+
+		it("should handle property with numbers", () => {
+			const result = genSafePropertyName("grid2Columns");
+			expect(result).toBe("grid2-columns");
+		});
+
+		it("should handle property starting with number", () => {
+			const result = genSafePropertyName("2Columns");
+			expect(result).toBe("2-columns");
+		});
+
+		it("should handle all caps", () => {
+			const result = genSafePropertyName("BACKGROUNDCOLOR");
+			expect(result).toBe("backgroundcolor");
+		});
+
+		it("should handle mixed caps", () => {
+			const result = genSafePropertyName("BACKGROUNDColor");
+			expect(result).toBe("background-color");
+		});
+
+		it("should handle consecutive capitals", () => {
+			const result = genSafePropertyName("XMLHttpRequest");
+			expect(result).toBe("xml-http-request");
+		});
+
+		it("should handle acronyms in property names", () => {
+			const result = genSafePropertyName("htmlFontSize");
+			expect(result).toBe("html-font-size");
+		});
+
+		it("should handle property with dots", () => {
+			const result = genSafePropertyName("background.color");
+			expect(result).toBe("background-color");
+		});
+
+		it("should handle property with forward slash", () => {
+			const result = genSafePropertyName("background/color");
+			expect(result).toBe("background-color");
+		});
+
+		it("should preserve colon in property name", () => {
+			const result = genSafePropertyName("background:color");
+			expect(result).toBe("background:color");
+		});
+
+		it("should handle single letter", () => {
+			const result = genSafePropertyName("x");
+			expect(result).toBe("x");
+		});
+
+		it("should handle two letter camelCase", () => {
+			const result = genSafePropertyName("xY");
+			expect(result).toBe("x-y");
+		});
+	});
+
+	describe("special CSS property patterns", () => {
+		it("should handle gridTemplateAreas", () => {
+			const result = genSafePropertyName("gridTemplateAreas");
+			expect(result).toBe("grid-template-areas");
+		});
+
+		it("should handle willChange", () => {
+			const result = genSafePropertyName("willChange");
+			expect(result).toBe("will-change");
+		});
+
+		it("should handle counterReset", () => {
+			const result = genSafePropertyName("counterReset");
+			expect(result).toBe("counter-reset");
+		});
+
+		it("should handle listStyleType", () => {
+			const result = genSafePropertyName("listStyleType");
+			expect(result).toBe("list-style-type");
+		});
+
+		it("should handle borderTopLeftRadius", () => {
+			const result = genSafePropertyName("borderTopLeftRadius");
+			expect(result).toBe("border-top-left-radius");
+		});
+
+		it("should handle scrollBehavior", () => {
+			const result = genSafePropertyName("scrollBehavior");
+			expect(result).toBe("scroll-behavior");
+		});
+
+		it("should handle backdropFilter", () => {
+			const result = genSafePropertyName("backdropFilter");
+			expect(result).toBe("backdrop-filter");
+		});
+
+		it("should handle clipPath", () => {
+			const result = genSafePropertyName("clipPath");
+			expect(result).toBe("clip-path");
+		});
+
+		it("should handle objectFit", () => {
+			const result = genSafePropertyName("objectFit");
+			expect(result).toBe("object-fit");
+		});
+
+		it("should handle userSelect", () => {
+			const result = genSafePropertyName("userSelect");
+			expect(result).toBe("user-select");
+		});
+	});
+});

package/src/generator/genSafePropertyName.ts

@@ -0,0 +1,5 @@
+import { toKebabCase } from "../utils";
+
+export function genSafePropertyName(name: string): string {
+	return toKebabCase(name);
+}