zss-engine 0.2.36 → 0.2.37

package/dist/index.d.ts

@@ -0,0 +1,111 @@
+import { Properties, Property } from "csstype";
+
+//#region src/types/main/vars.d.ts
+type CSSVariableKey = `--${string}`;
+type CSSVariableValue = `var(${CSSVariableKey})`;
+type CSSVariableProperty = {
+  [key: CSSVariableKey]: string | number;
+};
+type CreateVars = Record<string, string | number>;
+type CreateTheme = Record<string, Record<string, string | number>>;
+
+//#endregion
+//#region src/types/common/css-properties.d.ts
+type ColorValue = Exclude<Property.Color, '-moz-initial'> | (string & {});
+type CSSColorProperty = Exclude<ColorValue, SystemColorKeyword>;
+type SystemColorKeyword = 'ActiveBorder' | 'ActiveCaption' | 'AppWorkspace' | 'Background' | 'ButtonFace' | 'ButtonHighlight' | 'ButtonShadow' | 'ButtonText' | 'CaptionText' | 'GrayText' | 'Highlight' | 'HighlightText' | 'InactiveBorder' | 'InactiveCaption' | 'InactiveCaptionText' | 'InfoBackground' | 'InfoText' | 'Menu' | 'MenuText' | 'Scrollbar' | 'ThreeDDarkShadow' | 'ThreeDFace' | 'ThreeDHighlight' | 'ThreeDLightShadow' | 'ThreeDShadow' | 'Window' | 'WindowFrame' | 'WindowText';
+type ExcludeMozInitial<T> = Exclude<T, '-moz-initial'>;
+type CSSTypeProperties = Properties<number | (string & {})>;
+type CustomProperties = { [K in keyof CSSTypeProperties]: ExcludeMozInitial<CSSTypeProperties[K]> };
+type BaseCSSProperties = { [K in keyof CustomProperties]: CustomProperties[K] | CSSVariableValue };
+interface CommonProperties extends BaseCSSProperties {
+  accentColor?: CSSColorProperty;
+  color?: CSSColorProperty;
+  borderLeftColor?: CSSColorProperty;
+  borderRightColor?: CSSColorProperty;
+  borderTopColor?: CSSColorProperty;
+  borderBottomColor?: CSSColorProperty;
+  borderBlockColor?: CSSColorProperty;
+  borderBlockStartColor?: CSSColorProperty;
+  borderBlockEndColor?: CSSColorProperty;
+  borderInlineColor?: CSSColorProperty;
+  borderInlineStartColor?: CSSColorProperty;
+  borderInlineEndColor?: CSSColorProperty;
+  backgroundColor?: CSSColorProperty;
+  outlineColor?: CSSColorProperty;
+  textDecorationColor?: CSSColorProperty;
+  caretColor?: CSSColorProperty;
+  columnRuleColor?: CSSColorProperty;
+}
+type AndString = `&${string}`;
+type AndStringType = { [key in AndString]: CommonProperties };
+type Colon = `:${string}`;
+type ColonType = { [key in Colon]: CommonProperties };
+type MediaQuery = `@media ${string}`;
+type MediaQueryType = { [K in MediaQuery]: CommonProperties | ColonType | AndStringType };
+type CSSProperties = CommonProperties | ColonType | CSSVariableProperty | AndStringType | MediaQueryType;
+
+//#endregion
+//#region src/types/main/create.d.ts
+type CreateStyleType<T> = { readonly [K in keyof T]: T[K] extends CSSProperties ? CSSProperties : T[K] };
+type CreateStyle = {
+  [key: string]: CSSProperties;
+};
+type ReturnType<T> = { [key in keyof T]: string };
+
+//#endregion
+//#region src/types/main/global.d.ts
+type JSXType = keyof HTMLElementTagNameMap | '*' | ':root';
+type HTMLType = { [K in JSXType]: CSSProperties };
+type ClassName = `.${string}`;
+type ClassNameType = { [K in ClassName]: CSSProperties };
+type Attribute = `${string}[${string}]${string}`;
+type AttributeType = { [K in Attribute]: CSSProperties };
+type Consecutive = `${JSXType} ${string}`;
+type ConsecutiveType = { [K in Consecutive]: CSSProperties };
+type PseudoClass = `${JSXType}:${string}`;
+type PseudoClassType = { [K in PseudoClass]: CSSProperties };
+type PseudoElement = `::${string}`;
+type PseudoElementType = { [K in PseudoElement]: CSSProperties };
+type KeyframeSelector = 'from' | 'to' | `${number}%`;
+type CreateKeyframes = { [K in KeyframeSelector]?: CSSProperties };
+type KeyframesType = { [K in `@keyframes ${string}`]: CreateKeyframes };
+type MediaQueryHTMLType = { [K in MediaQuery]: CSSHTML };
+type CSSHTML = HTMLType | ClassNameType | AttributeType | ConsecutiveType | PseudoClassType | PseudoElementType | KeyframesType | MediaQueryHTMLType;
+
+//#endregion
+//#region src/utils/helper.d.ts
+declare const isServer: boolean;
+declare const isDevelopment: boolean;
+declare const isDevAndTest: boolean;
+declare const camelToKebabCase: (property: string) => string;
+
+//#endregion
+//#region src/utils/hash.d.ts
+declare function genBase36Hash(object: CreateStyle | CreateKeyframes, n: number): string;
+
+//#endregion
+//#region src/utils/transpiler.d.ts
+declare function transpiler(object: CSSHTML, base36Hash?: string, core?: string): {
+  styleSheet: string;
+};
+
+//#endregion
+//#region src/utils/build.d.ts
+declare const build: (styleSheet: string, filePath: string, global?: string) => Promise<void>;
+
+//#endregion
+//#region src/utils/inject-client-css.d.ts
+declare function injectClientCSS(hash: string, sheet: string): void;
+
+//#endregion
+//#region src/utils/inject-client-global-css.d.ts
+declare function injectClientGlobalCSS(sheet: string): void;
+
+//#endregion
+//#region src/utils/inject-server-css.d.ts
+declare function injectServerCSS(hash: string, sheet: string): void;
+declare function getServerCSS(): string;
+
+//#endregion
+export { CSSHTML, CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateVars, ReturnType, build, camelToKebabCase, genBase36Hash, getServerCSS, injectClientCSS, injectClientGlobalCSS, injectServerCSS, isDevAndTest, isDevelopment, isServer, transpiler };

package/dist/index.js

@@ -0,0 +1,258 @@
+
+//#region src/utils/helper.ts
+const isWindowDefined = typeof window !== "undefined";
+const isDocumentDefined = typeof document !== "undefined";
+const isServer = !isWindowDefined || !isDocumentDefined;
+const isDevelopment = process.env.NODE_ENV === "development";
+const isDevAndTest = process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test";
+const exception = [
+	"line-height",
+	"font-weight",
+	"opacity",
+	"scale",
+	"z-index",
+	"column-count",
+	"order",
+	"orphans",
+	"widows"
+];
+const applyCssValue = (value, cssProp) => {
+	if (typeof value === "number") return exception.includes(cssProp) ? value.toString() : value + "px";
+	return value;
+};
+const camelToKebabCase = (property) => {
+	if (/^(ms|Moz|Webkit)/.test(property)) property = "-" + property;
+	return property.replace(/([A-Z]+)([0-9]+)/g, "$1$2").replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
+};
+
+//#endregion
+//#region src/utils/hash.ts
+const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+function simpleHash(str) {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		const char = str.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+	}
+	return Math.abs(hash);
+}
+function encodeBase36(num) {
+	let result = "";
+	do {
+		result = chars[num % 36] + result;
+		num = Math.floor(num / 36);
+	} while (num > 0);
+	return result;
+}
+function getStartingChar(hash) {
+	const chars$1 = "abcdefghijklmnopqrstuvwxyz";
+	return chars$1[hash % chars$1.length];
+}
+function genBase36Hash(object, n) {
+	const serialized = JSON.stringify(object);
+	const hash = simpleHash(serialized);
+	let base36Hash = encodeBase36(hash);
+	const startingChar = getStartingChar(hash);
+	while (base36Hash.length < n - 1) base36Hash = chars[hash % chars.length] + base36Hash;
+	return startingChar + base36Hash.slice(0, n - 1);
+}
+
+//#endregion
+//#region src/utils/transpiler.ts
+const createKeyframes = (property, content) => {
+	let keyframesRules = `${property} {\n`;
+	for (const key in content) if (Object.prototype.hasOwnProperty.call(content, key)) {
+		const keyframeValue = content[key];
+		keyframesRules += `  ${key} {\n`;
+		for (const prop in keyframeValue) if (Object.prototype.hasOwnProperty.call(keyframeValue, prop)) {
+			const CSSProp = camelToKebabCase(prop);
+			const value = keyframeValue[prop];
+			if (typeof value === "string" || typeof value === "number") {
+				const applyValue = applyCssValue(value, CSSProp);
+				keyframesRules += `    ${CSSProp}: ${applyValue};\n`;
+			}
+		}
+		keyframesRules += `  }\n`;
+	}
+	keyframesRules += `}\n`;
+	return keyframesRules;
+};
+function transpiler(object, base36Hash, core) {
+	let styleSheet = "";
+	const mediaQueries = [];
+	const classNameType = (property) => {
+		return core === "--global" ? property : `.${property}_${base36Hash}`;
+	};
+	const rules = (indent, rulesValue, property) => {
+		if (typeof property !== "string") return "";
+		const value = rulesValue[property];
+		const cssProp = camelToKebabCase(property);
+		return `${indent}${cssProp}: ${value};\n`;
+	};
+	const stringConverter = (className, properties, indentLevel = 0) => {
+		const classSelector = {};
+		const indent = "".repeat(indentLevel);
+		const innerIndent = " ".repeat(indentLevel + 1);
+		let cssRule = "";
+		for (const property in properties) if (Object.prototype.hasOwnProperty.call(properties, property)) {
+			const value = properties[property];
+			if (typeof value === "string" || typeof value === "number") {
+				let CSSProp = camelToKebabCase(property);
+				if (property.startsWith("ms")) CSSProp = `-${CSSProp}`;
+				const applyValue = applyCssValue(value, CSSProp);
+				cssRule += `  ${CSSProp}: ${applyValue};\n`;
+			} else if (!property.startsWith("@")) {
+				const kebabPseudoSelector = camelToKebabCase(property.replace("&", ""));
+				const styles = stringConverter(className + kebabPseudoSelector, value, indentLevel);
+				Object.assign(classSelector, styles);
+			} else if (property.startsWith("@media") || property.startsWith("@container")) {
+				const mediaRule = property;
+				let nestedRules = "";
+				let regularRules = "";
+				for (const mediaProp in value) if (Object.prototype.hasOwnProperty.call(value, mediaProp)) {
+					const mediaValue = value[mediaProp];
+					const isColon = mediaProp.startsWith(":");
+					const isAnd = mediaProp.startsWith("&");
+					if (isColon || isAnd) {
+						const kebabMediaProp = camelToKebabCase(mediaProp.replace("&", ""));
+						let pseudoClassRule = "";
+						if (typeof mediaValue === "object" && mediaValue !== null) {
+							for (const pseudoProp in mediaValue) if (Object.prototype.hasOwnProperty.call(mediaValue, pseudoProp)) {
+								const CSSProp = camelToKebabCase(pseudoProp);
+								const applyValue = applyCssValue(mediaValue[pseudoProp], CSSProp);
+								pseudoClassRule += rules(innerIndent + "  ", { [pseudoProp]: applyValue }, pseudoProp);
+							}
+						}
+						nestedRules += `${innerIndent}${className}${kebabMediaProp} {\n${pseudoClassRule}${innerIndent}}\n`;
+					} else {
+						const CSSProp = camelToKebabCase(mediaProp);
+						const applyValue = applyCssValue(mediaValue, CSSProp);
+						regularRules += rules(innerIndent + "  ", { [mediaProp]: applyValue }, mediaProp);
+					}
+				}
+				if (regularRules) mediaQueries.push({
+					media: mediaRule,
+					css: `${mediaRule} {\n${innerIndent}${className} {\n${regularRules}  }\n${nestedRules}${indent}}${indent}\n`
+				});
+				else mediaQueries.push({
+					media: mediaRule,
+					css: `${mediaRule} {\n${nestedRules}${indent}}\n`
+				});
+			}
+		}
+		classSelector[className] = cssRule;
+		return classSelector;
+	};
+	for (const property in object) {
+		if (property.startsWith("@keyframes")) {
+			const keyframesContent = object[property];
+			styleSheet += createKeyframes(property, keyframesContent);
+		}
+		const classSelectors = stringConverter(classNameType(property), object[property], 1);
+		for (const selector in classSelectors) if (!selector.startsWith("@keyframes") && classSelectors[selector]) styleSheet += selector + " {\n" + classSelectors[selector] + "}\n";
+	}
+	mediaQueries.forEach(({ css }) => {
+		styleSheet += css;
+	});
+	return { styleSheet };
+}
+
+//#endregion
+//#region src/utils/build.ts
+const build = async (styleSheet, filePath, global) => {
+	if (!isServer) return;
+	const fs = await import("fs");
+	const { styleText } = await import("util");
+	const message = global === "--global" ? styleText("underline", `✅Generated global CSS\n\n`) : styleText("underline", `✅Generated create CSS\n\n`);
+	try {
+		if (fs.existsSync(filePath)) {
+			const cssData = fs.readFileSync(filePath, "utf-8");
+			if (!cssData.includes(styleSheet)) {
+				fs.appendFileSync(filePath, styleSheet, "utf-8");
+				if (process.argv.includes("--view")) console.log(message + styleSheet);
+			}
+		}
+		return;
+	} catch (error) {
+		console.error("Error writing to file:", error);
+	}
+};
+
+//#endregion
+//#region src/utils/inject-client-css.ts
+const styleSheets$1 = {};
+const hashCache = {};
+function createStyleElement(hash) {
+	if (document.getElementById(hash)) return null;
+	const styleElement = document.createElement("style");
+	styleElement.setAttribute("id", hash);
+	styleElement.setAttribute("type", "text/css");
+	styleSheets$1[hash] = styleElement;
+	document.head.appendChild(styleElement);
+	return styleSheets$1[hash];
+}
+function injectClientCSS(hash, sheet) {
+	if (isServer) return;
+	requestAnimationFrame(() => {
+		styleCleanUp();
+	});
+	hashCache[hash] = hash;
+	const styleElement = createStyleElement(hash);
+	if (styleElement == null) return;
+	styleElement.textContent = sheet;
+}
+function styleCleanUp() {
+	requestAnimationFrame(() => {
+		for (const hash in hashCache) {
+			const classElements = document.querySelectorAll(`[class*="${hash}"]`);
+			if (classElements.length === 0) removeStyleElement(hashCache[hash]);
+		}
+	});
+}
+function removeStyleElement(hash) {
+	if (styleSheets$1[hash]) {
+		delete styleSheets$1[hash];
+		if (hashCache.hasOwnProperty.call(hashCache, hash)) delete hashCache[hash];
+		const styleElement = document.getElementById(hash);
+		if (styleElement) document.head.removeChild(styleElement);
+	}
+}
+
+//#endregion
+//#region src/utils/inject-client-global-css.ts
+function injectClientGlobalCSS(sheet) {
+	if (isServer) return;
+	const existingStyleElement = document.querySelector(`[data-scope="global"]`);
+	if (existingStyleElement instanceof HTMLStyleElement) {
+		existingStyleElement.textContent += sheet;
+		return;
+	}
+	const styleElement = document.createElement("style");
+	styleElement.setAttribute("data-scope", "global");
+	styleElement.setAttribute("type", "text/css");
+	styleElement.textContent = sheet;
+	document.head.appendChild(styleElement);
+}
+
+//#endregion
+//#region src/utils/inject-server-css.ts
+const styleSheets = {};
+function injectServerCSS(hash, sheet) {
+	styleSheets[hash] = sheet;
+}
+function getServerCSS() {
+	return Object.values(styleSheets).join("\n");
+}
+
+//#endregion
+exports.build = build;
+exports.camelToKebabCase = camelToKebabCase;
+exports.genBase36Hash = genBase36Hash;
+exports.getServerCSS = getServerCSS;
+exports.injectClientCSS = injectClientCSS;
+exports.injectClientGlobalCSS = injectClientGlobalCSS;
+exports.injectServerCSS = injectServerCSS;
+exports.isDevAndTest = isDevAndTest;
+exports.isDevelopment = isDevelopment;
+exports.isServer = isServer;
+exports.transpiler = transpiler;

package/dist/index.mjs

@@ -0,0 +1,247 @@
+//#region src/utils/helper.ts
+const isWindowDefined = typeof window !== "undefined";
+const isDocumentDefined = typeof document !== "undefined";
+const isServer = !isWindowDefined || !isDocumentDefined;
+const isDevelopment = process.env.NODE_ENV === "development";
+const isDevAndTest = process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test";
+const exception = [
+	"line-height",
+	"font-weight",
+	"opacity",
+	"scale",
+	"z-index",
+	"column-count",
+	"order",
+	"orphans",
+	"widows"
+];
+const applyCssValue = (value, cssProp) => {
+	if (typeof value === "number") return exception.includes(cssProp) ? value.toString() : value + "px";
+	return value;
+};
+const camelToKebabCase = (property) => {
+	if (/^(ms|Moz|Webkit)/.test(property)) property = "-" + property;
+	return property.replace(/([A-Z]+)([0-9]+)/g, "$1$2").replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
+};
+
+//#endregion
+//#region src/utils/hash.ts
+const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+function simpleHash(str) {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		const char = str.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+	}
+	return Math.abs(hash);
+}
+function encodeBase36(num) {
+	let result = "";
+	do {
+		result = chars[num % 36] + result;
+		num = Math.floor(num / 36);
+	} while (num > 0);
+	return result;
+}
+function getStartingChar(hash) {
+	const chars$1 = "abcdefghijklmnopqrstuvwxyz";
+	return chars$1[hash % chars$1.length];
+}
+function genBase36Hash(object, n) {
+	const serialized = JSON.stringify(object);
+	const hash = simpleHash(serialized);
+	let base36Hash = encodeBase36(hash);
+	const startingChar = getStartingChar(hash);
+	while (base36Hash.length < n - 1) base36Hash = chars[hash % chars.length] + base36Hash;
+	return startingChar + base36Hash.slice(0, n - 1);
+}
+
+//#endregion
+//#region src/utils/transpiler.ts
+const createKeyframes = (property, content) => {
+	let keyframesRules = `${property} {\n`;
+	for (const key in content) if (Object.prototype.hasOwnProperty.call(content, key)) {
+		const keyframeValue = content[key];
+		keyframesRules += `  ${key} {\n`;
+		for (const prop in keyframeValue) if (Object.prototype.hasOwnProperty.call(keyframeValue, prop)) {
+			const CSSProp = camelToKebabCase(prop);
+			const value = keyframeValue[prop];
+			if (typeof value === "string" || typeof value === "number") {
+				const applyValue = applyCssValue(value, CSSProp);
+				keyframesRules += `    ${CSSProp}: ${applyValue};\n`;
+			}
+		}
+		keyframesRules += `  }\n`;
+	}
+	keyframesRules += `}\n`;
+	return keyframesRules;
+};
+function transpiler(object, base36Hash, core) {
+	let styleSheet = "";
+	const mediaQueries = [];
+	const classNameType = (property) => {
+		return core === "--global" ? property : `.${property}_${base36Hash}`;
+	};
+	const rules = (indent, rulesValue, property) => {
+		if (typeof property !== "string") return "";
+		const value = rulesValue[property];
+		const cssProp = camelToKebabCase(property);
+		return `${indent}${cssProp}: ${value};\n`;
+	};
+	const stringConverter = (className, properties, indentLevel = 0) => {
+		const classSelector = {};
+		const indent = "".repeat(indentLevel);
+		const innerIndent = " ".repeat(indentLevel + 1);
+		let cssRule = "";
+		for (const property in properties) if (Object.prototype.hasOwnProperty.call(properties, property)) {
+			const value = properties[property];
+			if (typeof value === "string" || typeof value === "number") {
+				let CSSProp = camelToKebabCase(property);
+				if (property.startsWith("ms")) CSSProp = `-${CSSProp}`;
+				const applyValue = applyCssValue(value, CSSProp);
+				cssRule += `  ${CSSProp}: ${applyValue};\n`;
+			} else if (!property.startsWith("@")) {
+				const kebabPseudoSelector = camelToKebabCase(property.replace("&", ""));
+				const styles = stringConverter(className + kebabPseudoSelector, value, indentLevel);
+				Object.assign(classSelector, styles);
+			} else if (property.startsWith("@media") || property.startsWith("@container")) {
+				const mediaRule = property;
+				let nestedRules = "";
+				let regularRules = "";
+				for (const mediaProp in value) if (Object.prototype.hasOwnProperty.call(value, mediaProp)) {
+					const mediaValue = value[mediaProp];
+					const isColon = mediaProp.startsWith(":");
+					const isAnd = mediaProp.startsWith("&");
+					if (isColon || isAnd) {
+						const kebabMediaProp = camelToKebabCase(mediaProp.replace("&", ""));
+						let pseudoClassRule = "";
+						if (typeof mediaValue === "object" && mediaValue !== null) {
+							for (const pseudoProp in mediaValue) if (Object.prototype.hasOwnProperty.call(mediaValue, pseudoProp)) {
+								const CSSProp = camelToKebabCase(pseudoProp);
+								const applyValue = applyCssValue(mediaValue[pseudoProp], CSSProp);
+								pseudoClassRule += rules(innerIndent + "  ", { [pseudoProp]: applyValue }, pseudoProp);
+							}
+						}
+						nestedRules += `${innerIndent}${className}${kebabMediaProp} {\n${pseudoClassRule}${innerIndent}}\n`;
+					} else {
+						const CSSProp = camelToKebabCase(mediaProp);
+						const applyValue = applyCssValue(mediaValue, CSSProp);
+						regularRules += rules(innerIndent + "  ", { [mediaProp]: applyValue }, mediaProp);
+					}
+				}
+				if (regularRules) mediaQueries.push({
+					media: mediaRule,
+					css: `${mediaRule} {\n${innerIndent}${className} {\n${regularRules}  }\n${nestedRules}${indent}}${indent}\n`
+				});
+				else mediaQueries.push({
+					media: mediaRule,
+					css: `${mediaRule} {\n${nestedRules}${indent}}\n`
+				});
+			}
+		}
+		classSelector[className] = cssRule;
+		return classSelector;
+	};
+	for (const property in object) {
+		if (property.startsWith("@keyframes")) {
+			const keyframesContent = object[property];
+			styleSheet += createKeyframes(property, keyframesContent);
+		}
+		const classSelectors = stringConverter(classNameType(property), object[property], 1);
+		for (const selector in classSelectors) if (!selector.startsWith("@keyframes") && classSelectors[selector]) styleSheet += selector + " {\n" + classSelectors[selector] + "}\n";
+	}
+	mediaQueries.forEach(({ css }) => {
+		styleSheet += css;
+	});
+	return { styleSheet };
+}
+
+//#endregion
+//#region src/utils/build.ts
+const build = async (styleSheet, filePath, global) => {
+	if (!isServer) return;
+	const fs = await import("fs");
+	const { styleText } = await import("util");
+	const message = global === "--global" ? styleText("underline", `✅Generated global CSS\n\n`) : styleText("underline", `✅Generated create CSS\n\n`);
+	try {
+		if (fs.existsSync(filePath)) {
+			const cssData = fs.readFileSync(filePath, "utf-8");
+			if (!cssData.includes(styleSheet)) {
+				fs.appendFileSync(filePath, styleSheet, "utf-8");
+				if (process.argv.includes("--view")) console.log(message + styleSheet);
+			}
+		}
+		return;
+	} catch (error) {
+		console.error("Error writing to file:", error);
+	}
+};
+
+//#endregion
+//#region src/utils/inject-client-css.ts
+const styleSheets$1 = {};
+const hashCache = {};
+function createStyleElement(hash) {
+	if (document.getElementById(hash)) return null;
+	const styleElement = document.createElement("style");
+	styleElement.setAttribute("id", hash);
+	styleElement.setAttribute("type", "text/css");
+	styleSheets$1[hash] = styleElement;
+	document.head.appendChild(styleElement);
+	return styleSheets$1[hash];
+}
+function injectClientCSS(hash, sheet) {
+	if (isServer) return;
+	requestAnimationFrame(() => {
+		styleCleanUp();
+	});
+	hashCache[hash] = hash;
+	const styleElement = createStyleElement(hash);
+	if (styleElement == null) return;
+	styleElement.textContent = sheet;
+}
+function styleCleanUp() {
+	requestAnimationFrame(() => {
+		for (const hash in hashCache) {
+			const classElements = document.querySelectorAll(`[class*="${hash}"]`);
+			if (classElements.length === 0) removeStyleElement(hashCache[hash]);
+		}
+	});
+}
+function removeStyleElement(hash) {
+	if (styleSheets$1[hash]) {
+		delete styleSheets$1[hash];
+		if (hashCache.hasOwnProperty.call(hashCache, hash)) delete hashCache[hash];
+		const styleElement = document.getElementById(hash);
+		if (styleElement) document.head.removeChild(styleElement);
+	}
+}
+
+//#endregion
+//#region src/utils/inject-client-global-css.ts
+function injectClientGlobalCSS(sheet) {
+	if (isServer) return;
+	const existingStyleElement = document.querySelector(`[data-scope="global"]`);
+	if (existingStyleElement instanceof HTMLStyleElement) {
+		existingStyleElement.textContent += sheet;
+		return;
+	}
+	const styleElement = document.createElement("style");
+	styleElement.setAttribute("data-scope", "global");
+	styleElement.setAttribute("type", "text/css");
+	styleElement.textContent = sheet;
+	document.head.appendChild(styleElement);
+}
+
+//#endregion
+//#region src/utils/inject-server-css.ts
+const styleSheets = {};
+function injectServerCSS(hash, sheet) {
+	styleSheets[hash] = sheet;
+}
+function getServerCSS() {
+	return Object.values(styleSheets).join("\n");
+}
+
+//#endregion
+export { build, camelToKebabCase, genBase36Hash, getServerCSS, injectClientCSS, injectClientGlobalCSS, injectServerCSS, isDevAndTest, isDevelopment, isServer, transpiler };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zss-engine",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "description": "Zero-runtime StyleSheet Engine",
   "keywords": [
     "zero-runtime",
@@ -15,22 +15,19 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/cjs/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.js"
     }
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "types/index.d.ts",
   "files": [
-    "dist/",
-    "types/"
+    "dist/"
   ],
   "scripts": {
-    "build": "rimraf dist types && pnpm esm && pnpm cjs",
-    "cjs": "tsc --project tsconfig.cjs.json",
-    "esm": "tsc --project tsconfig.esm.json",
+    "build": "tsdown",
     "test": "jest"
   },
   "dependencies": {
@@ -41,8 +38,8 @@
     "@types/node": "^22.13.10",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rimraf": "^6.0.1",
     "ts-jest": "^29.2.6",
+    "tsdown": "^0.11.12",
     "typescript": "^5.8.2"
   }
 }

package/dist/cjs/index.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getServerCSS = exports.injectServerCSS = exports.injectClientGlobalCSS = exports.injectClientCSS = exports.camelToKebabCase = exports.build = exports.transpiler = exports.genBase36Hash = exports.isDevAndTest = exports.isDevelopment = exports.isServer = void 0;
-var helper_js_1 = require("./utils/helper.js");
-Object.defineProperty(exports, "isServer", { enumerable: true, get: function () { return helper_js_1.isServer; } });
-Object.defineProperty(exports, "isDevelopment", { enumerable: true, get: function () { return helper_js_1.isDevelopment; } });
-Object.defineProperty(exports, "isDevAndTest", { enumerable: true, get: function () { return helper_js_1.isDevAndTest; } });
-var hash_js_1 = require("./utils/hash.js");
-Object.defineProperty(exports, "genBase36Hash", { enumerable: true, get: function () { return hash_js_1.genBase36Hash; } });
-var transpiler_js_1 = require("./utils/transpiler.js");
-Object.defineProperty(exports, "transpiler", { enumerable: true, get: function () { return transpiler_js_1.transpiler; } });
-var build_js_1 = require("./utils/build.js");
-Object.defineProperty(exports, "build", { enumerable: true, get: function () { return build_js_1.build; } });
-var helper_js_2 = require("./utils/helper.js");
-Object.defineProperty(exports, "camelToKebabCase", { enumerable: true, get: function () { return helper_js_2.camelToKebabCase; } });
-var inject_client_css_js_1 = require("./utils/inject-client-css.js");
-Object.defineProperty(exports, "injectClientCSS", { enumerable: true, get: function () { return inject_client_css_js_1.injectClientCSS; } });
-var inject_client_global_css_js_1 = require("./utils/inject-client-global-css.js");
-Object.defineProperty(exports, "injectClientGlobalCSS", { enumerable: true, get: function () { return inject_client_global_css_js_1.injectClientGlobalCSS; } });
-var inject_server_css_js_1 = require("./utils/inject-server-css.js");
-Object.defineProperty(exports, "injectServerCSS", { enumerable: true, get: function () { return inject_server_css_js_1.injectServerCSS; } });
-Object.defineProperty(exports, "getServerCSS", { enumerable: true, get: function () { return inject_server_css_js_1.getServerCSS; } });