@cyberalien/svg-utils 1.0.9 → 1.0.11

package/lib/index.d.ts

@@ -2,7 +2,7 @@ import { ClassProp, classProps, defaultClassProp } from "./classname/const.js";
 import { splitClassName, toggleClassName } from "./classname/toggle.js";
 import { UniqueHashOptions } from "./helpers/hash/types.js";
 import { ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions } from "./xml/types.js";
-import { ConvertSVGContentOptions, ConvertedSVGContent } from "./svg-css/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 { hashString } from "./helpers/hash/hash.js";
@@ -24,4 +24,4 @@ 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 { ChangeIDResult, ClassProp, ComparisonKey, ConvertSVGContentOptions, ConvertedSVGContent, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions, UniqueHashOptions, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName, uniquePromise };
+export { BaseConvertSVGContentOptions, ChangeIDResult, ClassProp, ComparisonKey, ConvertSVGContentOptions, ConvertedSVGContent, ParsedXMLNode, ParsedXMLTagElement, ParsedXMLTextElement, StringifyXMLOptions, UniqueHashOptions, changeIDInString, changeSVGIDs, classProps, cloneObject, compareKeys, compareSets, compareValues, convertSVGContentToCSSRules, convertSVGRootToCSS, createCSSClassName, createUniqueIDs, defaultClassProp, getUniqueHash, hashString, hashToString, iterateXMLContent, parseXMLContent, removeDuplicateIDs, removeUnusedIDs, sortObject, splitClassName, stringifyCSSKeyframes, stringifyCSSRules, stringifyCSSSelector, stringifyXMLContent, toggleClassName, uniquePromise };

package/lib/svg-css/animations/attribute.d.ts

@@ -0,0 +1,11 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+import { getSVGPropertyType } from "../props/prop.js";
+interface CheckResult {
+  attributeName: string;
+  type: ReturnType<typeof getSVGPropertyType>;
+}
+/**
+ * Get animated attribute name and type
+ */
+declare function getAnimatedAttributeData(node: ParsedXMLTagElement, stack: ParsedXMLTagElement[], supportLegacyBrowsers?: boolean): undefined | CheckResult;
+export { getAnimatedAttributeData };

package/lib/svg-css/animations/attribute.js

@@ -0,0 +1,19 @@
+import { getSVGPropertyType } from "../props/prop.js";
+
+/**
+* Get animated attribute name and type
+*/
+function getAnimatedAttributeData(node, stack, supportLegacyBrowsers) {
+	const parentNode = stack[stack.length - 1];
+	if (!parentNode) return;
+	const parentTag = parentNode.tag;
+	const attributeName = node.attribs.attributeName;
+	if (typeof attributeName !== "string") return;
+	const type = getSVGPropertyType(parentTag, attributeName, supportLegacyBrowsers);
+	return type ? {
+		attributeName,
+		type
+	} : void 0;
+}
+
+export { getAnimatedAttributeData };

package/lib/svg-css/animations/common.d.ts

@@ -0,0 +1,8 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+/**
+ * Check for common failures
+ *
+ * Returns true on success
+ */
+declare function checkAnimationTagForCompatibility(node: ParsedXMLTagElement): boolean | undefined;
+export { checkAnimationTagForCompatibility };

package/lib/svg-css/animations/common.js

@@ -0,0 +1,16 @@
+const supportedValues = {
+	additive: "replace",
+	accumulate: "none"
+};
+/**
+* Check for common failures
+*
+* Returns true on success
+*/
+function checkAnimationTagForCompatibility(node) {
+	if (node.children.length) return;
+	const attribs = node.attribs;
+	for (const attr in supportedValues) if (attribs[attr] && attribs[attr] !== supportedValues[attr]) return;
+}
+
+export { checkAnimationTagForCompatibility };

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

@@ -0,0 +1,9 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+import { FindSVGAnimationsOptions, SVGAnimationsContext } from "./types.js";
+/**
+ * Find all animations in SVG tree
+ *
+ * @todo Implement this
+ */
+declare function findAnimationsInSVGTree(root: ParsedXMLTagElement[], options: FindSVGAnimationsOptions): SVGAnimationsContext;
+export { findAnimationsInSVGTree };

package/lib/svg-css/animations/find.js

@@ -0,0 +1,48 @@
+import { iterateXMLContent } from "../../xml/iterate.js";
+import { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgSetTag } from "./tags.js";
+import { getAnimatedAttributeData } from "./attribute.js";
+import { checkAnimationTagForCompatibility } from "./common.js";
+
+/**
+* Find all animations in SVG tree
+*
+* @todo Implement this
+*/
+function findAnimationsInSVGTree(root, options) {
+	const animatedProperties = /* @__PURE__ */ new Map();
+	let failed = false;
+	const context = {
+		failed,
+		animatedProperties
+	};
+	iterateXMLContent(root, (node, stack) => {
+		if (context.failed || node.type !== "tag") return;
+		switch (node.tag) {
+			case svgAnimateMotionTag:
+				failed = true;
+				return "abort";
+			case svgAnimateTransformTag:
+				if (!checkAnimationTagForCompatibility(node)) {
+					failed = true;
+					return "abort";
+				}
+				failed = true;
+				return "abort";
+			case svgSetTag:
+			case svgAnimationTag:
+				if (!checkAnimationTagForCompatibility(node)) {
+					failed = true;
+					return "abort";
+				}
+				break;
+			default: return;
+		}
+		if (!getAnimatedAttributeData(node, stack, options.supportLegacyBrowsers)) {
+			failed = true;
+			return "abort";
+		}
+	});
+	return failed ? { failed: true } : context;
+}
+
+export { findAnimationsInSVGTree };

package/lib/svg-css/animations/tags.d.ts

@@ -1,7 +1,11 @@
 /**
- * Tags for animating one attribute in SVG
+ * Tag used to set attribute value without animation duration
  */
-declare const svgSimpleAnimationTags: string[];
+declare const svgSetTag = "set";
+/**
+ * Attribute animation tag
+ */
+declare const svgAnimationTag = "animate";
 /**
  * Tag for animating transformations in SVG
  */
@@ -14,4 +18,4 @@ declare const svgAnimateMotionTag = "animateMotion";
  * All tags for animating SVG
  */
 declare const svgAnimationTags: string[];
-export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTags, svgSimpleAnimationTags };
+export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgAnimationTags, svgSetTag };

package/lib/svg-css/animations/tags.js

@@ -1,11 +1,11 @@
 /**
-* Tags for animating one attribute in SVG
+* Tag used to set attribute value without animation duration
 */
-const svgSimpleAnimationTags = [
-	"animate",
-	"set",
-	"discard"
-];
+const svgSetTag = "set";
+/**
+* Attribute animation tag
+*/
+const svgAnimationTag = "animate";
 /**
 * Tag for animating transformations in SVG
 */
@@ -18,9 +18,10 @@ const svgAnimateMotionTag = "animateMotion";
 * All tags for animating SVG
 */
 const svgAnimationTags = [
-	...svgSimpleAnimationTags,
+	svgSetTag,
+	svgAnimationTag,
 	svgAnimateTransformTag,
 	svgAnimateMotionTag
 ];
 
-export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTags, svgSimpleAnimationTags };
+export { svgAnimateMotionTag, svgAnimateTransformTag, svgAnimationTag, svgAnimationTags, svgSetTag };

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

@@ -0,0 +1,19 @@
+import { ParsedXMLTagElement } from "../../xml/types.js";
+/**
+ * SVG animations context
+ */
+interface FailedSVGAnimationsContext {
+  failed: true;
+}
+interface SuccessfulSVGAnimationsContext {
+  failed: false;
+  animatedProperties: Map<ParsedXMLTagElement, Set<string>>;
+}
+type SVGAnimationsContext = FailedSVGAnimationsContext | SuccessfulSVGAnimationsContext;
+/**
+ * Options for finding animations in SVG tree
+ */
+interface FindSVGAnimationsOptions {
+  supportLegacyBrowsers?: boolean;
+}
+export { FindSVGAnimationsOptions, SVGAnimationsContext };

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

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

package/lib/svg-css/content.js

@@ -8,7 +8,7 @@ import { convertSVGRootToCSS } from "./root.js";
 function convertSVGContentToCSSRules(content, options) {
 	const root = parseXMLContent(content);
 	if (!root) return { content };
-	const classes = convertSVGRootToCSS(root, options?.classNamePrefix, options?.hashOptions);
+	const classes = convertSVGRootToCSS(root, options);
 	if (classes) {
 		const newContent = stringifyXMLContent(root, options);
 		if (newContent) return {

package/lib/svg-css/props/prop.d.ts

@@ -1,5 +1,14 @@
+/**
+ * SVG property types
+ */
+declare const propTypes: readonly ["path", "px", "raw"];
+type SVGPropertyType = (typeof propTypes)[number];
+/**
+ * Get property type
+ */
+declare function getSVGPropertyType(tag: string, prop: string, supportLegacyBrowsers?: boolean): SVGPropertyType | undefined;
 /**
  * Convert property to CSS
  */
-declare function convertSVGPropertyToCSS(tag: string, prop: string, value: string | number): [string, string] | undefined;
-export { convertSVGPropertyToCSS };
+declare function convertSVGPropertyToCSS(tag: string, prop: string, value: string | number, supportLegacyBrowsers?: boolean): [string, string] | undefined;
+export { convertSVGPropertyToCSS, getSVGPropertyType };

package/lib/svg-css/props/prop.js

@@ -46,19 +46,21 @@ const skipTags = [
 	"set",
 	"discard"
 ];
+const legacyProps = ["d"];
 /**
 * Get property type
 */
-function getSVGPropertyType(tag, prop) {
+function getSVGPropertyType(tag, prop, supportLegacyBrowsers = false) {
 	if (skipTags.includes(tag)) return;
+	if (supportLegacyBrowsers && legacyProps.includes(prop)) return;
 	for (const type of propTypes) if (props[tag]?.[type]?.includes(prop) || props["*"]?.[type]?.includes(prop)) return type;
 	if (prop.startsWith("stroke") || prop.startsWith("fill")) return "raw";
 }
 /**
 * Convert property to CSS
 */
-function convertSVGPropertyToCSS(tag, prop, value) {
-	switch (getSVGPropertyType(tag, prop)) {
+function convertSVGPropertyToCSS(tag, prop, value, supportLegacyBrowsers = false) {
+	switch (getSVGPropertyType(tag, prop, supportLegacyBrowsers)) {
 		case "path":
 			if (typeof value !== "string") return;
 			return [prop, `path("${value.replace(/\s+/g, " ")}")`];
@@ -71,4 +73,4 @@ function convertSVGPropertyToCSS(tag, prop, value) {
 	}
 }
 
-export { convertSVGPropertyToCSS };
+export { convertSVGPropertyToCSS, getSVGPropertyType };

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

@@ -5,5 +5,5 @@ import { SVGConvertedToCSSProperties } from "./types.js";
  *
  * Returns CSS rules, does not add a class to tag, but does remove properties from tag
  */
-declare function extractSVGTagPropertiesForCSS(tag: ParsedXMLTagElement): SVGConvertedToCSSProperties | undefined;
+declare function extractSVGTagPropertiesForCSS(tag: ParsedXMLTagElement, supportLegacyBrowsers?: boolean): SVGConvertedToCSSProperties | undefined;
 export { extractSVGTagPropertiesForCSS };

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

@@ -1,30 +1,34 @@
 import { iterateXMLContent } from "../../xml/iterate.js";
 import { convertSVGPropertyToCSS } from "./prop.js";
-import { svgAnimateTransformTag, svgSimpleAnimationTags } from "../animations/tags.js";
+import { svgAnimateTransformTag, svgAnimationTag, svgSetTag } from "../animations/tags.js";
 
 /**
 * Extract SVG tag properties that can be converted to CSS
 *
 * Returns CSS rules, does not add a class to tag, but does remove properties from tag
 */
-function extractSVGTagPropertiesForCSS(tag) {
+function extractSVGTagPropertiesForCSS(tag, supportLegacyBrowsers = false) {
 	const result = {
 		props: [],
 		rules: Object.create(null)
 	};
 	const animatedProps = /* @__PURE__ */ new Set();
 	iterateXMLContent(tag.children, (node) => {
-		if (node.type === "tag") {
-			if (svgSimpleAnimationTags.includes(node.tag)) {
+		if (node.type === "tag") switch (node.tag) {
+			case svgSetTag:
+			case svgAnimationTag: {
 				const prop = node.attribs.attributeName;
 				if (typeof prop === "string") animatedProps.add(prop);
+				break;
 			}
-			if (node.tag === svgAnimateTransformTag) animatedProps.add("transform");
+			case svgAnimateTransformTag:
+				animatedProps.add("transform");
+				break;
 		}
 	});
 	for (const prop in tag.attribs) if (!animatedProps.has(prop)) {
 		const value = tag.attribs[prop];
-		const converted = convertSVGPropertyToCSS(tag.tag, prop, value);
+		const converted = convertSVGPropertyToCSS(tag.tag, prop, value, supportLegacyBrowsers);
 		if (converted) {
 			const [propName, propValue] = converted;
 			result.props.push(propName);

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

@@ -1,9 +1,10 @@
-import { CSSHashOptions, CSSRules } from "../css/types.js";
+import { CSSRules } from "../css/types.js";
 import { ParsedXMLTagElement } from "../xml/types.js";
+import { BaseConvertSVGContentOptions } from "./types.js";
 /**
  * Convert SVG tags tree to SVG+CSS
  *
  * Returns used CSS class names with rules
  */
-declare function convertSVGRootToCSS(root: ParsedXMLTagElement[], classNamePrefix?: string, hashOptions?: CSSHashOptions): Record<string, CSSRules>;
+declare function convertSVGRootToCSS(root: ParsedXMLTagElement[], options?: BaseConvertSVGContentOptions): Record<string, CSSRules>;
 export { convertSVGRootToCSS };

package/lib/svg-css/root.js

@@ -8,11 +8,13 @@ import { extractSVGTagPropertiesForCSS } from "./props/props.js";
 *
 * Returns used CSS class names with rules
 */
-function convertSVGRootToCSS(root, classNamePrefix = "", hashOptions) {
+function convertSVGRootToCSS(root, options = {}) {
 	const rules = Object.create(null);
+	const hashOptions = options.hashOptions || {};
+	const classNamePrefix = options.classNamePrefix || "";
 	iterateXMLContent(root, (node) => {
 		if (node.type === "tag") {
-			const props = extractSVGTagPropertiesForCSS(node);
+			const props = extractSVGTagPropertiesForCSS(node, options.legacy);
 			if (props) {
 				const className = createCSSClassName(props.rules, classNamePrefix, hashOptions);
 				toggleClassName(node.attribs, className, true);

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

@@ -1,12 +1,17 @@
 import { CSSHashOptions, CSSKeyframes, CSSRules } from "../css/types.js";
 import { StringifyXMLOptions } from "../xml/types.js";
 /**
- * Options for converting SVG content to SVG+CSS
+ * Options for converting SVG tags to SVG+CSS
  */
-interface ConvertSVGContentOptions extends StringifyXMLOptions {
+interface BaseConvertSVGContentOptions {
   classNamePrefix?: string;
   hashOptions?: CSSHashOptions;
+  legacy?: boolean;
 }
+/**
+ * Options for converting SVG content to SVG+CSS
+ */
+interface ConvertSVGContentOptions extends StringifyXMLOptions, BaseConvertSVGContentOptions {}
 /**
  * Result of converting SVG content to SVG+CSS
  */
@@ -15,4 +20,4 @@ interface ConvertedSVGContent {
   classes?: Record<string, CSSRules>;
   keyframes?: Record<string, CSSKeyframes>;
 }
-export { ConvertSVGContentOptions, ConvertedSVGContent };
+export { BaseConvertSVGContentOptions, ConvertSVGContentOptions, ConvertedSVGContent };

package/lib/xml/stringify.d.ts

@@ -1,6 +1,6 @@
-import { ParsedXMLTagElement, StringifyXMLOptions } from "./types.js";
+import { ParsedXMLNode, StringifyXMLOptions } from "./types.js";
 /**
  * Convert parsed XML content to string
  */
-declare function stringifyXMLContent(root: ParsedXMLTagElement[], options?: StringifyXMLOptions): string | null;
+declare function stringifyXMLContent(root: ParsedXMLNode[], options?: StringifyXMLOptions): string | null;
 export { stringifyXMLContent };

package/lib/xml/stringify.js

@@ -18,6 +18,10 @@ function stringifyXMLContent(root, options) {
 	const tabs = (length) => tab.repeat(length);
 	const nl = prettyPrint === false ? "" : "\n";
 	const add = (node, depth) => {
+		if (node.type !== "tag") {
+			output += node.content;
+			return true;
+		}
 		output += tabs(depth) + "<" + node.tag;
 		for (const key in node.attribs) {
 			const value = node.attribs[key];
@@ -31,7 +35,7 @@ function stringifyXMLContent(root, options) {
 			}
 		}
 		if (!node.children.length) {
-			if (fullOptions.useSelfClosing) output += " />" + nl;
+			if (fullOptions.useSelfClosing) output += (prettyPrint ? " " : "") + "/>" + nl;
 			else output += "></" + node.tag + ">" + nl;
 			return true;
 		}

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "Common functions for working with SVG used by various packages.",
   "author": "Vjacheslav Trushkin",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",