@cyberalien/svg-utils 1.1.4 → 1.2.0

package/lib/components/export/merge.js

@@ -1,3 +1,5 @@
+import { stringifyStylesheet } from "../../css/stylesheet.js";
+
 /**
 * Merge exported component files into single array
 */
@@ -18,7 +20,7 @@ function mergeExportedComponentFiles(items, files) {
 		add(item);
 		if (item.css && item.style) add({
 			filename: item.css,
-			content: item.style
+			content: stringifyStylesheet(item.style)
 		});
 	}
 	return files;

package/lib/components/helpers/content/stringify.d.ts

@@ -1,7 +1,7 @@
+import { CSSGeneratedStylesheet } from "../../../css/types.js";
 import { ComponentFactorySource } from "../../types/source.js";
-import { ComponentFactoryRenderingOptions } from "../../types/options.js";
 /**
  * Convert icon content to a string literal
  */
-declare function stringifyFactoryIconContent(icon: ComponentFactorySource, options: Pick<ComponentFactoryRenderingOptions, 'cssMode' | 'mergeCSS'>, embedCSS?: string): string;
+declare function stringifyFactoryIconContent(icon: Omit<ComponentFactorySource, 'viewBox' | 'fallback' | 'states'>, embedCSS?: CSSGeneratedStylesheet): string;
 export { stringifyFactoryIconContent };

package/lib/components/helpers/content/stringify.js

@@ -1,17 +1,11 @@
-import { generateCSSDefaultImportName } from "../css/name.js";
+import { stringifyStylesheet } from "../../../css/stylesheet.js";
 
 /**
 * Convert icon content to a string literal
 */
-function stringifyFactoryIconContent(icon, options, embedCSS) {
-	const { cssMode, mergeCSS } = options;
-	let content = "`" + (embedCSS ? `<style>${embedCSS}</style>${icon.content}` : icon.content).replace(/`/g, "\\`") + "`";
-	switch (cssMode) {
-		case "module":
-			for (const className in icon.classes) content = content.replace(new RegExp("([\" ])(" + className + ")([\" ])", "g"), `$1\${${mergeCSS ? "css" : generateCSSDefaultImportName(className)}['${className}']}$3`);
-			return content;
-		default: return content;
-	}
+function stringifyFactoryIconContent(icon, embedCSS) {
+	const style = embedCSS ? stringifyStylesheet(embedCSS) : "";
+	return "`" + (style ? `<style>${style}</style>${icon.content}` : icon.content).replace(/`/g, "\\`") + "`";
 }
 
 export { stringifyFactoryIconContent };

package/lib/components/helpers/css/generate.d.ts

@@ -1,3 +1,4 @@
+import { CSSGeneratedStylesheet } from "../../../css/types.js";
 import { GeneratedAssetFile } from "../../types/component.js";
 import { ComponentFactorySource } from "../../types/source.js";
 import { ComponentFactoryOptions } from "../../types/options.js";
@@ -10,5 +11,5 @@ interface Options extends Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' |
  *
  * Adds imports to imports object, adds assets
  */
-declare function generateCSSFilesForComponent(content: ComponentFactorySource, imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Options): string | undefined;
+declare function generateCSSFilesForComponent(content: Omit<ComponentFactorySource, 'viewBox'>, imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Options): CSSGeneratedStylesheet | undefined;
 export { generateCSSFilesForComponent };

package/lib/components/helpers/css/generate.js

@@ -1,6 +1,6 @@
-import { stringifyCSSKeyframes, stringifyCSSSelector } from "../../../css/stringify.js";
-import { generateCSSDefaultImportName } from "./name.js";
+import { createEmptyStylesheet, stringifyStylesheet } from "../../../css/stylesheet.js";
 import { getGeneratedCSSFilename } from "../filenames/css.js";
+import { renderStatefulSVGCSSIconStyle } from "../../../svg-css/icon/css.js";
 
 /**
 * Generate CSS files for component
@@ -8,65 +8,62 @@ import { getGeneratedCSSFilename } from "../filenames/css.js";
 * Adds imports to imports object, adds assets
 */
 function generateCSSFilesForComponent(content, imports, assets, options) {
-	const { classes, keyframes } = content;
-	if (!classes) return;
+	if (!content.classes) return;
 	const { cssMode, componentType } = options;
 	const isComponent = cssMode === "embed";
 	const returnCSS = isComponent || cssMode === "prop";
-	const isModule = cssMode === "module";
 	const mergeCSS = (returnCSS || options.mergeCSS) ?? false;
-	const embedAnimations = isModule && !mergeCSS;
-	const classNamePrefix = isComponent && componentType === "svelte" ? ":global " : "";
-	const keyframesPrefix = isComponent && componentType === "svelte" ? "-global-" : "";
-	const mergedContent = [];
-	for (const className in classes) {
-		const baseContent = stringifyCSSSelector(`${classNamePrefix}.${className}`, classes[className]);
-		let content = baseContent;
-		if (embedAnimations && keyframes) {
-			for (const animationName in keyframes) if (baseContent.includes(animationName)) {
-				const value = keyframes[animationName];
-				content += "\n" + (typeof value === "string" ? value : stringifyCSSKeyframes(keyframesPrefix + animationName, value));
+	const commonStylesheet = mergeCSS ? createEmptyStylesheet() : void 0;
+	const statefulData = content.statefulData;
+	const stylesheets = renderStatefulSVGCSSIconStyle(content, statefulData?.context ?? null, commonStylesheet);
+	if (isComponent && componentType === "svelte") {
+		const list = commonStylesheet ? [commonStylesheet] : Object.values(stylesheets);
+		const wrapSelectors = (selectors) => {
+			const keys = Object.keys(selectors);
+			for (const selector of keys) {
+				const value = selectors[selector];
+				if (!selector.startsWith("@")) {
+					delete selectors[selector];
+					const newSelector = selector.split(",").map((item) => `:global(${item.trim()})`).join(", ");
+					selectors[newSelector] = value;
+				}
+				if (value.nested) wrapSelectors(value.nested);
+			}
+		};
+		for (const stylesheet of list) {
+			wrapSelectors(stylesheet.selectors);
+			const keyframes = stylesheet.keyframes;
+			const animations = Object.keys(keyframes);
+			for (const animationName of animations) {
+				const animation = keyframes[animationName];
+				delete keyframes[animationName];
+				keyframes["-global-" + animationName] = animation;
 			}
 		}
-		if (mergeCSS) {
-			mergedContent.push(content);
-			continue;
-		}
-		const filename = getGeneratedCSSFilename(className, options);
-		assets.push({
-			...filename,
-			content
-		});
-		if (isModule) imports.modules[filename.import] = generateCSSDefaultImportName(className);
-		else imports.css.add(filename.import);
 	}
-	if (!embedAnimations && keyframes) for (const animationName in keyframes) {
-		const value = keyframes[animationName];
-		const content = typeof value === "string" ? value : stringifyCSSKeyframes(keyframesPrefix + animationName, value);
-		if (mergeCSS) {
-			mergedContent.push(content);
-			continue;
+	if (!mergeCSS) for (const className in stylesheets) {
+		const stylesheet = stylesheets[className];
+		const content = stringifyStylesheet(stylesheet);
+		if (content) {
+			const filename = getGeneratedCSSFilename(className, options);
+			assets.push({
+				...filename,
+				content
+			});
+			imports.css.add(filename.import);
 		}
-		const filename = getGeneratedCSSFilename(animationName, options);
-		assets.push({
-			...filename,
-			content
-		});
-		if (isModule) imports.modules[filename.import] = generateCSSDefaultImportName(animationName);
-		else imports.css.add(filename.import);
 	}
-	if (mergeCSS && mergedContent.length) {
-		const content = mergedContent.join("\n");
-		if (typeof mergeCSS == "object") {
+	else if (typeof mergeCSS == "object") {
+		const content = stringifyStylesheet(commonStylesheet);
+		if (content) {
 			assets.push({
 				...mergeCSS,
 				content
 			});
-			if (isModule) imports.modules[mergeCSS.import] = "css";
-			else if (!returnCSS) imports.css.add(mergeCSS.import);
+			imports.css.add(mergeCSS.import);
 		}
-		return returnCSS ? content : void 0;
 	}
+	return returnCSS ? commonStylesheet : void 0;
 }
 
 export { generateCSSFilesForComponent };

package/lib/components/helpers/filenames/css.d.ts

@@ -2,5 +2,5 @@ import { ComponentFactoryOptions, GeneratedAssetPath } from "../../types/options
 /**
  * Generate CSS filename based on options
  */
-declare function getGeneratedCSSFilename(name: string, options: Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' | 'doubleDirsForCSS'>): GeneratedAssetPath;
+declare function getGeneratedCSSFilename(name: string, options: Pick<ComponentFactoryOptions, 'cssPath' | 'doubleDirsForCSS'>): GeneratedAssetPath;
 export { getGeneratedCSSFilename };

package/lib/components/helpers/filenames/css.js

@@ -4,9 +4,8 @@ import { getGeneratedAssetFilename } from "./asset.js";
 * Generate CSS filename based on options
 */
 function getGeneratedCSSFilename(name, options) {
-	const { cssPath, doubleDirsForCSS, cssMode } = options;
-	const baseName = doubleDirsForCSS ? `${name.slice(0, 1).toLowerCase()}/${name}` : name;
-	return getGeneratedAssetFilename(cssMode === "module" ? `${baseName}.module.css` : `${baseName}.css`, cssPath);
+	const { cssPath, doubleDirsForCSS } = options;
+	return getGeneratedAssetFilename(`${doubleDirsForCSS ? `${name.slice(0, 1).toLowerCase()}/${name}` : name}.css`, cssPath);
 }
 
 export { getGeneratedCSSFilename };

package/lib/components/helpers/functions/custom.d.ts

@@ -0,0 +1,14 @@
+import { GeneratedAssetFile } from "../../types/component.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentImports } from "../imports/types.js";
+interface Data {
+  functionName: string;
+  content: string;
+  exportNames?: Set<string>;
+  jsName?: string;
+}
+/**
+ * Adds a custom function to assets
+ */
+declare function addCustomFunctionAsset(imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Pick<ComponentFactoryOptions, 'rootPath' | 'helpersDirectory'>, data: Data): void;
+export { addCustomFunctionAsset };

package/lib/components/helpers/functions/custom.js

@@ -0,0 +1,17 @@
+import { defaultHelpersDirectory, getGeneratedAssetFilename } from "../filenames/asset.js";
+import { camelToKebab } from "../../../helpers/misc/strings.js";
+
+/**
+* Adds a custom function to assets
+*/
+function addCustomFunctionAsset(imports, assets, options, data) {
+	const { functionName, content, exportNames } = data;
+	const filename = getGeneratedAssetFilename(`${options.helpersDirectory ?? defaultHelpersDirectory}/${data.jsName ?? camelToKebab(functionName)}.js`, options.rootPath);
+	assets.push({
+		...filename,
+		content
+	});
+	imports.named[filename.import] = exportNames ?? new Set([functionName]);
+}
+
+export { addCustomFunctionAsset };

package/lib/components/helpers/functions/fallback.d.ts

@@ -0,0 +1,8 @@
+import { GeneratedAssetFile } from "../../types/component.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentImports } from "../imports/types.js";
+/**
+ * Adds getFallback() function to assets
+ */
+declare function addFallbackFunctionAsset(imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Pick<ComponentFactoryOptions, 'rootPath' | 'helpersDirectory'>, defaultValues: Record<string, boolean | string>): string;
+export { addFallbackFunctionAsset };

package/lib/components/helpers/functions/fallback.js

@@ -0,0 +1,53 @@
+import { createUniqueHashContext } from "../../../helpers/hash/context.js";
+import { getUniqueHash } from "../../../helpers/hash/unique.js";
+import { defaultHelpersDirectory, getGeneratedAssetFilename } from "../filenames/asset.js";
+
+const sharedFunctionName = "getIconFallback";
+const hashedFunctionName = "getFallback";
+const functionContent = `
+export function ${sharedFunctionName}(
+    defaultValues,
+    template,
+    values,
+) {
+    const stateValue = (state) =>
+        values[state] ?? defaultValues?.[state];
+    return template
+        .map((chunk) =>
+            typeof chunk === 'string'
+                ? chunk
+                : 'values' in chunk
+                    ? chunk.values[+!!stateValue(chunk.state)]
+                    : stateValue(chunk.state)
+        )
+        .join('');
+}
+`;
+/**
+* Adds getFallback() function to assets
+*/
+function addFallbackFunctionAsset(imports, assets, options, defaultValues) {
+	const hash = getUniqueHash(defaultValues, {
+		context: createUniqueHashContext(),
+		css: true,
+		length: 10
+	});
+	const assetDirectory = options.helpersDirectory ?? defaultHelpersDirectory;
+	const sharedFilename = getGeneratedAssetFilename(`${assetDirectory}/fallback.js`, options.rootPath);
+	assets.push({
+		...sharedFilename,
+		content: functionContent
+	});
+	const hashedFilename = getGeneratedAssetFilename(`${assetDirectory}/fallback-${hash}.js`, options.rootPath);
+	assets.push({
+		...hashedFilename,
+		content: `import { ${sharedFunctionName} } from './fallback.js';
+
+export const ${hashedFunctionName} = ${sharedFunctionName}.bind(null, ${JSON.stringify(defaultValues)});
+`
+	});
+	imports.named[hashedFilename.import] = new Set([hashedFunctionName]);
+	return hashedFunctionName;
+}
+
+export { addFallbackFunctionAsset };

package/lib/components/helpers/functions/innerhtml.d.ts

@@ -0,0 +1,8 @@
+import { GeneratedAssetFile } from "../../types/component.js";
+import { ComponentFactoryOptions } from "../../types/options.js";
+import { FactoryComponentImports } from "../imports/types.js";
+/**
+ * Adds cleanUpInnerHTML() function to assets
+ */
+declare function addInnerHTMLFunctionAsset(imports: FactoryComponentImports, assets: GeneratedAssetFile[], options: Pick<ComponentFactoryOptions, 'rootPath' | 'helpersDirectory'>): string;
+export { addInnerHTMLFunctionAsset };

package/lib/components/helpers/functions/innerhtml.js

@@ -0,0 +1,35 @@
+import { addCustomFunctionAsset } from "./custom.js";
+
+const functionName = "cleanupHTML";
+/**
+* Adds cleanUpInnerHTML() function to assets
+*/
+function addInnerHTMLFunctionAsset(imports, assets, options) {
+	addCustomFunctionAsset(imports, assets, options, {
+		functionName,
+		content: `let policy;
+
+function createPolicy() {
+	try {
+		policy = window.trustedTypes.createPolicy('iconify', {
+			createHTML: (s) => s,
+		});
+	} catch (err) {
+		policy = null;
+	}
+}
+
+export function ${functionName}(html) {
+	if (policy === undefined) {
+		createPolicy();
+	}
+
+	return policy ? policy.createHTML(html) : html;
+}
+`,
+		jsName: "innerhtml"
+	});
+	return functionName;
+}
+
+export { addInnerHTMLFunctionAsset };

package/lib/components/helpers/functions/size.js

@@ -68,11 +68,11 @@ export { ${functionName} };
 */
 function addSizeFunctionAsset(imports, assets, options) {
 	const filename = getGeneratedAssetFilename(`${options.helpersDirectory ?? defaultHelpersDirectory}/size.js`, options.rootPath);
-	imports.named[filename.import] = new Set([functionName]);
 	assets.push({
 		...filename,
 		content: functionContent
 	});
+	imports.named[filename.import] = new Set([functionName]);
 	return functionName;
 }
 

package/lib/components/helpers/imports/create.js

@@ -7,8 +7,7 @@ function createFactoryImports() {
 		named: Object.create(null),
 		types: Object.create(null),
 		full: /* @__PURE__ */ new Set(),
-		css: /* @__PURE__ */ new Set(),
-		modules: Object.create(null)
+		css: /* @__PURE__ */ new Set()
 	};
 }
 

package/lib/components/helpers/imports/stringify.js

@@ -15,7 +15,6 @@ function split(imports, relative) {
 		default: filterObject(imports.default),
 		named: filterObject(imports.named),
 		types: filterObject(imports.types),
-		modules: filterObject(imports.modules),
 		full: new Set([...imports.full].filter(shouldInclude)),
 		css: new Set([...imports.css].filter(shouldInclude))
 	};
@@ -38,7 +37,6 @@ function stringifyFactoryImports(imports, includeTypes = true) {
 			if (items) lines.push(`import type { ${items} } from '${source}';`);
 		}
 		for (const source of data.css) lines.push(`import '${source}';`);
-		for (const source in data.modules) lines.push(`import ${data.modules[source]} from '${source}';`);
 	}
 	if (lines.length) lines.push("");
 	return lines.join("\n");

package/lib/components/helpers/imports/types.d.ts

@@ -7,6 +7,5 @@ interface FactoryComponentImports {
   types: Record<string, Set<string>>;
   full: Set<string>;
   css: Set<string>;
-  modules: Record<string, string>;
 }
 export { FactoryComponentImports };

package/lib/components/jsx.js

@@ -11,11 +11,18 @@ import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
 import { addJSXComponentTypes } from "./helpers/ts/jsx.js";
+import { addCustomFunctionAsset } from "./helpers/functions/custom.js";
+import { addFallbackFunctionAsset } from "./helpers/functions/fallback.js";
+import { addInnerHTMLFunctionAsset } from "./helpers/functions/innerhtml.js";
 
 /**
 * Create functional Vue component code
 */
 function createJSXComponent(data, options) {
+	const icon = data.icon;
+	const viewBox = icon.viewBox;
+	const defaultFallback = icon.defaultFallback;
+	const statefulData = icon.statefulData;
 	const useTS = options.ts ?? false;
 	const assets = [];
 	const imports = createFactoryImports();
@@ -29,17 +36,16 @@ function createJSXComponent(data, options) {
 			break;
 	}
 	const fallbackPackage = options.fallbackPackage || null;
-	const hasFallback = !!(fallbackPackage && data.fallback);
+	const hasFallback = !!(fallbackPackage && defaultFallback);
 	if (hasFallback) {
 		imports.named[fallbackPackage] = new Set(["Icon"]);
 		dependencies.add(fallbackPackage);
 	}
 	const reactNamedImports = new Set([createElement]);
 	imports.named[importPackage] = reactNamedImports;
-	const style = generateCSSFilesForComponent(data.icon, imports, assets, options);
+	const style = generateCSSFilesForComponent(icon, imports, assets, options);
 	const isEmbeddedCSS = options.cssMode === "embed";
 	let hasFixedSize = !!options.width && !!options.height;
-	const viewBox = data.viewBox;
 	const hasComputedViewbox = options.square && !hasFixedSize && viewBox.width !== viewBox.height;
 	const isStringViewBox = !hasFallback;
 	const hasComputedRatio = hasComputedViewbox && isStringViewBox;
@@ -52,6 +58,61 @@ function createJSXComponent(data, options) {
 		value: "props",
 		template: "...props,"
 	};
+	let computedFallback = false;
+	if (statefulData) {
+		const { supportedStates, allStates } = statefulData;
+		if (supportedStates.size) {
+			const computedStates = [];
+			const computedStateNames = [];
+			let addedStateFunc = false;
+			for (const state of allStates) if (typeof state === "string") {
+				if (supportedStates.has(state)) {
+					props[state] = {
+						type: "boolean",
+						value: state,
+						template: ""
+					};
+					computedStates.push(`'${state}': ${state}`);
+					computedStateNames.push(state);
+				}
+			} else {
+				const stateName = state[0];
+				if (supportedStates.has(stateName)) {
+					const stateValues = state[1];
+					const defaultStateValue = state[2] ?? stateValues[0];
+					props[stateName] = {
+						type: stateValues.map((value) => `'${value}'`).join(" | "),
+						value: stateName,
+						template: ""
+					};
+					computedStates.push(`'${stateName}': namedStateValue(${stateName}, '${defaultStateValue}')`);
+					computedStateNames.push(stateName);
+					if (!addedStateFunc) {
+						addedStateFunc = true;
+						addCustomFunctionAsset(imports, assets, options, {
+							functionName: "namedStateValue",
+							content: `export function namedStateValue(value, defaultValue) {
+	return value && value !== defaultValue ? value : undefined;
+}`
+						});
+					}
+				}
+			}
+			if (computedStates.length) {
+				componentInternalCode.push(`const states = useMemo(() => ({ ${computedStates.join(", ")} }), [${computedStateNames.join(", ")}]);`);
+				if (hasFallback && statefulData.fallback) {
+					computedFallback = true;
+					const func = addFallbackFunctionAsset(imports, assets, options, statefulData.defaultStateValues);
+					componentInternalCode.push(`const fallback = useMemo(() => ${func}(${JSON.stringify(statefulData.fallback)}, states), [states]);`);
+				}
+				componentInternalCode.push(`const className = useMemo(() => Object.entries(states).map(([key, value]) => value ? \`state-\${value === true ? key : value}\` : '').join(' ').trim() || undefined, [states]);`);
+				props["className"] = {
+					value: "className",
+					template: `className,`
+				};
+			}
+		}
+	}
 	const getViewBox = (viewBox) => isStringViewBox ? `'${stringifyIconViewBox(viewBox)}'` : JSON.stringify(minifyViewBox(viewBox));
 	if (hasComputedViewbox) {
 		componentExternalCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`);
@@ -60,7 +121,7 @@ function createJSXComponent(data, options) {
 	const ratioValue = getViewBoxRatio(viewBox);
 	if (hasComputedRatio) componentInternalCode.push(`const ratio = useMemo(() => square ? 1 : ${ratioValue}, [square]);`);
 	if (hasFixedSize) {
-		const sizeProps = getComponentSizeValues(options, data.viewBox);
+		const sizeProps = getComponentSizeValues(options, viewBox);
 		if (!sizeProps) throw new Error("Fixed size expected, but could not be determined");
 		props.width = sizeProps.width;
 		props.height = sizeProps.height;
@@ -78,7 +139,6 @@ function createJSXComponent(data, options) {
 	} else {
 		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
 		componentInternalCode.push(`const size = useMemo(() => ${getSizeProps}(width, height, ${hasComputedRatio ? "ratio" : ratioValue}), [width, height${hasComputedRatio ? ", ratio" : ""}]);`);
-		reactNamedImports.add("useMemo");
 		props.width = {
 			type: "string",
 			value: "width",
@@ -90,16 +150,27 @@ function createJSXComponent(data, options) {
 			template: ""
 		};
 	}
+	if (componentInternalCode.some((line) => line.includes("useMemo"))) reactNamedImports.add("useMemo");
 	if (options.square) props.square = { type: "boolean" };
 	props.viewBox = {
 		value: "viewBox",
 		template: "viewBox,"
 	};
+	let contentTemplate;
+	const contentValue = stringifyFactoryIconContent(data.icon, isEmbeddedCSS ? style : void 0);
+	if (!hasFallback) {
+		const funcName = addInnerHTMLFunctionAsset(imports, assets, options);
+		componentExternalCode.push(`const content = {__html: ${funcName}(${contentValue})};`);
+		contentTemplate = `dangerouslySetInnerHTML: content,`;
+	}
 	props.content = {
-		value: stringifyFactoryIconContent(data.icon, options, isEmbeddedCSS ? style : void 0),
-		template: hasFallback ? void 0 : "dangerouslySetInnerHTML: {__html: {value}},"
+		value: contentValue,
+		template: contentTemplate
 	};
-	if (hasFallback && data.fallback) props.fallback = data.fallback;
+	if (hasFallback && defaultFallback) props.fallback = computedFallback ? {
+		value: "fallback",
+		template: "fallback,"
+	} : defaultFallback;
 	componentInternalCode.push(`return ${createElement}(${hasFallback ? "Icon" : "'svg'"}, {
 \t\t${stringifyFactoryPropsAsJSON(props, "\n		")}
 \t});`);

package/lib/components/prepare/iconify.d.ts

@@ -1,7 +1,7 @@
 import { GeneratedAssetFile } from "../types/component.js";
-import { ConvertSVGContentOptions } from "../../svg-css/types.js";
 import { FactoryIconData } from "../types/data.js";
 import { GeneratedAssetPath } from "../types/options.js";
+import { ConvertSVGContentOptions } from "../../svg-css/types.js";
 import { IconifyIcon, IconifyJSON } from "@iconify/types";
 interface Options extends ConvertSVGContentOptions {
   fallback?: string | boolean;

package/lib/components/prepare/iconify.js

@@ -8,13 +8,15 @@ import { normaliseIconifyIcon } from "../../iconify/icon/nornalise.js";
 function convertIconifyIconToFactoryContent(icon, prefix, name, options) {
 	const { body, viewBox } = normaliseIconifyIcon(icon);
 	const fallbackOption = options?.fallback ?? true;
-	const fallback = typeof fallbackOption === "string" ? fallbackOption : fallbackOption ? `${prefix}:${name}` : void 0;
+	const defaultFallback = typeof fallbackOption === "string" ? fallbackOption : fallbackOption ? `${prefix}:${name}` : void 0;
 	return {
 		prefix,
 		name,
-		viewBox,
-		icon: convertSVGContentToCSSRules(body, options),
-		fallback
+		icon: {
+			...convertSVGContentToCSSRules(body, options),
+			viewBox,
+			defaultFallback
+		}
 	};
 }
 /**

package/lib/components/prepare/states.d.ts

@@ -0,0 +1,8 @@
+import { SVGCSSStatefulIcon } from "../../svg-css/icon/types.js";
+import { ComponentFactorySource } from "../types/source.js";
+import { ComponentFactoryStatefulIconRenderingOptions } from "../types/options.js";
+/**
+ * Check states for stateful icon
+ */
+declare function prepareComponentFactoryStatefulIcon(icon: SVGCSSStatefulIcon, options?: ComponentFactoryStatefulIconRenderingOptions): ComponentFactorySource | undefined;
+export { prepareComponentFactoryStatefulIcon };

package/lib/components/prepare/states.js

@@ -0,0 +1,73 @@
+import { getStateValue } from "../../svg-css/states/value.js";
+import { createStatefulIconSelectorsContext } from "../../svg-css/states/selector/parse.js";
+import { parseIconFallbackTemplate } from "../../svg-css/states/fallback/parse.js";
+import { parseViewBox } from "../../svg/viewbox/parse.js";
+
+/**
+* Check states for stateful icon
+*/
+function prepareComponentFactoryStatefulIcon(icon, options) {
+	const viewBox = typeof icon.viewBox === "string" ? parseViewBox(icon.viewBox) : icon.viewBox;
+	if (!viewBox) return;
+	const newIcon = {
+		...icon,
+		viewBox
+	};
+	const fallback = icon.fallback;
+	const isStatefulFallback = fallback?.includes("{");
+	if (!isStatefulFallback && fallback) newIcon.defaultFallback = fallback;
+	const allStates = icon.states;
+	if (!allStates) return newIcon;
+	const config = Object.create(null);
+	const customConfig = options?.stateSelectors;
+	const supportedStates = /* @__PURE__ */ new Set();
+	const defaultStateValues = Object.create(null);
+	const supportedStateValues = Object.create(null);
+	for (const state of allStates) {
+		const stateName = typeof state === "string" ? state : state[0];
+		const defaultValue = getStateValue(state);
+		defaultStateValues[stateName] = defaultValue;
+		if (customConfig?.[stateName]) config[stateName] = customConfig[stateName];
+		else {
+			if (state === "focus") config[stateName] = ".svg-focus-anchor:focus-within, .svg-hover-anchor:hover, &.state-focus";
+			else config[stateName] = `&.state-{state}`;
+			supportedStates.add(stateName);
+			supportedStateValues[stateName] = defaultValue;
+		}
+	}
+	const statefulData = {
+		allStates,
+		supportedStates,
+		defaultStateValues,
+		supportedStateValues,
+		context: createStatefulIconSelectorsContext(config, allStates)
+	};
+	if (isStatefulFallback) {
+		let fallbackTemplate = parseIconFallbackTemplate(fallback, allStates);
+		if (!fallbackTemplate) return newIcon;
+		let defaultFallback = "";
+		let hasStatefulFallback = false;
+		fallbackTemplate = fallbackTemplate.map((item) => {
+			if (typeof item === "string") {
+				defaultFallback += item;
+				return item;
+			}
+			const stateName = item.state;
+			const defaultValue = defaultStateValues[stateName] || stateName;
+			defaultFallback += defaultValue;
+			if (supportedStates.has(stateName)) {
+				hasStatefulFallback = true;
+				return item;
+			}
+			return defaultValue;
+		});
+		if (hasStatefulFallback) statefulData.fallback = fallbackTemplate;
+		newIcon.defaultFallback = defaultFallback;
+	}
+	return {
+		...newIcon,
+		statefulData
+	};
+}
+
+export { prepareComponentFactoryStatefulIcon };