@cyberalien/svg-utils 1.1.4 → 1.2.0

package/lib/css/find/prop.js

@@ -0,0 +1,12 @@
+/**
+* Find all values of a CSS property in content
+*/
+function findCSSPropertyValues(content, property) {
+	const values = [];
+	content.matchAll(new RegExp(`${property}\\s*:\\s*([^;]+);`, "g")).forEach((match) => {
+		values.push(...match[1].split(",").map((part) => part.trim()));
+	});
+	return values;
+}
+
+export { findCSSPropertyValues };

package/lib/css/minify.d.ts

@@ -0,0 +1,2 @@
+declare function minifyCSS(value: string): string;
+export { minifyCSS };

package/lib/css/minify.js

@@ -0,0 +1,5 @@
+function minifyCSS(value) {
+	return value.replace(/\s+/g, " ").replace(/\s*([;:{}])\s*/g, "$1").replace(/;}/g, "}").trim();
+}
+
+export { minifyCSS };

package/lib/css/rules.d.ts

@@ -0,0 +1,10 @@
+import { CSSRules } from "./types.js";
+/**
+ * Split rules string into object
+ */
+declare function splitCSSRules(rules: CSSRules | string): CSSRules;
+/**
+ * Merge rules
+ */
+declare function mergeCSSRules(rules: CSSRules | string, oldRules?: CSSRules | string): CSSRules;
+export { mergeCSSRules, splitCSSRules };

package/lib/css/rules.js

@@ -0,0 +1,26 @@
+/**
+* Split rules string into object
+*/
+function splitCSSRules(rules) {
+	if (typeof rules === "string") {
+		const result = Object.create(null);
+		const parts = rules.split(";");
+		for (const part of parts) {
+			const [key, value] = part.split(":").map((s) => s.trim());
+			if (key && value) result[key] = value;
+		}
+		return result;
+	}
+	return rules;
+}
+/**
+* Merge rules
+*/
+function mergeCSSRules(rules, oldRules) {
+	return {
+		...splitCSSRules(oldRules || {}),
+		...splitCSSRules(rules)
+	};
+}
+
+export { mergeCSSRules, splitCSSRules };

package/lib/css/stringify.d.ts

@@ -7,8 +7,14 @@ declare function stringifyCSSRules(rules: CSSRules, depth?: number): string;
  * Stringify CSS selector with rules
  */
 declare function stringifyCSSSelector(selector: string, rules: string | CSSRules, depth?: number): string;
+/**
+ * Convert animation frames to CSS string
+ *
+ * Does not include @keyframes block, only the content
+ */
+declare function stringifyCSSAnimationFrames(keyframes: CSSKeyframes, depth?: number): string;
 /**
  * Stringify CSS keyframes
  */
-declare function stringifyCSSKeyframes(animationName: string, keyframes: CSSKeyframes, depth?: number): string;
-export { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector };
+declare function stringifyCSSKeyframes(animationName: string, keyframes: CSSKeyframes | string, depth?: number): string;
+export { stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector };

package/lib/css/stringify.js

@@ -17,15 +17,18 @@ function stringifyCSSRules(rules, depth = 1) {
 * Stringify CSS selector with rules
 */
 function stringifyCSSSelector(selector, rules, depth = 0) {
-	const content = typeof rules === "string" ? rules : stringifyCSSRules(rules, depth + 1);
+	const content = typeof rules === "string" ? indent(depth + 1) + rules + "\n" : stringifyCSSRules(rules, depth + 1);
 	if (!content.length) return "";
 	const tab = indent(depth);
 	return `${tab}${selector} {\n${content}${tab}}\n`;
 }
 /**
-* Stringify CSS keyframes
+* Convert animation frames to CSS string
+*
+* Does not include @keyframes block, only the content
 */
-function stringifyCSSKeyframes(animationName, keyframes, depth = 0) {
+function stringifyCSSAnimationFrames(keyframes, depth = 0) {
+	const lines = [];
 	const prop = keyframes.prop;
 	const values = /* @__PURE__ */ new Map();
 	keyframes.frames.forEach((frame) => {
@@ -34,13 +37,18 @@ function stringifyCSSKeyframes(animationName, keyframes, depth = 0) {
 		if (item) item.push(frame.time);
 		else values.set(css, [frame.time]);
 	});
-	const lines = [];
-	lines.push(`${indent(depth)}@keyframes ${animationName} {\n`);
 	values.forEach((times, css) => {
 		lines.push(`${indent(depth + 1)}${times.map((time) => `${(time * 100).toFixed(2).replace(/\.?0+$/, "")}%`).join(", ")} {\n${css}${indent(depth + 1)}}\n`);
 	});
-	lines.push("}\n");
-	return lines.join("");
+	return lines.join("").trim();
+}
+/**
+* Stringify CSS keyframes
+*/
+function stringifyCSSKeyframes(animationName, keyframes, depth = 0) {
+	const content = typeof keyframes === "string" ? keyframes : stringifyCSSAnimationFrames(keyframes, depth);
+	if (content.includes("@keyframes")) return content;
+	return `${indent(depth)}@keyframes ${animationName} {\n${indent(depth + 1)}${content}\n}\n`;
 }
 
-export { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector };
+export { stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector };

package/lib/css/stylesheet.d.ts

@@ -5,8 +5,6 @@ import { CSSGeneratedStylesheet, CSSRules } from "./types.js";
 declare function createEmptyStylesheet(): CSSGeneratedStylesheet;
 /**
  * Add generated selector to stylesheet
- *
- * If item exists, it will be overwritten. Class names should be hashed to avoid conflicts, so this should not cause issues.
  */
 declare function addGeneratedSelector(stylesheet: CSSGeneratedStylesheet, tree: string[], rules: CSSRules | string): void;
 /**

package/lib/css/stylesheet.js

@@ -1,4 +1,5 @@
 import { stringifyCSSKeyframes, stringifyCSSSelector } from "./stringify.js";
+import { mergeCSSRules } from "./rules.js";
 
 /**
 * Create empty stylesheet
@@ -11,17 +12,16 @@ function createEmptyStylesheet() {
 }
 /**
 * Add generated selector to stylesheet
-*
-* If item exists, it will be overwritten. Class names should be hashed to avoid conflicts, so this should not cause issues.
 */
 function addGeneratedSelector(stylesheet, tree, rules) {
+	tree = tree.filter((item, index) => item.startsWith("@") ? tree.indexOf(item) === index : true);
 	let parent = stylesheet.selectors;
 	for (let i = 0; i < tree.length; i++) {
 		const selector = tree[i];
 		if (!parent[selector]) parent[selector] = {};
 		const parentItem = parent[selector];
 		if (i === tree.length - 1) {
-			parentItem.rules = rules;
+			parentItem.rules = mergeCSSRules(rules, parentItem.rules);
 			return;
 		}
 		if (!parentItem.nested) parentItem.nested = Object.create(null);

package/lib/css/types.d.ts

@@ -28,6 +28,6 @@ interface CSSGeneratedSelector {
 type CSSGeneratedSelectors = Record<string, CSSGeneratedSelector>;
 interface CSSGeneratedStylesheet {
   selectors: CSSGeneratedSelectors;
-  keyframes: Record<string, CSSKeyframes>;
+  keyframes: Record<string, CSSKeyframes | string>;
 }
 export { CSSGeneratedSelector, CSSGeneratedSelectors, CSSGeneratedStylesheet, CSSHashOptions, CSSKeyframe, CSSKeyframes, CSSRules };

package/lib/helpers/data/compact.d.ts

@@ -0,0 +1,20 @@
+interface ContextItemData<T> {
+  parent: Record<string, unknown>;
+  key: string;
+  actualValue?: T;
+}
+interface ContextItem<T> {
+  map: Map<string, ContextItemData<T> | number>;
+  data: T[];
+}
+/**
+ * Create context item for minification
+ */
+declare function createCompactContext<T>(): ContextItem<T>;
+/**
+ * Minify item
+ *
+ * If value is not a string, set it in `actualValue` and string `value` for comparison
+ */
+declare function compactItem<T>(context: ContextItem<T>, stringifiedValue: string, parent: Record<string, unknown>, key: string, actualValue?: T): void;
+export { compactItem, createCompactContext };

package/lib/helpers/data/compact.js

@@ -0,0 +1,38 @@
+/**
+* Create context item for minification
+*/
+function createCompactContext() {
+	return {
+		map: /* @__PURE__ */ new Map(),
+		data: []
+	};
+}
+/**
+* Minify item
+*
+* If value is not a string, set it in `actualValue` and string `value` for comparison
+*/
+function compactItem(context, stringifiedValue, parent, key, actualValue) {
+	const { map, data } = context;
+	const existing = map.get(stringifiedValue);
+	if (typeof existing === "number") {
+		parent[key] = existing;
+		return;
+	}
+	const value = actualValue ?? stringifiedValue;
+	if (existing) {
+		const index = data.length;
+		data.push(value);
+		map.set(stringifiedValue, index);
+		parent[key] = index;
+		existing.parent[existing.key] = index;
+		return;
+	}
+	map.set(stringifiedValue, {
+		parent,
+		key
+	});
+	parent[key] = value;
+}
+
+export { compactItem, createCompactContext };

package/lib/helpers/data/expand.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Expand minified item
+ */
+declare function expandItem<T>(list: T[], parent: Record<string, unknown>, key: string): void;
+export { expandItem };

package/lib/helpers/data/expand.js

@@ -0,0 +1,9 @@
+/**
+* Expand minified item
+*/
+function expandItem(list, parent, key) {
+	const index = parent[key];
+	if (typeof index === "number" && list[index]) parent[key] = list[index];
+}
+
+export { expandItem };

package/lib/helpers/reduce-motion.d.ts

@@ -0,0 +1,2 @@
+declare const prefersReduceMotion = "@media not (prefers-reduced-motion)";
+export { prefersReduceMotion };

package/lib/helpers/reduce-motion.js

@@ -0,0 +1,3 @@
+const prefersReduceMotion = "@media not (prefers-reduced-motion)";
+
+export { prefersReduceMotion };

package/lib/index.d.ts

@@ -2,10 +2,15 @@ import { ClassProp, classProps, defaultClassProp } from "./classname/const.js";
 import { splitClassName, toggleClassName } from "./classname/toggle.js";
 import { HashContext, UniqueHashOptions, UniqueHashPartialOptions } from "./helpers/hash/types.js";
 import { CSSGeneratedSelector, CSSGeneratedSelectors, CSSGeneratedStylesheet, CSSHashOptions, CSSKeyframe, CSSKeyframes, CSSRules } from "./css/types.js";
+import { IconStatesAdvancedState, IconStatesAdvancedStateValues, IconStatesList, IconStatesSimpleState, IconStatesState } from "./svg-css/states/types.js";
+import { ExtendedSVGCSSIconClass, SVGCSSIcon, SVGCSSIconRules, SVGCSSStatefulIcon, SVGCSSStatefulIconRules } from "./svg-css/icon/types.js";
+import { IconFallbackAdvancedState, IconFallbackBooleanState, IconFallbackTemplate } from "./svg-css/states/fallback/types.js";
 import { ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions } from "./xml/types.js";
 import { BaseConvertSVGContentOptions, ConvertSVGContentOptions, ConvertedSVGContent } from "./svg-css/types.js";
 import { createCSSClassName } from "./css/hash.js";
-import { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
+import { minifyCSS } from "./css/minify.js";
+import { mergeCSSRules, splitCSSRules } from "./css/rules.js";
+import { stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
 import { addGeneratedSelector, createEmptyStylesheet, stringifyStylesheet } from "./css/stylesheet.js";
 import { createUniqueHashContext } from "./helpers/hash/context.js";
 import { hashString } from "./helpers/hash/hash.js";
@@ -27,4 +32,12 @@ import { changeSVGIDs } from "./svg/ids/change.js";
 import { createUniqueIDs } from "./svg/ids/unique.js";
 import { convertSVGRootToCSS } from "./svg-css/root.js";
 import { convertSVGContentToCSSRules } from "./svg-css/content.js";
-export { BaseConvertSVGContentOptions, CSSGeneratedSelector, CSSGeneratedSelectors, CSSGeneratedStylesheet, CSSHashOptions, CSSKeyframe, CSSKeyframes, CSSRules, ChangeIDResult, ClassProp, ComparisonKey, ConvertSVGContentOptions, ConvertedSVGContent, HashContext, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions, UniqueHashOptions, UniqueHashPartialOptions, UniqueIDOptions, addGeneratedSelector, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createEmptyStylesheet, createUniqueHashContext, createUniqueIDs, defaultClassProp, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyStylesheet, stringifyXMLContent, toggleClassName, uniquePromise };
+import { getIconFallback } from "./svg-css/states/fallback/stringify.js";
+import { getStatesFromKey } from "./svg-css/states/key.js";
+import { getObjectFromStates } from "./svg-css/states/object.js";
+import { getAdvancedStateDefaultValue, getStateValue } from "./svg-css/states/value.js";
+import { SVGCSSIconSet, SVGCSSIconSetClassData, SVGCSSIconSetIcon, SVGCSSIconSetSharedData } from "./svg-css/icon-set/types.js";
+import { getSVGCSSIconFromIconSet } from "./svg-css/icon-set/get.js";
+import { addIconToSVGCSSIconSet } from "./svg-css/icon-set/add.js";
+import { createEmptySVGCSSIconSet } from "./svg-css/icon-set/create.js";
+export { BaseConvertSVGContentOptions, CSSGeneratedSelector, CSSGeneratedSelectors, CSSGeneratedStylesheet, CSSHashOptions, CSSKeyframe, CSSKeyframes, CSSRules, ChangeIDResult, ClassProp, ComparisonKey, ConvertSVGContentOptions, ConvertedSVGContent, ExtendedSVGCSSIconClass, HashContext, IconFallbackAdvancedState, IconFallbackBooleanState, IconFallbackTemplate, IconStatesAdvancedState, IconStatesAdvancedStateValues, IconStatesList, IconStatesSimpleState, IconStatesState, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, SVGCSSIcon, SVGCSSIconRules, SVGCSSIconSet, SVGCSSIconSetClassData, SVGCSSIconSetIcon, SVGCSSIconSetSharedData, SVGCSSStatefulIcon, SVGCSSStatefulIconRules, StringifyXMLOptions, UniqueHashOptions, UniqueHashPartialOptions, UniqueIDOptions, addGeneratedSelector, addIconToSVGCSSIconSet, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createEmptySVGCSSIconSet, createEmptyStylesheet, createUniqueHashContext, createUniqueIDs, defaultClassProp, getAdvancedStateDefaultValue, getIconFallback, getObjectFromStates, getSVGCSSIconFromIconSet, getStateValue, getStatesFromKey, getUniqueHash, hashString, hashToString, iterateXMLContent, mergeCSSRules, minifyCSS, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitCSSRules, splitClassName, stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyStylesheet, stringifyXMLContent, toggleClassName, uniquePromise };

package/lib/index.js

@@ -11,7 +11,9 @@ import { iterateXMLContent } from "./xml/iterate.js";
 import { parseXMLContent } from "./xml/parse.js";
 import { stringifyXMLContent } from "./xml/stringify.js";
 import { createCSSClassName } from "./css/hash.js";
-import { stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
+import { stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector } from "./css/stringify.js";
+import { mergeCSSRules, splitCSSRules } from "./css/rules.js";
+import { minifyCSS } from "./css/minify.js";
 import { addGeneratedSelector, createEmptyStylesheet, stringifyStylesheet } from "./css/stylesheet.js";
 import { classProps, defaultClassProp } from "./classname/const.js";
 import { splitClassName, toggleClassName } from "./classname/toggle.js";
@@ -22,5 +24,12 @@ import { changeSVGIDs } from "./svg/ids/change.js";
 import { createUniqueIDs } from "./svg/ids/unique.js";
 import { convertSVGRootToCSS } from "./svg-css/root.js";
 import { convertSVGContentToCSSRules } from "./svg-css/content.js";
+import { getIconFallback } from "./svg-css/states/fallback/stringify.js";
+import { getStatesFromKey } from "./svg-css/states/key.js";
+import { getAdvancedStateDefaultValue, getStateValue } from "./svg-css/states/value.js";
+import { getObjectFromStates } from "./svg-css/states/object.js";
+import { getSVGCSSIconFromIconSet } from "./svg-css/icon-set/get.js";
+import { addIconToSVGCSSIconSet } from "./svg-css/icon-set/add.js";
+import { createEmptySVGCSSIconSet } from "./svg-css/icon-set/create.js";
 
-export { addGeneratedSelector, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createEmptyStylesheet, createUniqueHashContext, createUniqueIDs, defaultClassProp, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyStylesheet, stringifyXMLContent, toggleClassName, uniquePromise };
+export { addGeneratedSelector, addIconToSVGCSSIconSet, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createEmptySVGCSSIconSet, createEmptyStylesheet, createUniqueHashContext, createUniqueIDs, defaultClassProp, getAdvancedStateDefaultValue, getIconFallback, getObjectFromStates, getSVGCSSIconFromIconSet, getStateValue, getStatesFromKey, getUniqueHash, hashString, hashToString, iterateXMLContent, mergeCSSRules, minifyCSS, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitCSSRules, splitClassName, stringifyCSSAnimationFrames, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyStylesheet, stringifyXMLContent, toggleClassName, uniquePromise };

package/lib/svg-css/icon/css.d.ts

@@ -0,0 +1,25 @@
+import { CSSGeneratedStylesheet } from "../../css/types.js";
+import { SVGCSSIconRules, SVGCSSStatefulIconRules } from "./types.js";
+import { StatefulIconSelectorsContext } from "../states/selector/types.js";
+type StylesheetParam = CSSGeneratedStylesheet | ((selector: string) => CSSGeneratedStylesheet);
+/**
+ * Add styles for stateful icon to stylesheet
+ *
+ * If commonStylesheet is an object, all styles will be added to it and result
+ * will contain the same stylesheet for all classes.
+ *
+ * If commonStylesheet is not an object, styles will be separated into different
+ * stylesheets for classes and keyframes, which can be reused across icons.
+ */
+declare function renderStatefulSVGCSSIconStyle(icon: SVGCSSStatefulIconRules, context: StatefulIconSelectorsContext | null, commonStylesheet?: StylesheetParam): Record<string, CSSGeneratedStylesheet>;
+/**
+ * Add styles for icon to stylesheet
+ *
+ * If commonStylesheet is an object, all styles will be added to it and result
+ * will contain the same stylesheet for all classes.
+ *
+ * If commonStylesheet is not an object, styles will be separated into different
+ * stylesheets for classes and keyframes, which can be reused across icons.
+ */
+declare function renderSVGCSSIconStyle(icon: SVGCSSIconRules, commonStylesheet?: StylesheetParam): Record<string, CSSGeneratedStylesheet>;
+export { renderSVGCSSIconStyle, renderStatefulSVGCSSIconStyle };

package/lib/svg-css/icon/css.js

@@ -0,0 +1,57 @@
+import { addGeneratedSelector, createEmptyStylesheet } from "../../css/stylesheet.js";
+import { prefersReduceMotion } from "../../helpers/reduce-motion.js";
+import { getSelectorsForStateValues } from "../states/selector/parse.js";
+
+/**
+* Add styles for stateful icon to stylesheet
+*
+* If commonStylesheet is an object, all styles will be added to it and result
+* will contain the same stylesheet for all classes.
+*
+* If commonStylesheet is not an object, styles will be separated into different
+* stylesheets for classes and keyframes, which can be reused across icons.
+*/
+function renderStatefulSVGCSSIconStyle(icon, context, commonStylesheet = createEmptyStylesheet) {
+	const stylesheets = Object.create(null);
+	const getStylesheet = (className) => {
+		if (typeof commonStylesheet === "object") return commonStylesheet;
+		if (!stylesheets[className]) stylesheets[className] = commonStylesheet(className);
+		return stylesheets[className];
+	};
+	for (const className in icon.classes) addGeneratedSelector(getStylesheet(className), [`.${className}`], icon.classes[className]);
+	for (const className in icon.animations) addGeneratedSelector(getStylesheet(className), [prefersReduceMotion, `.${className}`], icon.animations[className]);
+	for (const keyframeName in icon.keyframes) getStylesheet(keyframeName).keyframes[keyframeName] = icon.keyframes[keyframeName];
+	if (context) for (const className in icon.statefulClasses) {
+		const baseClassName = `.${className}`;
+		const stylesheet = getStylesheet(className);
+		const classData = icon.statefulClasses[className];
+		if (classData.transition) addGeneratedSelector(getStylesheet(className), [prefersReduceMotion, baseClassName], classData.transition);
+		for (const stateKey in classData.stateRules) {
+			const selectors = getSelectorsForStateValues(context, stateKey);
+			if (selectors) for (const tree of selectors) addGeneratedSelector(stylesheet, [...tree, baseClassName], classData.stateRules[stateKey]);
+		}
+		for (const stateKey in classData.stateTransition) {
+			const selectors = getSelectorsForStateValues(context, stateKey);
+			if (selectors) for (const tree of selectors) addGeneratedSelector(stylesheet, [
+				prefersReduceMotion,
+				...tree,
+				baseClassName
+			], classData.stateTransition[stateKey]);
+		}
+	}
+	return stylesheets;
+}
+/**
+* Add styles for icon to stylesheet
+*
+* If commonStylesheet is an object, all styles will be added to it and result
+* will contain the same stylesheet for all classes.
+*
+* If commonStylesheet is not an object, styles will be separated into different
+* stylesheets for classes and keyframes, which can be reused across icons.
+*/
+function renderSVGCSSIconStyle(icon, commonStylesheet) {
+	return renderStatefulSVGCSSIconStyle(icon, null, commonStylesheet);
+}
+
+export { renderSVGCSSIconStyle, renderStatefulSVGCSSIconStyle };

package/lib/svg-css/icon/types.d.ts

@@ -0,0 +1,45 @@
+import { CSSKeyframes, CSSRules } from "../../css/types.js";
+import { IconViewBox } from "../../svg/viewbox/types.js";
+import { IconStatesList } from "../states/types.js";
+/**
+ * Main properties
+ */
+interface MainProps {
+  viewBox: IconViewBox | string;
+  fallback?: string;
+  content: string;
+}
+interface StatefulMainProps extends MainProps {
+  states?: IconStatesList;
+}
+/**
+ * CSS data
+ */
+interface SVGCSSIconRules {
+  classes?: Record<string, CSSRules | string>;
+  animations?: Record<string, CSSRules | string>;
+  keyframes?: Record<string, CSSKeyframes | string>;
+}
+/**
+ * Extended class interface for stateful icons
+ */
+interface ExtendedSVGCSSIconClass {
+  stateRules?: Record<string, CSSRules | string>;
+  transition?: CSSRules | string;
+  stateTransition?: Record<string, CSSRules | string>;
+}
+/**
+ * Stateful CSS data
+ */
+interface SVGCSSStatefulIconRules extends SVGCSSIconRules {
+  statefulClasses?: Record<string, ExtendedSVGCSSIconClass>;
+}
+/**
+ * Icon data
+ */
+interface SVGCSSIcon extends MainProps, SVGCSSIconRules {}
+/**
+ * Icon with states
+ */
+interface SVGCSSStatefulIcon extends StatefulMainProps, SVGCSSStatefulIconRules {}
+export { ExtendedSVGCSSIconClass, SVGCSSIcon, SVGCSSIconRules, SVGCSSStatefulIcon, SVGCSSStatefulIconRules };

package/lib/svg-css/icon/types.js

@@ -0,0 +1 @@
+export {  };

package/lib/svg-css/icon-set/add.d.ts

@@ -0,0 +1,7 @@
+import { SVGCSSIcon, SVGCSSStatefulIcon } from "../icon/types.js";
+import { SVGCSSIconSet } from "./types.js";
+/**
+ * Add icon to an icon set
+ */
+declare function addIconToSVGCSSIconSet(iconSet: SVGCSSIconSet, iconName: string, icon: SVGCSSIcon | SVGCSSStatefulIcon): void;
+export { addIconToSVGCSSIconSet };

package/lib/svg-css/icon-set/add.js

@@ -0,0 +1,52 @@
+import { stringifyCSSAnimationFrames, stringifyCSSRules } from "../../css/stringify.js";
+import { minifyCSS } from "../../css/minify.js";
+
+function minifyRules(value) {
+	return (value ? minifyCSS(typeof value === "string" ? value : stringifyCSSRules(value)) : void 0) || void 0;
+}
+function stringifyObject(data) {
+	if (data) {
+		const result = Object.create(null);
+		for (const key in data) result[key] = minifyCSS(typeof data[key] === "string" ? data[key] : stringifyCSSRules(data[key]));
+		return result;
+	}
+}
+/**
+* Add icon to an icon set
+*/
+function addIconToSVGCSSIconSet(iconSet, iconName, icon) {
+	iconSet.icons[iconName] = {
+		content: icon.content,
+		fallback: icon.fallback,
+		states: icon.states,
+		viewBox: icon.viewBox
+	};
+	const { classes, animations, statefulClasses, keyframes } = icon;
+	const classNames = new Set([...Object.keys(classes || {}), ...Object.keys(statefulClasses || {})]);
+	for (const className of classNames) if (!iconSet.classes?.[className]) {
+		const classData = {};
+		iconSet.classes = iconSet.classes || Object.create(null);
+		iconSet.classes[className] = classData;
+		const r = classes?.[className];
+		if (r) classData.r = minifyRules(r);
+		const a = animations?.[className];
+		if (a) classData.a = minifyRules(a);
+		const statefulClass = statefulClasses?.[className];
+		if (statefulClass) {
+			const { stateRules, transition, stateTransition } = statefulClass;
+			if (stateRules) classData.sr = stringifyObject(stateRules);
+			if (transition) classData.t = minifyRules(transition);
+			if (stateTransition) classData.st = stringifyObject(stateTransition);
+		}
+	}
+	if (keyframes) {
+		iconSet.keyframes = iconSet.keyframes || Object.create(null);
+		const iconSetKeyframes = iconSet.keyframes;
+		for (const keyframeName in keyframes) if (!iconSetKeyframes[keyframeName]) {
+			const value = keyframes[keyframeName];
+			iconSetKeyframes[keyframeName] = typeof value === "string" ? value : minifyCSS(stringifyCSSAnimationFrames(value));
+		}
+	}
+}
+
+export { addIconToSVGCSSIconSet };

package/lib/svg-css/icon-set/create.d.ts

@@ -0,0 +1,6 @@
+import { SVGCSSIconSet } from "./types.js";
+/**
+ * Create an empty icon set
+ */
+declare function createEmptySVGCSSIconSet(): SVGCSSIconSet;
+export { createEmptySVGCSSIconSet };

package/lib/svg-css/icon-set/create.js

@@ -0,0 +1,8 @@
+/**
+* Create an empty icon set
+*/
+function createEmptySVGCSSIconSet() {
+	return { icons: Object.create(null) };
+}
+
+export { createEmptySVGCSSIconSet };

package/lib/svg-css/icon-set/get.d.ts

@@ -0,0 +1,4 @@
+import { SVGCSSIcon, SVGCSSStatefulIcon } from "../icon/types.js";
+import { SVGCSSIconSet } from "./types.js";
+declare function getSVGCSSIconFromIconSet(iconSet: SVGCSSIconSet, name: string): SVGCSSIcon | SVGCSSStatefulIcon | undefined;
+export { getSVGCSSIconFromIconSet };

package/lib/svg-css/icon-set/get.js

@@ -0,0 +1,92 @@
+import { findUsedKeyframes } from "../../css/find/animations.js";
+import { findUsedClassNames } from "../../css/find/classname.js";
+import { expandSVGCSSIconSetClass } from "./minify/expand.js";
+
+function getSVGCSSIconFromIconSet(iconSet, name) {
+	const fullName = iconSet.aliases?.[name] || name;
+	const data = iconSet.icons[fullName];
+	if (!data) return;
+	const { viewBoxes, css, fallbackPrefix = "", fallbackSuffix = "" } = iconSet;
+	let viewBox = data.viewBox;
+	if (typeof viewBox === "number") viewBox = viewBoxes?.[viewBox];
+	if (!viewBox) return;
+	let states = data.states;
+	if (typeof states === "number") states = iconSet.statesList?.[states];
+	const content = data.content;
+	const classNames = findUsedClassNames(content);
+	const classes = Object.create(null);
+	const animations = Object.create(null);
+	const statefulClasses = Object.create(null);
+	const cssLines = [];
+	classNames.forEach((className) => {
+		const classContent = iconSet.classes?.[className];
+		if (classContent) {
+			if (css) expandSVGCSSIconSetClass(css, classContent);
+			const { r, a, t, sr, st } = classContent;
+			const statefulClass = Object.create(null);
+			if (r) {
+				classes[className] = r;
+				cssLines.push(r);
+			}
+			if (a) {
+				animations[className] = a;
+				cssLines.push(a);
+			}
+			if (sr) {
+				const stateRules = Object.create(null);
+				statefulClass.stateRules = stateRules;
+				for (const state in sr) {
+					stateRules[state] = sr[state];
+					cssLines.push(sr[state]);
+				}
+			}
+			if (t) {
+				statefulClass.transition = t;
+				cssLines.push(t);
+			}
+			if (st) {
+				const stateTransition = Object.create(null);
+				statefulClass.stateTransition = stateTransition;
+				for (const state in st) {
+					stateTransition[state] = st[state];
+					cssLines.push(st[state]);
+				}
+			}
+			for (const key in statefulClass) {
+				statefulClasses[className] = statefulClass;
+				break;
+			}
+		}
+	});
+	const keyframes = Object.create(null);
+	if (iconSet.keyframes) findUsedKeyframes(cssLines.join(";")).forEach((animationName) => {
+		const keyframeContent = iconSet.keyframes[animationName];
+		if (keyframeContent) keyframes[animationName] = keyframeContent;
+	});
+	const result = {
+		content,
+		viewBox,
+		states,
+		fallback: typeof data.fallback === "string" ? `${fallbackPrefix}${data.fallback}${fallbackSuffix}` : void 0
+	};
+	let _key;
+	for (_key in classes) {
+		result.classes = classes;
+		break;
+	}
+	for (_key in animations) {
+		result.animations = animations;
+		break;
+	}
+	for (_key in keyframes) {
+		result.keyframes = keyframes;
+		break;
+	}
+	for (_key in statefulClasses) {
+		result.statefulClasses = statefulClasses;
+		break;
+	}
+	return result;
+}
+
+export { getSVGCSSIconFromIconSet };

package/lib/svg-css/icon-set/minify/expand.d.ts

@@ -0,0 +1,10 @@
+import { SVGCSSIconSet, SVGCSSIconSetClassData } from "../types.js";
+/**
+ * Expand class content from icon set
+ */
+declare function expandSVGCSSIconSetClass(css: Required<SVGCSSIconSet>['css'], classContent: SVGCSSIconSetClassData): void;
+/**
+ * Unminify icon set
+ */
+declare function expandSVGCSSIconSet(iconSet: SVGCSSIconSet): void;
+export { expandSVGCSSIconSet, expandSVGCSSIconSetClass };