@cyberalien/svg-utils 1.1.5 → 1.2.0

package/lib/svg-css/states/fallback/stringify.js

@@ -1,8 +1,9 @@
 /**
 * Generate fallback string from template and states
 */
-function getIconFallback(template, values) {
-	return template.map((chunk) => typeof chunk === "string" ? chunk : "values" in chunk ? chunk.values[+!!values[chunk.state]] : values[chunk.state]).join("");
+function getIconFallback(template, values, defaultValues) {
+	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("");
 }
 
 export { getIconFallback };

package/lib/svg-css/states/fallback/test.d.ts

@@ -1,5 +1,5 @@
-import { IconFallbackTemplate } from "./types.js";
 import { IconStatesList } from "../types.js";
+import { IconFallbackTemplate } from "./types.js";
 /**
  * Parse and test fallback template string
  *

package/lib/svg-css/states/validate.d.ts

@@ -0,0 +1,6 @@
+import { IconStatesList } from "./types.js";
+/**
+ * Validates states list to avoid issues when generating icons
+ */
+declare function assertValidStatesList(list: IconStatesList): void;
+export { assertValidStatesList };

package/lib/svg-css/states/validate.js

@@ -0,0 +1,55 @@
+const reservedStateNames = new Set([
+	"constructor",
+	"class",
+	"in",
+	"of",
+	"if",
+	"for",
+	"while",
+	"switch",
+	"case",
+	"break",
+	"continue",
+	"default",
+	"do",
+	"else",
+	"finally",
+	"return",
+	"throw",
+	"try",
+	"catch",
+	"with",
+	"yield",
+	"async",
+	"await",
+	"static",
+	"using",
+	"function",
+	"var",
+	"let",
+	"const",
+	"this",
+	"import",
+	"export",
+	"props",
+	"classname",
+	"viewbox",
+	"fallback",
+	"states",
+	"width",
+	"height",
+	"size",
+	"square"
+]);
+/**
+* Validates states list to avoid issues when generating icons
+*/
+function assertValidStatesList(list) {
+	for (const state of list) {
+		const stateName = typeof state === "string" ? state : state[0];
+		if (!stateName.match(/^[a-z$]+$/)) throw new Error(`Invalid state name "${stateName}".`);
+		if (reservedStateNames.has(stateName)) throw new Error(`State name "${stateName}" is reserved to avoid conflicts and cannot be used.`);
+	}
+}
+
+export { assertValidStatesList };

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.1.5",
+  "version": "1.2.0",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",
@@ -23,15 +23,15 @@
     "@iconify/types": "^2.0.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.3",
-    "@eslint/js": "^9.39.2",
+    "@eslint/eslintrc": "^3.3.4",
+    "@eslint/js": "^9.39.3",
     "@iconify-json/ri": "^1.2.10",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.55.0",
-    "@typescript-eslint/parser": "^8.55.0",
-    "eslint": "^9.39.2",
-    "globals": "^17.3.0",
+    "@types/node": "^25.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "eslint": "^9.39.3",
+    "globals": "^17.4.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"

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

@@ -1,7 +0,0 @@
-/**
- * Generate import name for CSS module
- *
- * Should be cleaned up because dashes are not allowed
- */
-declare function generateCSSDefaultImportName(className: string): string;
-export { generateCSSDefaultImportName };

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

@@ -1,12 +0,0 @@
-import { camelize } from "../../../helpers/misc/strings.js";
-
-/**
-* Generate import name for CSS module
-*
-* Should be cleaned up because dashes are not allowed
-*/
-function generateCSSDefaultImportName(className) {
-	return camelize("css-" + className);
-}
-
-export { generateCSSDefaultImportName };

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

@@ -1,13 +0,0 @@
-import { CSSGeneratedStylesheet } from "../../../css/types.js";
-import { SVGCSSIcon } from "../types.js";
-/**
- * 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: SVGCSSIcon, commonStylesheet?: CSSGeneratedStylesheet | ((selector: string) => CSSGeneratedStylesheet)): Record<string, CSSGeneratedStylesheet>;
-export { renderSVGCSSIconStyle };

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

@@ -1,26 +0,0 @@
-import { addGeneratedSelector, createEmptyStylesheet } from "../../../css/stylesheet.js";
-import { prefersReduceMotion } from "../../../helpers/reduce-motion.js";
-
-/**
-* 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 = 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];
-	return stylesheets;
-}
-
-export { renderSVGCSSIconStyle };

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

@@ -1,14 +0,0 @@
-import { CSSGeneratedStylesheet } from "../../../css/types.js";
-import { SVGCSSStatefulIcon } from "../types.js";
-import { StatefulIconSelectorsContext } from "../../states/selector/types.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.
- */
-declare function renderStatefulSVGCSSIconStyle(icon: SVGCSSStatefulIcon, context: StatefulIconSelectorsContext, commonStylesheet?: CSSGeneratedStylesheet | ((selector: string) => CSSGeneratedStylesheet)): Record<string, CSSGeneratedStylesheet>;
-export { renderStatefulSVGCSSIconStyle };