svgfusion 1.13.0 → 1.14.0

package/dist/cli.js

@@ -80774,6 +80774,40 @@ var ColorSplittingFeature = class {
           newAttributes["stop-color"]
         )}}`;
       }
+      if (newAttributes.style) {
+        let updatedStyle = newAttributes.style;
+        const fillMatch = updatedStyle.match(/fill:\s*([^;]+)/);
+        if (fillMatch) {
+          const fillColor = fillMatch[1].trim();
+          if (colorMap.has(fillColor)) {
+            updatedStyle = updatedStyle.replace(
+              /fill:\s*[^;]+/,
+              `fill: {${colorMap.get(fillColor)}}`
+            );
+          }
+        }
+        const strokeMatch = updatedStyle.match(/stroke:\s*([^;]+)/);
+        if (strokeMatch) {
+          const strokeColor = strokeMatch[1].trim();
+          if (colorMap.has(strokeColor)) {
+            updatedStyle = updatedStyle.replace(
+              /stroke:\s*[^;]+/,
+              `stroke: {${colorMap.get(strokeColor)}}`
+            );
+          }
+        }
+        const stopColorMatch = updatedStyle.match(/stop-color:\s*([^;]+)/);
+        if (stopColorMatch) {
+          const stopColor = stopColorMatch[1].trim();
+          if (colorMap.has(stopColor)) {
+            updatedStyle = updatedStyle.replace(
+              /stop-color:\s*[^;]+/,
+              `stop-color: {${colorMap.get(stopColor)}}`
+            );
+          }
+        }
+        newAttributes.style = updatedStyle;
+      }
       if (this.isDrawableElement(el2.tag)) {
         const originalHadFill = el2.attributes.fill !== void 0 && el2.attributes.fill !== "";
         const originalHadStroke = el2.attributes.stroke !== void 0 && el2.attributes.stroke !== "";
@@ -80815,6 +80849,17 @@ var ColorSplittingFeature = class {
         attribute: "stop-color"
       });
     }
+    if (element.attributes.style) {
+      const styleColors = this.extractColorsFromStyle(element.attributes.style);
+      styleColors.forEach((color) => {
+        colors.push({
+          value: color.value,
+          type: color.type,
+          element,
+          attribute: "style"
+        });
+      });
+    }
     element.children.forEach((child) => this.traverseElement(child, colors));
   }
   /**
@@ -80883,6 +80928,34 @@ var ColorSplittingFeature = class {
     ];
     return namedColors.includes(color.toLowerCase());
   }
+  /**
+   * Extract colors from style attribute
+   */
+  extractColorsFromStyle(style) {
+    const colors = [];
+    const fillMatch = style.match(/fill:\s*([^;]+)/);
+    if (fillMatch) {
+      const fillColor = fillMatch[1].trim();
+      if (this.isValidColor(fillColor)) {
+        colors.push({ value: fillColor, type: "fill" });
+      }
+    }
+    const strokeMatch = style.match(/stroke:\s*([^;]+)/);
+    if (strokeMatch) {
+      const strokeColor = strokeMatch[1].trim();
+      if (this.isValidColor(strokeColor)) {
+        colors.push({ value: strokeColor, type: "stroke" });
+      }
+    }
+    const stopColorMatch = style.match(/stop-color:\s*([^;]+)/);
+    if (stopColorMatch) {
+      const stopColor = stopColorMatch[1].trim();
+      if (this.isValidColor(stopColor)) {
+        colors.push({ value: stopColor, type: "stop-color" });
+      }
+    }
+    return colors;
+  }
 };
 
 // src/features/stroke-fixing.ts
@@ -80925,12 +80998,6 @@ var StrokeFixingFeature = class {
     if (this.options.preserveExisting && element.attributes["vector-effect"]) {
       return false;
     }
-    if (this.options.onlyIfStrokePresent) {
-      const hasStroke = element.attributes.stroke && element.attributes.stroke !== "none" && element.attributes.stroke !== "transparent";
-      if (!hasStroke) {
-        return false;
-      }
-    }
     const strokeElements = [
       "path",
       "line",
@@ -81113,7 +81180,8 @@ var SVGTransformer = class {
    */
   applyFixedStrokeWidth(ast) {
     const strokeFixingFeature = new StrokeFixingFeature({
-      onlyIfStrokePresent: true,
+      onlyIfStrokePresent: false,
+      // Apply to all stroke-capable elements for consistent scaling
       preserveExisting: true
     });
     const result = strokeFixingFeature.apply(ast.root);
@@ -101496,14 +101564,26 @@ ${childrenJsx}
     const hasOriginalClass = "class" in attributes || "className" in attributes;
     Object.entries(attributes).forEach(([key2, value]) => {
       const jsxKey = toReactProp(key2);
-      if ((key2 === "fill" || key2 === "stroke") && value.startsWith("{") && value.endsWith("}")) {
+      if (key2 === "vector-effect" && value === "non-scaling-stroke") {
+        jsxAttributes.push(
+          `vectorEffect={isFixedStrokeWidth ? 'non-scaling-stroke' : undefined}`
+        );
+      } else if ((key2 === "fill" || key2 === "stroke") && value.startsWith("{") && value.endsWith("}")) {
         const colorVar = value.slice(1, -1);
         jsxAttributes.push(`${jsxKey}=${value}`);
         const classVar = `${colorVar}Class`;
         classNames.push(classVar);
       } else if (key2 === "style") {
         const styleObj = this.parseStyleString(value);
-        jsxAttributes.push(`style={${JSON.stringify(styleObj)}}`);
+        const styleEntries = Object.entries(styleObj).map(([prop, val]) => {
+          if (typeof val === "string" && val.startsWith("{") && val.endsWith("}")) {
+            const varName = val.slice(1, -1);
+            return `${prop}: ${varName}`;
+          } else {
+            return `${prop}: '${val}'`;
+          }
+        });
+        jsxAttributes.push(`style={{ ${styleEntries.join(", ")} }}`);
       } else {
         if (value.startsWith("{") && value.endsWith("}")) {
           jsxAttributes.push(`${jsxKey}=${value}`);
@@ -101668,7 +101748,14 @@ ${children}
     const classVars = [];
     const hasOriginalClass = "class" in attributes;
     Object.entries(attributes).forEach(([key2, value]) => {
-      if (value.startsWith("{") && value.endsWith("}")) {
+      if (key2 === "vector-effect" && value === "non-scaling-stroke") {
+        vueAttributes.push(
+          `:vector-effect="props.isFixedStrokeWidth ? 'non-scaling-stroke' : undefined"`
+        );
+      } else if (key2 === "style") {
+        const parsedStyle = this.parseStyleStringForVue(value);
+        vueAttributes.push(`:style="${parsedStyle}"`);
+      } else if (value.startsWith("{") && value.endsWith("}")) {
         const variableName = value.slice(1, -1);
         vueAttributes.push(`:${key2}="props.${variableName}"`);
         if (key2 === "fill" || key2 === "stroke") {
@@ -101879,6 +101966,28 @@ ${children}
   ${className}?: string;`;
     }).join("\n");
   }
+  /**
+   * Parse style string for Vue template syntax
+   */
+  parseStyleStringForVue(styleStr) {
+    const styleEntries = [];
+    styleStr.split(";").forEach((declaration) => {
+      const colonIndex = declaration.indexOf(":");
+      if (colonIndex > 0) {
+        const property = declaration.slice(0, colonIndex).trim();
+        const value = declaration.slice(colonIndex + 1).trim();
+        if (property && value) {
+          if (value.startsWith("{") && value.endsWith("}")) {
+            const variableName = value.slice(1, -1);
+            styleEntries.push(`'${property}': props.${variableName}`);
+          } else {
+            styleEntries.push(`'${property}': '${value}'`);
+          }
+        }
+      }
+    });
+    return `{ ${styleEntries.join(", ")} }`;
+  }
   /**
    * Generate SVG root attributes for Vue template
    */

package/dist/index.d.mts

@@ -348,6 +348,10 @@ declare class VueGenerator extends ComponentGenerator {
      * Generate TypeScript interface for color props
      */
     private generateColorPropsInterface;
+    /**
+     * Parse style string for Vue template syntax
+     */
+    private parseStyleStringForVue;
     /**
      * Generate SVG root attributes for Vue template
      */
@@ -458,6 +462,10 @@ declare class ColorSplittingFeature {
      * Check if a color value is valid and should be replaced
      */
     private isValidColor;
+    /**
+     * Extract colors from style attribute
+     */
+    private extractColorsFromStyle;
 }
 
 /**

package/dist/index.d.ts

@@ -348,6 +348,10 @@ declare class VueGenerator extends ComponentGenerator {
      * Generate TypeScript interface for color props
      */
     private generateColorPropsInterface;
+    /**
+     * Parse style string for Vue template syntax
+     */
+    private parseStyleStringForVue;
     /**
      * Generate SVG root attributes for Vue template
      */
@@ -458,6 +462,10 @@ declare class ColorSplittingFeature {
      * Check if a color value is valid and should be replaced
      */
     private isValidColor;
+    /**
+     * Extract colors from style attribute
+     */
+    private extractColorsFromStyle;
 }
 
 /**