subat

A CLI tool and Vite plugin to transform SVG attributes from kebab-case to camelCase.

Installation

# Install globally for CLI usage
npm install -g subat

# Or use directly with npx
npx subat

# For plugin usage in your project
npm install subat

Quick Start

CLI Usage

# Process a single file
subat path/to/file.tsx

# Process multiple files
subat file1.tsx file2.jsx src/icons.tsx

Plugin Usage (Vite)

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import subat from "subat";

export default defineConfig({
  plugins: [subat.vite({}), react()],
});

Example Transformation

// Input:
<svg stroke-width="2" view-box="0 0 24 24" fill-rule="evenodd">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14" />
</svg>

// Output:
<svg strokeWidth="2" viewBox="0 0 24 24" fillRule="evenodd">
  <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14" />
</svg>

Features

• CLI Tool: Process single or multiple files at once
• Build Tool Plugin: Automatic transformation during development and build
• Universal Plugin: Works with Vite, Webpack, and Rollup via unplugin
• Smart Processing: Only transforms files containing SVG elements
• TypeScript Support: Full TypeScript support for both CLI and plugin

Single File Processing

subat path/to/file.tsx

Multiple File Processing

# Process multiple specific files
subat file1.tsx file2.jsx src/icons.tsx

# Process with glob patterns (if your shell supports it)
subat src/**/*.tsx components/**/*.jsx

CLI Output

The tool provides feedback for each file:

• ✅ Successfully processed files
• ❌ Files with errors
• ℹ️ Files that were skipped (no SVG content)

Example output:

Processing: src/icons.tsx
✓ Successfully processed: src/icons.tsx
Processing: components/Icon.jsx
✓ Successfully processed: components/Icon.jsx
File not found: missing.tsx

Vite

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import subat from "subat";

export default defineConfig({
  plugins: [
    subat.vite({
      include: ["**/*.tsx", "**/*.jsx"], // default
      exclude: ["node_modules/**"], // default
    }),
    react(),
  ],
});

Webpack

// webpack.config.js
const subat = require("subat");

module.exports = {
  plugins: [
    subat.webpack({
      include: ["**/*.tsx", "**/*.jsx"],
      exclude: ["node_modules/**"],
    }),
  ],
};

Rollup

// rollup.config.js
import subat from "subat";

export default {
  plugins: [
    subat.rollup({
      include: ["**/*.tsx", "**/*.jsx"],
      exclude: ["node_modules/**"],
    }),
  ],
};

Plugin Options

interface SubatPluginOptions {
  include?: string[]; // File patterns to include (default: ['**/*.tsx', '**/*.jsx'])
  exclude?: string[]; // File patterns to exclude (default: ['node_modules/**'])
}

Alternative Import Methods

If you prefer specific imports:

// Vite-specific import
import subat from "subat/vite";

// Webpack-specific import
import subat from "subat/webpack";

// Rollup-specific import
import subat from "subat/rollup";

The tool identifies SVG attributes with kebab-case naming and converts them to camelCase to match React/JSX conventions:

Common Transformations

• stroke-width → strokeWidth
• fill-rule → fillRule
• stroke-linecap → strokeLinecap
• stroke-linejoin → strokeLinejoin
• stroke-dasharray → strokeDasharray
• stroke-dashoffset → strokeDashoffset
• fill-opacity → fillOpacity
• stroke-opacity → strokeOpacity
• clip-rule → clipRule
• clip-path → clipPath

Processing Logic

1. File Detection: Only processes files containing <svg elements
2. Attribute Matching: Uses regex to find kebab-case attributes (/(\w+(?:-\w+)*?)=/g)
3. Transformation: Converts matches using camelCase conversion
4. Preservation: Maintains all other code structure and formatting

Plugin Execution

• Vite: Runs before JSX transformation (enforce: "pre")
• Webpack: Integrates with module processing pipeline
• Rollup: Processes during the transform phase

Dependencies

• rwfs - Safe file operations for CLI
• unplugin - Universal plugin system
• cac - Command line interface

Requirements

• Node.js 14+ (for CLI usage)
• Modern bundler (Vite 2+, Webpack 5+, Rollup 2+) for plugin usage

Package Exports

{
  ".": "./dist/plugin.js",
  "./vite": "./dist/vite.js",
  "./webpack": "./dist/webpack.js",
  "./rollup": "./dist/rollup.js"
}

TypeScript Support

• Full TypeScript definitions included
• Works with both .ts and .tsx files
• Proper type inference for plugin options