svger-cli 2.0.5 → 2.0.6

package/dist/core/style-compiler.js

@@ -77,22 +77,22 @@ export class SVGStyleCompiler {
             ? `import React from 'react';\nimport type { SVGProps } from "react";`
             : `import type { SVGProps } from "react";`;
         const styledCSS = hasCustomStyles
-            ? `
-const ${componentName}Styles = \`
-${compiled.cssRules.join('\n')}
-${compiled.mediaQueries.join('\n')}
-\`;
-
-// Inject styles
-if (typeof document !== 'undefined') {
-  const styleId = '${componentName.toLowerCase()}-styles';
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement('style');
-    style.id = styleId;
-    style.textContent = ${componentName}Styles;
-    document.head.appendChild(style);
-  }
-}
+            ? `
+const ${componentName}Styles = \`
+${compiled.cssRules.join('\n')}
+${compiled.mediaQueries.join('\n')}
+\`;
+
+// Inject styles
+if (typeof document !== 'undefined') {
+  const styleId = '${componentName.toLowerCase()}-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = ${componentName}Styles;
+    document.head.appendChild(style);
+  }
+}
 `
             : '';
         const inlineStyleObject = Object.keys(compiled.inline).length > 0
@@ -101,187 +101,187 @@ if (typeof document !== 'undefined') {
         const classNames = compiled.classes.length > 0
             ? `'${compiled.classes.join(' ')} ' + (props.className || '')`
             : 'props.className';
-        return `${imports}
-
-/**
- * ${componentName} SVG Component with Enhanced Styling
- * Generated by svger-cli with comprehensive styling support
- */
-
-${styledCSS}${inlineStyleObject}
-
-export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
-  // Enhanced styling props
-  size?: number | string;
-  variant?: 'primary' | 'secondary' | 'accent' | 'muted';
-  responsive?: boolean;
-  
-  // Animation props
-  animate?: boolean;
-  animationType?: 'spin' | 'pulse' | 'bounce' | 'fade';
-  
-  // Theme props
-  theme?: 'light' | 'dark' | 'auto';
-}
-
-const ${componentName} = React.forwardRef<SVGSVGElement, ${componentName}Props>(
-  ({ 
-    size, 
-    variant = 'primary',
-    responsive = false,
-    animate = false,
-    animationType = 'spin',
-    theme = 'auto',
-    style,
-    className,
-    ...props 
-  }, ref) => {
-    
-    // Calculate dimensions
-    const dimensions = React.useMemo(() => {
-      if (size) {
-        return { width: size, height: size };
-      }
-      return {
-        width: props.width || ${options.width || 24},
-        height: props.height || ${options.height || 24}
-      };
-    }, [size, props.width, props.height]);
-    
-    // Combine styles
-    const combinedStyles = React.useMemo(() => {
-      const baseStyles = ${inlineStyleObject ? 'defaultStyles' : '{}'};
-      const variantStyles = getVariantStyles(variant);
-      const animationStyles = animate ? getAnimationStyles(animationType) : {};
-      const themeStyles = getThemeStyles(theme);
-      
-      return {
-        ...baseStyles,
-        ...variantStyles,
-        ...animationStyles,
-        ...themeStyles,
-        ...style
-      };
-    }, [variant, animate, animationType, theme, style]);
-    
-    // Combine class names
-    const combinedClassName = React.useMemo(() => {
-      const classes = [];
-      ${compiled.classes.length > 0 ? `classes.push('${compiled.classes.join(' ')}');` : ''}
-      if (responsive) classes.push(\`\${componentName.toLowerCase()}-responsive\`);
-      if (animate) classes.push(\`\${componentName.toLowerCase()}-animate-\${animationType}\`);
-      classes.push(\`\${componentName.toLowerCase()}-variant-\${variant}\`);
-      classes.push(\`\${componentName.toLowerCase()}-theme-\${theme}\`);
-      if (className) classes.push(className);
-      return classes.join(' ');
-    }, [responsive, animate, animationType, variant, theme, className]);
-
-    return (
-      <svg
-        ref={ref}
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-        width={dimensions.width}
-        height={dimensions.height}
-        fill={props.fill || "${options.fill || 'currentColor'}"}
-        className={combinedClassName}
-        style={combinedStyles}
-        aria-hidden={props['aria-hidden']}
-        aria-label={props['aria-label']}
-        role={props.role || 'img'}
-        {...props}
-      >
-        ${options.title ? `<title>${options.title}</title>` : ''}
-        ${svgContent}
-      </svg>
-    );
-  }
-);
-
-// Utility functions for styling
-function getVariantStyles(variant: string): React.CSSProperties {
-  const variants = {
-    primary: { color: 'var(--color-primary, #007bff)' },
-    secondary: { color: 'var(--color-secondary, #6c757d)' },
-    accent: { color: 'var(--color-accent, #28a745)' },
-    muted: { color: 'var(--color-muted, #6c757d)', opacity: 0.7 }
-  };
-  return variants[variant as keyof typeof variants] || variants.primary;
-}
-
-function getAnimationStyles(animationType: string): React.CSSProperties {
-  const animations = {
-    spin: { animation: 'svger-spin 1s linear infinite' },
-    pulse: { animation: 'svger-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' },
-    bounce: { animation: 'svger-bounce 1s infinite' },
-    fade: { animation: 'svger-fade 2s ease-in-out infinite alternate' }
-  };
-  return animations[animationType as keyof typeof animations] || {};
-}
-
-function getThemeStyles(theme: string): React.CSSProperties {
-  if (theme === 'dark') {
-    return { filter: 'invert(1) hue-rotate(180deg)' };
-  }
-  if (theme === 'auto') {
-    return { filter: 'var(--svger-theme-filter, none)' };
-  }
-  return {};
-}
-
-${componentName}.displayName = "${componentName}";
-
-export default ${componentName};
-
-// CSS Animations (injected globally)
-if (typeof document !== 'undefined') {
-  const animationCSS = \`
-    @keyframes svger-spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-    
-    @keyframes svger-pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-    
-    @keyframes svger-bounce {
-      0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
-      40%, 43% { transform: translate3d(0,-30px,0); }
-      70% { transform: translate3d(0,-15px,0); }
-      90% { transform: translate3d(0,-4px,0); }
-    }
-    
-    @keyframes svger-fade {
-      from { opacity: 0.4; }
-      to { opacity: 1; }
-    }
-    
-    /* CSS Custom Properties for theming */
-    :root {
-      --color-primary: #007bff;
-      --color-secondary: #6c757d;
-      --color-accent: #28a745;
-      --color-muted: #6c757d;
-      --svger-theme-filter: none;
-    }
-    
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --svger-theme-filter: invert(1) hue-rotate(180deg);
-      }
-    }
-  \`;
-  
-  const globalStyleId = 'svger-global-animations';
-  if (!document.getElementById(globalStyleId)) {
-    const style = document.createElement('style');
-    style.id = globalStyleId;
-    style.textContent = animationCSS;
-    document.head.appendChild(style);
-  }
-}
+        return `${imports}
+
+/**
+ * ${componentName} SVG Component with Enhanced Styling
+ * Generated by svger-cli with comprehensive styling support
+ */
+
+${styledCSS}${inlineStyleObject}
+
+export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
+  // Enhanced styling props
+  size?: number | string;
+  variant?: 'primary' | 'secondary' | 'accent' | 'muted';
+  responsive?: boolean;
+  
+  // Animation props
+  animate?: boolean;
+  animationType?: 'spin' | 'pulse' | 'bounce' | 'fade';
+  
+  // Theme props
+  theme?: 'light' | 'dark' | 'auto';
+}
+
+const ${componentName} = React.forwardRef<SVGSVGElement, ${componentName}Props>(
+  ({ 
+    size, 
+    variant = 'primary',
+    responsive = false,
+    animate = false,
+    animationType = 'spin',
+    theme = 'auto',
+    style,
+    className,
+    ...props 
+  }, ref) => {
+    
+    // Calculate dimensions
+    const dimensions = React.useMemo(() => {
+      if (size) {
+        return { width: size, height: size };
+      }
+      return {
+        width: props.width || ${options.width || 24},
+        height: props.height || ${options.height || 24}
+      };
+    }, [size, props.width, props.height]);
+    
+    // Combine styles
+    const combinedStyles = React.useMemo(() => {
+      const baseStyles = ${inlineStyleObject ? 'defaultStyles' : '{}'};
+      const variantStyles = getVariantStyles(variant);
+      const animationStyles = animate ? getAnimationStyles(animationType) : {};
+      const themeStyles = getThemeStyles(theme);
+      
+      return {
+        ...baseStyles,
+        ...variantStyles,
+        ...animationStyles,
+        ...themeStyles,
+        ...style
+      };
+    }, [variant, animate, animationType, theme, style]);
+    
+    // Combine class names
+    const combinedClassName = React.useMemo(() => {
+      const classes = [];
+      ${compiled.classes.length > 0 ? `classes.push('${compiled.classes.join(' ')}');` : ''}
+      if (responsive) classes.push(\`\${componentName.toLowerCase()}-responsive\`);
+      if (animate) classes.push(\`\${componentName.toLowerCase()}-animate-\${animationType}\`);
+      classes.push(\`\${componentName.toLowerCase()}-variant-\${variant}\`);
+      classes.push(\`\${componentName.toLowerCase()}-theme-\${theme}\`);
+      if (className) classes.push(className);
+      return classes.join(' ');
+    }, [responsive, animate, animationType, variant, theme, className]);
+
+    return (
+      <svg
+        ref={ref}
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        width={dimensions.width}
+        height={dimensions.height}
+        fill={props.fill || "${options.fill || 'currentColor'}"}
+        className={combinedClassName}
+        style={combinedStyles}
+        aria-hidden={props['aria-hidden']}
+        aria-label={props['aria-label']}
+        role={props.role || 'img'}
+        {...props}
+      >
+        ${options.title ? `<title>${options.title}</title>` : ''}
+        ${svgContent}
+      </svg>
+    );
+  }
+);
+
+// Utility functions for styling
+function getVariantStyles(variant: string): React.CSSProperties {
+  const variants = {
+    primary: { color: 'var(--color-primary, #007bff)' },
+    secondary: { color: 'var(--color-secondary, #6c757d)' },
+    accent: { color: 'var(--color-accent, #28a745)' },
+    muted: { color: 'var(--color-muted, #6c757d)', opacity: 0.7 }
+  };
+  return variants[variant as keyof typeof variants] || variants.primary;
+}
+
+function getAnimationStyles(animationType: string): React.CSSProperties {
+  const animations = {
+    spin: { animation: 'svger-spin 1s linear infinite' },
+    pulse: { animation: 'svger-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' },
+    bounce: { animation: 'svger-bounce 1s infinite' },
+    fade: { animation: 'svger-fade 2s ease-in-out infinite alternate' }
+  };
+  return animations[animationType as keyof typeof animations] || {};
+}
+
+function getThemeStyles(theme: string): React.CSSProperties {
+  if (theme === 'dark') {
+    return { filter: 'invert(1) hue-rotate(180deg)' };
+  }
+  if (theme === 'auto') {
+    return { filter: 'var(--svger-theme-filter, none)' };
+  }
+  return {};
+}
+
+${componentName}.displayName = "${componentName}";
+
+export default ${componentName};
+
+// CSS Animations (injected globally)
+if (typeof document !== 'undefined') {
+  const animationCSS = \`
+    @keyframes svger-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    
+    @keyframes svger-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    
+    @keyframes svger-bounce {
+      0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
+      40%, 43% { transform: translate3d(0,-30px,0); }
+      70% { transform: translate3d(0,-15px,0); }
+      90% { transform: translate3d(0,-4px,0); }
+    }
+    
+    @keyframes svger-fade {
+      from { opacity: 0.4; }
+      to { opacity: 1; }
+    }
+    
+    /* CSS Custom Properties for theming */
+    :root {
+      --color-primary: #007bff;
+      --color-secondary: #6c757d;
+      --color-accent: #28a745;
+      --color-muted: #6c757d;
+      --svger-theme-filter: none;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --svger-theme-filter: invert(1) hue-rotate(180deg);
+      }
+    }
+  \`;
+  
+  const globalStyleId = 'svger-global-animations';
+  if (!document.getElementById(globalStyleId)) {
+    const style = document.createElement('style');
+    style.id = globalStyleId;
+    style.textContent = animationCSS;
+    document.head.appendChild(style);
+  }
+}
 `;
     }
     // Private helper methods
@@ -428,10 +428,10 @@ if (typeof document !== 'undefined') {
                         continue;
                     const mediaQuery = breakpoints[breakpoint];
                     if (mediaQuery && breakpointValue !== undefined) {
-                        const rule = `@media (min-width: ${mediaQuery}) {
-  .${componentName.toLowerCase()}-responsive {
-    ${this.camelToKebab(prop)}: ${breakpointValue};
-  }
+                        const rule = `@media (min-width: ${mediaQuery}) {
+  .${componentName.toLowerCase()}-responsive {
+    ${this.camelToKebab(prop)}: ${breakpointValue};
+  }
 }`;
                         compiled.mediaQueries.push(rule);
                     }