SWC Import Plugin (Rust Version)

A SWC plugin for transforming import statements, compatible with rspack's builtin:swc-loader.

Features

• Transform imports from a library into specific path imports
• Support for style imports (CSS modules)
• Configurable naming conventions (camelCase to dash-case or underscore_case)
• Compatible with rspack's builtin:swc-loader

Installation

npm install swc-import-plugin

Usage with rspack

// rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                },
              },
            },
            plugin: {
              // Reference to this plugin
              'swc-import-plugin': {
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: true,
                camel2DashComponentName: true,
              },
            },
          },
        },
      },
    ],
  },
};

Configuration Options

• libraryName (required): The name of the library to transform imports from
• libraryDirectory (optional, default: 'lib'): The directory to import from
• style (optional):
  • true: import [path]/style
  • 'css': import [path]/style/css
  • false: don't import style
  • string with {name}: custom style path with component name placeholder
• styleCase (optional): Transform the component name in style path to a specific case
  • 'camelCase': transform to camelCase (e.g., 'datePicker')
  • 'capitalCase': transform to Capital Case (e.g., 'Date Picker')
  • 'constantCase': transform to CONSTANT_CASE (e.g., 'DATE_PICKER')
  • 'dotCase': transform to dot.case (e.g., 'date.picker')
  • 'headerCase': transform to Header-Case (e.g., 'Date-Picker')
  • 'noCase': transform to no case (e.g., 'date picker')
  • 'paramCase': transform to param-case (e.g., 'date-picker')
  • 'pascalCase': transform to PascalCase (e.g., 'DatePicker')
  • 'pathCase': transform to path/case (e.g., 'date/picker')
  • 'sentenceCase': transform to Sentence case (e.g., 'Date picker')
  • 'snakeCase': transform to snake_case (e.g., 'date_picker')
• styleLibraryDirectory (optional): Custom directory for style imports
• camel2DashComponentName (optional, default: true): Transform camelCase to dash-case
• camel2UnderlineComponentName (optional): Transform camelCase to under_score
• fileName (optional): Additional file name to append to import path
• transformToDefaultImport (optional, default: true): Whether to transform to default import

Style Configuration Examples

The style option supports several different configurations to handle style imports:

1. Basic Style Import (style: true)

// Input
import { Button } from 'antd';

// Output
import Button from 'antd/es/button';
import 'antd/es/button/style';

2. CSS Style Import (style: 'css')

// rspack.config.js
{
  plugin: {
    'swc-import-plugin': {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css',
    },
  },
}

// Input
import { Button } from 'antd';

// Output
import Button from 'antd/es/button';
import 'antd/es/button/style/css';

3. Disable Style Import (style: false)

// rspack.config.js
{
  plugin: {
    'swc-import-plugin': {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: false,
    },
  },
}

// Input
import { Button } from 'antd';

// Output
import Button from 'antd/es/button';
// No style import

4. Custom Style Directory (styleLibraryDirectory)

// rspack.config.js
{
  plugin: {
    'swc-import-plugin': {
      libraryName: 'my-ui-lib',
      libraryDirectory: 'es',
      style: true,
      styleLibraryDirectory: 'styles', // Custom style directory
    },
  },
}

// Input
import { Button } from 'my-ui-lib';

// Output
import Button from 'my-ui-lib/es/button';
import 'my-ui-lib/styles/button';

5. Multiple Libraries Configuration

// rspack.config.js
{
  plugin: {
    'swc-import-plugin': [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
      {
        libraryName: '@arco-design/web-react',
        libraryDirectory: 'es',
        style: 'css',
      }
    ],
  },
}

// Input
import { Button } from 'antd';
import { Input } from '@arco-design/web-react';

// Output
import Button from 'antd/es/button';
import 'antd/es/button/style';
import Input from '@arco-design/web-react/es/input';
import '@arco-design/web-react/es/input/style/css';

6. Function-like Style Configuration

The plugin supports function-like style configuration using a special syntax with {name} placeholder:

// rspack.config.js
{
  plugin: {
    'swc-import-plugin': {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: '{name}/style/2x'  // {name} will be replaced with the component name
    },
  },
}

// Input
import { Button } from 'antd';

// Output
import Button from 'antd/es/button';
import 'button/style/2x';

// Input
import { Table } from 'antd';

// Output
import Table from 'antd/es/table';
import 'table/style/2x';

This is particularly useful when you need to:

• Generate custom style paths based on component names
• Support different style versions (e.g., 1x, 2x, etc.)
• Handle special cases for specific components

You can also combine this with other configurations for different libraries:

// rspack.config.js
{
  plugin: {
    'swc-import-plugin': [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: '{name}/style/2x'
      },
      {
        libraryName: '@arco-design/web-react',
        libraryDirectory: 'es',
        style: 'css'
      }
    ],
  },
}

7. Style Case Configuration

You can use styleCase to control how component names are transformed in style paths:

// rspack.config.js
{
  plugin: {
    'swc-import-plugin': {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: '{name}/style/2x',
      styleCase: 'camelCase'
    },
  },
}

// Input
import { DatePicker } from 'antd';

// Output
import DatePicker from 'antd/es/date-picker';
import 'datePicker/style/2x';

Different style cases:

// With styleCase: 'camelCase'
import 'datePicker/style/2x'

// With styleCase: 'constantCase'
import 'DATE_PICKER/style/2x'

// With styleCase: 'paramCase'
import 'date-picker/style/2x'

// With styleCase: 'pascalCase'
import 'DatePicker/style/2x'

// With styleCase: 'snakeCase'
import 'date_picker/style/2x'

You can also use different style cases for different libraries:

// rspack.config.js
{
  plugin: {
    'swc-import-plugin': [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: '{name}/style/2x',
        styleCase: 'camelCase'
      },
      {
        libraryName: '@arco-design/web-react',
        libraryDirectory: 'es',
        style: '{name}/style/index.css',
        styleCase: 'paramCase'
      }
    ],
  },
}

Example

Input:

import { Button } from 'antd';

Output:

import Button from 'antd/es/button';
import 'antd/es/button/style';

Development

To build the plugin:

cargo build --release

Testing

cargo test

License

MIT