@cyberalien/svg-utils 1.1.4 → 1.2.0

package/lib/components/raw.js

@@ -1,3 +1,4 @@
+import { stringifyStylesheet } from "../css/stylesheet.js";
 import { getComponentSizeValues } from "./helpers/content/size.js";
 import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } from "../svg/viewbox/value.js";
@@ -11,21 +12,23 @@ import { getGeneratedComponentTypesFilename } from "./helpers/filenames/types.js
 * Create raw component code
 */
 function createRawComponent(data, options) {
+	const icon = data.icon;
+	const viewBox = icon.viewBox;
 	const assets = [];
 	const imports = createFactoryImports();
 	const codeLines = [];
-	const style = generateCSSFilesForComponent(data.icon, imports, assets, options);
+	const style = generateCSSFilesForComponent(icon, imports, assets, options);
 	const isEmbeddedCSS = options.cssMode === "embed";
 	const props = {
 		xmlns: "http://www.w3.org/2000/svg",
-		...getComponentSizeValues(options, data.viewBox),
-		viewBox: stringifyIconViewBox(data.viewBox)
+		...getComponentSizeValues(options, viewBox),
+		viewBox: stringifyIconViewBox(viewBox)
 	};
-	const icon = {
-		...data.icon,
-		content: `<svg ${stringifyFactoryProps(props, factoryPropTemplate)}>${isEmbeddedCSS && style ? `<style>${style}</style>` : ""}${data.icon.content}</svg>`
+	const iconContent = {
+		...icon,
+		content: `<svg ${stringifyFactoryProps(props, factoryPropTemplate)}>${isEmbeddedCSS && style ? `<style>${stringifyStylesheet(style)}</style>` : ""}${icon.content}</svg>`
 	};
-	codeLines.push(`const icon = ${stringifyFactoryIconContent(icon, options)};\n`);
+	codeLines.push(`const icon = ${stringifyFactoryIconContent(iconContent)};\n`);
 	codeLines.push("export default icon;\n");
 	const importsCode = stringifyFactoryImports(imports);
 	if (importsCode) codeLines.unshift(importsCode);

package/lib/components/svelte.js

@@ -1,3 +1,4 @@
+import { stringifyStylesheet } from "../css/stylesheet.js";
 import { getComponentSizeValues } from "./helpers/content/size.js";
 import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } from "../svg/viewbox/value.js";
@@ -10,34 +11,90 @@ import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
+import { addCustomFunctionAsset } from "./helpers/functions/custom.js";
+import { addFallbackFunctionAsset } from "./helpers/functions/fallback.js";
 import { addSvelteComponentTypes } from "./helpers/ts/svelte.js";
 
 /**
 * Create Svelte component code
 */
 function createSvelteComponent(data, options) {
+	const icon = data.icon;
+	const viewBox = icon.viewBox;
+	const fallback = icon.defaultFallback;
+	const statefulData = icon.statefulData;
 	const useTS = options.ts ?? false;
 	const assets = [];
 	const imports = createFactoryImports();
 	const dependencies = /* @__PURE__ */ new Set();
-	const hasFallback = !!data.fallback;
-	if (hasFallback) {
+	if (fallback) {
 		imports.default["@iconify/css-svelte"] = "Icon";
 		dependencies.add("@iconify/css-svelte");
 	}
-	const styleContent = generateCSSFilesForComponent(data.icon, imports, assets, {
+	const styleContent = generateCSSFilesForComponent(icon, imports, assets, {
 		...options,
 		componentType: "svelte"
 	});
 	let hasFixedSize = !!options.width && !!options.height;
-	const viewBox = data.viewBox;
 	const hasComputedViewbox = options.square && !hasFixedSize && viewBox.width !== viewBox.height;
-	const isStringViewBox = !hasFallback;
+	const isStringViewBox = !fallback;
 	const hasComputedRatio = hasComputedViewbox && isStringViewBox;
 	if (!hasComputedViewbox && (options.width || options.height)) hasFixedSize = true;
 	const componentCode = [];
 	const props = {};
-	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
+	if (!fallback) props.xmlns = "http://www.w3.org/2000/svg";
+	let computedFallback = false;
+	if (statefulData) {
+		const { supportedStates, allStates } = statefulData;
+		if (supportedStates.size) {
+			const computedStates = [];
+			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}`);
+				}
+			} 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}')`);
+					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) {
+				componentCode.push(`let states = $derived(({ ${computedStates.join(", ")} }));`);
+				if (fallback && statefulData.fallback) {
+					computedFallback = true;
+					const func = addFallbackFunctionAsset(imports, assets, options, statefulData.defaultStateValues);
+					componentCode.push(`let fallback = $derived(${func}(${JSON.stringify(statefulData.fallback)},states));`);
+				}
+				componentCode.push(`let className = $derived(Object.entries(states).map(([key, value]) => value ? \`state-\${value === true ? key : value}\` : '').join(' ').trim() || undefined);`);
+				props.class = {
+					value: "className",
+					template: "class={className}"
+				};
+			}
+		}
+	}
 	const viewBoxPropValue = `viewBox${hasComputedViewbox ? "Computed" : ""}`;
 	const getViewBox = (viewBox) => isStringViewBox ? `'${stringifyIconViewBox(viewBox)}'` : JSON.stringify(minifyViewBox(viewBox));
 	if (hasComputedViewbox) componentCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `let ${viewBoxPropValue} = $derived(square ? squareViewBox : baseViewBox);`);
@@ -45,11 +102,11 @@ function createSvelteComponent(data, options) {
 	const ratioValue = getViewBoxRatio(viewBox);
 	if (hasComputedRatio) componentCode.push(`let ratio = $derived(square ? 1 : ${ratioValue});`);
 	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;
-	} else if (hasFallback) {
+	} else if (fallback) {
 		props.width = {
 			type: "string",
 			value: "width",
@@ -79,17 +136,19 @@ function createSvelteComponent(data, options) {
 		value: "viewBox",
 		template: `viewBox={${viewBoxPropValue}}`
 	};
-	componentCode.push(`const content = ${stringifyFactoryIconContent(data.icon, options)};`);
-	const innerHTML = hasFallback ? "" : "{@html content}";
+	componentCode.push(`const content = ${stringifyFactoryIconContent(icon)};`);
+	const innerHTML = fallback ? "" : "{@html content}";
 	props.content = {
 		value: "content",
-		template: hasFallback ? `content={content} fallback="${data.fallback}"` : ""
+		template: fallback ? `content={content} fallback=${computedFallback ? "{fallback}" : `"${fallback}"`}` : ""
 	};
 	const usedProps = getUsedFactoryProps(props);
 	const propsDestricturing = usedProps.length ? `{${[...usedProps, "...props"].join(", ")}}` : "props";
 	componentCode.unshift(`let ${propsDestricturing}${useTS ? ": Props" : ""} = $props();\n`);
-	if (useTS) componentCode.unshift(`interface Props {\n${stringifyFactoryPropTypes(props)}\n};\n`);
-	const tag = hasFallback ? "Icon" : "svg";
+	const propTypes = stringifyFactoryPropTypes(props);
+	if (useTS) componentCode.unshift(`interface Props {\n${propTypes}\n};\n`);
+	else if (propTypes.trim()) componentCode.unshift(`/** @type {{${propTypes.replace(/\s*\n\s*/g, " ").trim()}}} */`);
+	const tag = fallback ? "Icon" : "svg";
 	const template = `<${tag} ${stringifyFactoryProps(props, "{prop}={{value}}")} {...props}>${innerHTML}</${tag}>`;
 	let content = `<script${useTS ? " lang=\"ts\"" : ""}>
 ${stringifyFactoryImports(imports)}
@@ -98,7 +157,7 @@ ${componentCode.join("\n")}
 ${template}
 `;
 	const style = options.cssMode === "prop" ? styleContent : void 0;
-	if (styleContent && !style) content += `<style>\n${styleContent}\n</style>\n`;
+	if (styleContent && !style) content += `<style>\n${stringifyStylesheet(styleContent)}\n</style>\n`;
 	const types = addSvelteComponentTypes(data, options, assets, props);
 	return {
 		assets,

package/lib/components/types/component.d.ts

@@ -1,3 +1,4 @@
+import { CSSGeneratedStylesheet } from "../../css/types.js";
 /**
  * File generated by component factory
  */
@@ -17,7 +18,7 @@ interface GeneratedAssetFile extends GeneratedComponentFile {
 interface FactoryGeneratedComponent {
   assets: GeneratedAssetFile[];
   content: string;
-  style?: string;
+  style?: CSSGeneratedStylesheet;
   types?: string;
   dependencies?: Set<string>;
 }

package/lib/components/types/css.d.ts

@@ -2,9 +2,8 @@
  * Method of importing CSS in generated components
  *
  * 'import' - Create external CSS file and import it in component
- * 'module' - Create CSS module and import it in component
  * 'embed' - Embed CSS styles in component (if supported by component, throws error otherwise)
  * 'prop' - Export CSS as separate property in generated data, do not import in component, do not create asset
  */
-type CSSExportMode = 'import' | 'module' | 'embed' | 'prop';
+type CSSExportMode = 'import' | 'embed' | 'prop';
 export { CSSExportMode };

package/lib/components/types/data.d.ts

@@ -1,4 +1,3 @@
-import { IconViewBox } from "../../svg/viewbox/types.js";
 import { ComponentFactorySource } from "./source.js";
 /**
  * Icon data
@@ -7,7 +6,5 @@ interface FactoryIconData {
   prefix: string;
   name: string;
   icon: ComponentFactorySource;
-  viewBox: IconViewBox;
-  fallback?: string;
 }
 export { FactoryIconData };

package/lib/components/types/options.d.ts

@@ -1,4 +1,5 @@
 import { UniqueHashPartialOptions } from "../../helpers/hash/types.js";
+import { StatefulIconSelectorsConfig } from "../../svg-css/states/selector/types.js";
 import { CSSExportMode } from "./css.js";
 /**
  * Asset path, generated from configuration
@@ -19,10 +20,16 @@ interface ComponentFactoryFileSystemOptions {
   helpersDirectory?: string;
   sharedTypes?: boolean;
 }
+/**
+ * Rendering options for stateful icons
+ */
+interface ComponentFactoryStatefulIconRenderingOptions {
+  stateSelectors?: StatefulIconSelectorsConfig;
+}
 /**
  * Rendering options for component factory
  */
-interface ComponentFactoryRenderingOptions {
+interface ComponentFactoryRenderingOptions extends ComponentFactoryStatefulIconRenderingOptions {
   square?: boolean;
   cssMode: CSSExportMode;
   mergeCSS?: GeneratedAssetPath;
@@ -33,4 +40,4 @@ interface ComponentFactoryRenderingOptions {
  * Options for component factory
  */
 interface ComponentFactoryOptions extends ComponentFactoryFileSystemOptions, ComponentFactoryRenderingOptions, Pick<UniqueHashPartialOptions, 'context'> {}
-export { ComponentFactoryFileSystemOptions, ComponentFactoryOptions, ComponentFactoryRenderingOptions, GeneratedAssetPath };
+export { ComponentFactoryFileSystemOptions, ComponentFactoryOptions, ComponentFactoryRenderingOptions, ComponentFactoryStatefulIconRenderingOptions, GeneratedAssetPath };

package/lib/components/types/source.d.ts

@@ -1,10 +1,25 @@
-import { CSSKeyframes, CSSRules } from "../../css/types.js";
-import { ConvertedSVGContent } from "../../svg-css/types.js";
+import { IconViewBox } from "../../svg/viewbox/types.js";
+import { IconStatesList } from "../../svg-css/states/types.js";
+import { SVGCSSStatefulIcon } from "../../svg-css/icon/types.js";
+import { IconFallbackTemplate } from "../../svg-css/states/fallback/types.js";
+import { StatefulIconSelectorsContext } from "../../svg-css/states/selector/types.js";
+/**
+ * Generated data for stateful icon
+ */
+interface StatefulComponentFactorySource {
+  fallback?: IconFallbackTemplate;
+  allStates: IconStatesList;
+  supportedStates: Set<string>;
+  defaultStateValues: Record<string, string | boolean>;
+  supportedStateValues: Record<string, string | boolean>;
+  context: StatefulIconSelectorsContext;
+}
 /**
  * Content for component factory
  */
-interface ComponentFactorySource extends Omit<ConvertedSVGContent, 'classes' | 'keyframes'> {
-  classes?: Record<string, CSSRules | string>;
-  keyframes?: Record<string, CSSKeyframes | string>;
+interface ComponentFactorySource extends Omit<SVGCSSStatefulIcon, 'viewBox' | 'fallback' | 'states'> {
+  viewBox: IconViewBox;
+  defaultFallback?: string;
+  statefulData?: StatefulComponentFactorySource;
 }
-export { ComponentFactorySource };
+export { ComponentFactorySource, StatefulComponentFactorySource };

package/lib/components/vue-func.js

@@ -10,44 +10,100 @@ import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps } from "./helpers/props/ts.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
+import { addCustomFunctionAsset } from "./helpers/functions/custom.js";
+import { addFallbackFunctionAsset } from "./helpers/functions/fallback.js";
 import { addVueComponentTypes } from "./helpers/ts/vue.js";
 
 /**
 * Create functional Vue component code
 */
 function createVueFunctionalComponent(data, options) {
+	const icon = data.icon;
+	const viewBox = icon.viewBox;
+	const fallback = icon.defaultFallback;
+	const statefulData = icon.statefulData;
 	const assets = [];
 	const imports = createFactoryImports();
 	const dependencies = /* @__PURE__ */ new Set();
-	const hasFallback = !!data.fallback;
-	if (hasFallback) {
+	if (fallback) {
 		imports.named["@iconify/css-vue"] = new Set(["Icon"]);
 		dependencies.add("@iconify/css-vue");
 	}
 	const vueNamedImports = new Set(["defineComponent", "h"]);
 	imports.named["vue"] = vueNamedImports;
-	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 isStringViewBox = !fallback;
 	const hasComputedRatio = hasComputedViewbox && isStringViewBox;
 	if (!hasComputedViewbox && (options.width || options.height)) hasFixedSize = true;
 	const componentCode = [];
 	const props = {};
-	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
+	if (!fallback) props.xmlns = "http://www.w3.org/2000/svg";
+	let computedFallback = false;
+	if (statefulData) {
+		const { supportedStates, allStates } = statefulData;
+		if (supportedStates.size) {
+			const computedStates = [];
+			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}': props['${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(props['${stateName}'], '${defaultStateValue}')`);
+					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) {
+				componentCode.push(`const states = computed(() => ({ ${computedStates.join(", ")} }));`);
+				if (fallback && statefulData.fallback) {
+					computedFallback = true;
+					const func = addFallbackFunctionAsset(imports, assets, options, statefulData.defaultStateValues);
+					componentCode.push(`const fallback = computed(() => ${func}(${JSON.stringify(statefulData.fallback)},states.value));`);
+				}
+				componentCode.push(`const className = computed(() => Object.entries(states.value).map(([key, value]) => value ? \`state-\${value === true ? key : value}\` : '').join(' ').trim() || undefined);`);
+				props["class"] = {
+					value: "class",
+					template: `'class': className.value,`
+				};
+			}
+		}
+	}
 	const getViewBox = (viewBox) => isStringViewBox ? `'${stringifyIconViewBox(viewBox)}'` : JSON.stringify(minifyViewBox(viewBox));
 	if (hasComputedViewbox) componentCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
 	else componentCode.push(`const viewBox = ${getViewBox(viewBox)};`);
 	const ratioValue = getViewBoxRatio(viewBox);
 	if (hasComputedRatio) componentCode.push(`const ratio = computed(() => props.square ? 1 : ${ratioValue});`);
 	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;
-	} else if (hasFallback) {
+	} else if (fallback) {
 		props.width = {
 			type: "string",
 			value: "width",
@@ -61,7 +117,6 @@ function createVueFunctionalComponent(data, options) {
 	} else {
 		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
 		componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, ${hasComputedRatio ? "ratio.value" : ratioValue}));`);
-		vueNamedImports.add("computed");
 		props.width = {
 			type: "string",
 			value: "width",
@@ -73,15 +128,19 @@ function createVueFunctionalComponent(data, options) {
 			template: ""
 		};
 	}
+	if (componentCode.some((line) => line.includes("computed("))) vueNamedImports.add("computed");
 	if (options.square) props.square = { type: "boolean" };
 	props.viewBox = {
 		value: "viewBox",
 		template: hasComputedViewbox ? "viewBox: viewBox.value," : "viewBox,"
 	};
-	props[hasFallback ? "content" : "innerHTML"] = { value: stringifyFactoryIconContent(data.icon, options, isEmbeddedCSS ? style : void 0) };
-	if (data.fallback) props.fallback = data.fallback;
+	props[fallback ? "content" : "innerHTML"] = { value: stringifyFactoryIconContent(icon, isEmbeddedCSS ? style : void 0) };
+	if (fallback) props.fallback = computedFallback ? {
+		value: "fallback",
+		template: "fallback: fallback.value,"
+	} : fallback;
 	const types = addVueComponentTypes(data, options, assets, props);
-	componentCode.push(`return () => h(${hasFallback ? "Icon" : "'svg'"}, { 
+	componentCode.push(`return () => h(${fallback ? "Icon" : "'svg'"}, { 
 			${stringifyFactoryPropsAsJSON(props, "\n			")}
 		});`);
 	const usedProps = getUsedFactoryProps(props);

package/lib/components/vue.js

@@ -1,3 +1,4 @@
+import { stringifyStylesheet } from "../css/stylesheet.js";
 import { getComponentSizeValues } from "./helpers/content/size.js";
 import { stringifyFactoryIconContent } from "./helpers/content/stringify.js";
 import { stringifyIconViewBox } from "../svg/viewbox/value.js";
@@ -10,44 +11,100 @@ import { makeSquareViewBox } from "../svg/viewbox/square.js";
 import { getUsedFactoryProps, stringifyFactoryPropTypes } from "./helpers/props/ts.js";
 import { minifyViewBox } from "../svg/viewbox/minify.js";
 import { getViewBoxRatio } from "./helpers/content/ratio.js";
+import { addCustomFunctionAsset } from "./helpers/functions/custom.js";
+import { addFallbackFunctionAsset } from "./helpers/functions/fallback.js";
 import { addVueComponentTypes } from "./helpers/ts/vue.js";
 
 /**
 * Create Vue component code
 */
 function createVueComponent(data, options) {
+	const icon = data.icon;
+	const viewBox = icon.viewBox;
+	const fallback = icon.defaultFallback;
+	const statefulData = icon.statefulData;
 	const useTS = options.ts ?? false;
 	const assets = [];
 	const imports = createFactoryImports();
 	const dependencies = /* @__PURE__ */ new Set();
-	const hasFallback = !!data.fallback;
-	if (hasFallback) {
+	if (fallback) {
 		imports.named["@iconify/css-vue"] = new Set(["Icon"]);
 		dependencies.add("@iconify/css-vue");
 	}
 	const vueNamedImports = /* @__PURE__ */ new Set();
 	imports.named["vue"] = vueNamedImports;
-	const styleContent = generateCSSFilesForComponent(data.icon, imports, assets, options);
+	const styleContent = generateCSSFilesForComponent(icon, imports, assets, options);
 	let hasFixedSize = !!options.width && !!options.height;
-	const viewBox = data.viewBox;
 	const hasComputedViewbox = options.square && !hasFixedSize && viewBox.width !== viewBox.height;
-	const isStringViewBox = !hasFallback;
+	const isStringViewBox = !fallback;
 	const hasComputedRatio = hasComputedViewbox && isStringViewBox;
 	if (!hasComputedViewbox && (options.width || options.height)) hasFixedSize = true;
 	const componentCode = [];
 	const props = {};
-	if (!hasFallback) props.xmlns = "http://www.w3.org/2000/svg";
+	if (!fallback) props.xmlns = "http://www.w3.org/2000/svg";
+	let computedFallback = false;
+	if (statefulData) {
+		const { supportedStates, allStates } = statefulData;
+		if (supportedStates.size) {
+			const computedStates = [];
+			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}': props['${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(props['${stateName}'], '${defaultStateValue}')`);
+					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) {
+				componentCode.push(`const states = computed(() => ({ ${computedStates.join(", ")} }));`);
+				if (fallback && statefulData.fallback) {
+					computedFallback = true;
+					const func = addFallbackFunctionAsset(imports, assets, options, statefulData.defaultStateValues);
+					componentCode.push(`const fallback = computed(() => ${func}(${JSON.stringify(statefulData.fallback)},states.value));`);
+				}
+				componentCode.push(`const className = computed(() => Object.entries(states.value).map(([key, value]) => value ? \`state-\${value === true ? key : value}\` : '').join(' ').trim() || undefined);`);
+				props.className = {
+					value: "className",
+					template: ":class=\"className\""
+				};
+			}
+		}
+	}
 	const getViewBox = (viewBox) => isStringViewBox ? `'${stringifyIconViewBox(viewBox)}'` : JSON.stringify(minifyViewBox(viewBox));
 	if (hasComputedViewbox) componentCode.push(`const baseViewBox = ${getViewBox(viewBox)};`, `const squareViewBox = ${getViewBox(makeSquareViewBox(viewBox))};`, `const viewBox = computed(() => props.square ? squareViewBox : baseViewBox);`);
 	else componentCode.push(`const viewBox = ${getViewBox(viewBox)};`);
 	const ratioValue = getViewBoxRatio(viewBox);
 	if (hasComputedRatio) componentCode.push(`const ratio = computed(() => props.square ? 1 : ${ratioValue});`);
 	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;
-	} else if (hasFallback) {
+	} else if (fallback) {
 		props.width = {
 			type: "string",
 			value: "width",
@@ -61,7 +118,6 @@ function createVueComponent(data, options) {
 	} else {
 		const getSizeProps = addSizeFunctionAsset(imports, assets, options);
 		componentCode.push(`const size = computed(() => ${getSizeProps}(props.width, props.height, ${hasComputedRatio ? "ratio.value" : ratioValue}));`);
-		vueNamedImports.add("computed");
 		props.width = {
 			type: "string",
 			value: "width",
@@ -73,22 +129,23 @@ function createVueComponent(data, options) {
 			template: ""
 		};
 	}
+	if (componentCode.some((line) => line.includes("computed("))) vueNamedImports.add("computed");
 	if (options.square) props.square = { type: "boolean" };
 	props.viewBox = {
 		value: "viewBox",
 		template: ":viewBox=\"viewBox\""
 	};
-	componentCode.push(`const content = ${stringifyFactoryIconContent(data.icon, options)};`);
+	componentCode.push(`const content = ${stringifyFactoryIconContent(icon)};`);
 	props.content = {
 		value: "content",
-		template: hasFallback ? `:content="content" fallback="${data.fallback}"` : "v-html=\"content\""
+		template: fallback ? `:content="content" ${computedFallback ? ":fallback=\"fallback\"" : `fallback="${fallback}"`}` : "v-html=\"content\""
 	};
 	const usedProps = getUsedFactoryProps(props);
 	if (usedProps.length) {
 		const tsCode = useTS ? `<{\n${stringifyFactoryPropTypes(props)}\n}>` : "";
 		componentCode.unshift(`const props = defineProps${tsCode}(${tsCode ? "" : JSON.stringify(usedProps)});\n`);
 	}
-	const template = `<template><${hasFallback ? "Icon" : "svg"} ${stringifyFactoryProps(props, ":{prop}=\"{value}\"")} /></template>`;
+	const template = `<template><${fallback ? "Icon" : "svg"} ${stringifyFactoryProps(props, ":{prop}=\"{value}\"")} /></template>`;
 	let content = `<script setup${useTS ? " lang=\"ts\"" : ""}>
 ${stringifyFactoryImports(imports)}
 ${componentCode.join("\n")}
@@ -96,7 +153,7 @@ ${componentCode.join("\n")}
 ${template}
 `;
 	const style = options.cssMode === "prop" ? styleContent : void 0;
-	if (styleContent && !style) content += `<style>\n${styleContent}\n</style>\n`;
+	if (styleContent && !style) content += `<style>\n${stringifyStylesheet(styleContent)}\n</style>\n`;
 	const types = addVueComponentTypes(data, options, assets, props);
 	return {
 		assets,

package/lib/css/find/animations.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Find used animation names in content
+ *
+ * This function is opinionated, it is designed to find animation names in typical CSS content, but it may not cover all edge cases.
+ * Assumes animation name uses only the following characters: a-z, 0-9, -, _ and starts with a letter.
+ *
+ * Might return false positives
+ */
+declare function findUsedKeyframes(content: string): string[];
+export { findUsedKeyframes };

package/lib/css/find/animations.js

@@ -0,0 +1,35 @@
+import { findCSSPropertyValues } from "./prop.js";
+
+const reservedAnimationNames = new Set([
+	"none",
+	"inherit",
+	"initial",
+	"revert",
+	"revert-layer",
+	"forwards",
+	"infinite",
+	"unset",
+	"linear",
+	"ease",
+	"ease-in",
+	"ease-out",
+	"ease-in-out"
+]);
+/**
+* Find used animation names in content
+*
+* This function is opinionated, it is designed to find animation names in typical CSS content, but it may not cover all edge cases.
+* Assumes animation name uses only the following characters: a-z, 0-9, -, _ and starts with a letter.
+*
+* Might return false positives
+*/
+function findUsedKeyframes(content) {
+	const keyframes = /* @__PURE__ */ new Set();
+	findCSSPropertyValues(content, "animation-name").forEach((name) => keyframes.add(name));
+	findCSSPropertyValues(content, "animation").forEach((value) => {
+		value.split(/\s+/).filter((part) => !reservedAnimationNames.has(part) && part.match(/^[a-z]+[a-z0-9_-]*$/)).forEach((part) => keyframes.add(part));
+	});
+	return Array.from(keyframes);
+}
+
+export { findUsedKeyframes };

package/lib/css/find/classname.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Find class names in content
+ */
+declare function findUsedClassNames(content: string): string[];
+export { findUsedClassNames };

package/lib/css/find/classname.js

@@ -0,0 +1,14 @@
+import { splitClassName } from "../../classname/toggle.js";
+
+/**
+* Find class names in content
+*/
+function findUsedClassNames(content) {
+	const classNames = /* @__PURE__ */ new Set();
+	content.matchAll(/class=["']([^"']+)["']/g).forEach((match) => {
+		splitClassName(match[1]).forEach((className) => classNames.add(className));
+	});
+	return Array.from(classNames);
+}
+
+export { findUsedClassNames };

package/lib/css/find/prop.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Find all values of a CSS property in content
+ */
+declare function findCSSPropertyValues(content: string, property: string): string[];
+export { findCSSPropertyValues };