@cyberalien/svg-utils 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,17 @@
+# SVG Utils
+
+Common functions for working with SVG used by various packages.
+
+Usable in any environment.
+
+The only dependency is types package with TypeScript definition.
+
+## Documentation
+
+n/a
+
+## License
+
+The library is released with MIT license.
+
+© 2025-PRESENT Vjacheslav Trushkin

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

@@ -3,7 +3,7 @@ import { ComponentFactorySource } from "../../types/source.js";
 import { ComponentFactoryOptions } from "../../types/options.js";
 import { FactoryComponentImports } from "../imports/types.js";
 interface Options extends Pick<ComponentFactoryOptions, 'cssMode' | 'cssPath' | 'doubleDirsForCSS' | 'mergeCSS'> {
-  styleInComponent?: boolean;
+  styleInComponent?: boolean | 'svelte';
 }
 /**
  * Generate CSS files for component

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

@@ -14,14 +14,16 @@ function generateCSSFilesForComponent(content, imports, assets, options) {
 	const styleInComponent = (!isModule && options.styleInComponent) ?? false;
 	const mergeCSS = (styleInComponent || options.mergeCSS) ?? false;
 	const embedAnimations = isModule && !mergeCSS;
+	const classNamePrefix = styleInComponent === "svelte" ? ":global " : "";
+	const keyframesPrefix = styleInComponent === "svelte" ? "-global-" : "";
 	const mergedContent = [];
 	for (const className in classes) {
-		const baseContent = stringifyCSSSelector(`.${className}`, classes[className]);
+		const baseContent = stringifyCSSSelector(`${classNamePrefix}.${className}`, classes[className]);
 		let content$1 = baseContent;
 		if (embedAnimations && keyframes) {
 			for (const animationName in keyframes) if (baseContent.includes(animationName)) {
 				const value = keyframes[animationName];
-				content$1 += "\n" + (typeof value === "string" ? value : stringifyCSSKeyframes(animationName, value));
+				content$1 += "\n" + (typeof value === "string" ? value : stringifyCSSKeyframes(keyframesPrefix + animationName, value));
 			}
 		}
 		if (mergeCSS) {
@@ -38,7 +40,7 @@ function generateCSSFilesForComponent(content, imports, assets, options) {
 	}
 	if (!embedAnimations && keyframes) for (const animationName in keyframes) {
 		const value = keyframes[animationName];
-		const content$1 = typeof value === "string" ? value : stringifyCSSKeyframes(animationName, value);
+		const content$1 = typeof value === "string" ? value : stringifyCSSKeyframes(keyframesPrefix + animationName, value);
 		if (mergeCSS) {
 			mergedContent.push(content$1);
 			continue;

package/lib/components/svelte.js

@@ -17,7 +17,7 @@ import { getViewBoxRatio } from "./helpers/content/ratio.js";
 */
 function createSvelteComponent(data, options) {
 	const useTS = options.ts ?? false;
-	const styleInComponent = options.styles ?? false;
+	const styleInComponent = options.styles === true ? "svelte" : false;
 	const assets = [];
 	const imports = createFactoryImports();
 	const hasFallback = !!data.fallback;
@@ -93,7 +93,7 @@ ${componentCode.join("\n")}
 <\/script>
 ${template}
 `;
-	if (styleContent) content += `<style>\n:global {\n${styleContent}\n}\n</style>\n`;
+	if (styleContent) content += `<style>\n${styleContent}\n</style>\n`;
 	const types = addSvelteComponentTypes(data, options, assets, props);
 	return {
 		assets,

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.0",
+  "version": "1.0.1",
   "license": "MIT",
   "bugs": "https://github.com/cyberalien/svg-utils/issues",
   "homepage": "https://cyberalien.dev/",