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

1npm install swc-import-plugin

Usage with rspack

1// rspack.config.js
2module.exports = {
3  module: {
4    rules: [
5      {
6        test: /\.jsx?$/,
7        use: {
8          loader: 'builtin:swc-loader',
9          options: {
10            jsc: {
11              parser: {
12                syntax: 'ecmascript',
13                jsx: true,
14              },
15              transform: {
16                react: {
17                  runtime: 'automatic',
18                },
19              },
20            },
21            plugin: {
22              // Reference to this plugin
23              'swc-import-plugin': {
24                libraryName: 'antd',
25                libraryDirectory: 'es',
26                style: true,
27                camel2DashComponentName: true,
28              },
29            },
30          },
31        },
32      },
33    ],
34  },
35};

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)

1// Input
2import { Button } from 'antd';
3
4// Output
5import Button from 'antd/es/button';
6import 'antd/es/button/style';

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

1// rspack.config.js
2{
3  plugin: {
4    'swc-import-plugin': {
5      libraryName: 'antd',
6      libraryDirectory: 'es',
7      style: 'css',
8    },
9  },
10}
11
12// Input
13import { Button } from 'antd';
14
15// Output
16import Button from 'antd/es/button';
17import 'antd/es/button/style/css';

3. Disable Style Import (style: false)

1// rspack.config.js
2{
3  plugin: {
4    'swc-import-plugin': {
5      libraryName: 'antd',
6      libraryDirectory: 'es',
7      style: false,
8    },
9  },
10}
11
12// Input
13import { Button } from 'antd';
14
15// Output
16import Button from 'antd/es/button';
17// No style import

4. Custom Style Directory (styleLibraryDirectory)

1// rspack.config.js
2{
3  plugin: {
4    'swc-import-plugin': {
5      libraryName: 'my-ui-lib',
6      libraryDirectory: 'es',
7      style: true,
8      styleLibraryDirectory: 'styles', // Custom style directory
9    },
10  },
11}
12
13// Input
14import { Button } from 'my-ui-lib';
15
16// Output
17import Button from 'my-ui-lib/es/button';
18import 'my-ui-lib/styles/button';

5. Multiple Libraries Configuration

1// rspack.config.js
2{
3  plugin: {
4    'swc-import-plugin': [
5      {
6        libraryName: 'antd',
7        libraryDirectory: 'es',
8        style: true,
9      },
10      {
11        libraryName: '@arco-design/web-react',
12        libraryDirectory: 'es',
13        style: 'css',
14      }
15    ],
16  },
17}
18
19// Input
20import { Button } from 'antd';
21import { Input } from '@arco-design/web-react';
22
23// Output
24import Button from 'antd/es/button';
25import 'antd/es/button/style';
26import Input from '@arco-design/web-react/es/input';
27import '@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:

1// rspack.config.js
2{
3  plugin: {
4    'swc-import-plugin': {
5      libraryName: 'antd',
6      libraryDirectory: 'es',
7      style: '{name}/style/2x'  // {name} will be replaced with the component name
8    },
9  },
10}
11
12// Input
13import { Button } from 'antd';
14
15// Output
16import Button from 'antd/es/button';
17import 'button/style/2x';
18
19// Input
20import { Table } from 'antd';
21
22// Output
23import Table from 'antd/es/table';
24import '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:

1// rspack.config.js
2{
3  plugin: {
4    'swc-import-plugin': [
5      {
6        libraryName: 'antd',
7        libraryDirectory: 'es',
8        style: '{name}/style/2x'
9      },
10      {
11        libraryName: '@arco-design/web-react',
12        libraryDirectory: 'es',
13        style: 'css'
14      }
15    ],
16  },
17}

7. Style Case Configuration

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

1// rspack.config.js
2{
3  plugin: {
4    'swc-import-plugin': {
5      libraryName: 'antd',
6      libraryDirectory: 'es',
7      style: '{name}/style/2x',
8      styleCase: 'camelCase'
9    },
10  },
11}
12
13// Input
14import { DatePicker } from 'antd';
15
16// Output
17import DatePicker from 'antd/es/date-picker';
18import 'datePicker/style/2x';

Different style cases:

1// With styleCase: 'camelCase'
2import 'datePicker/style/2x'
3
4// With styleCase: 'constantCase'
5import 'DATE_PICKER/style/2x'
6
7// With styleCase: 'paramCase'
8import 'date-picker/style/2x'
9
10// With styleCase: 'pascalCase'
11import 'DatePicker/style/2x'
12
13// With styleCase: 'snakeCase'
14import 'date_picker/style/2x'

You can also use different style cases for different libraries:

1// rspack.config.js
2{
3  plugin: {
4    'swc-import-plugin': [
5      {
6        libraryName: 'antd',
7        libraryDirectory: 'es',
8        style: '{name}/style/2x',
9        styleCase: 'camelCase'
10      },
11      {
12        libraryName: '@arco-design/web-react',
13        libraryDirectory: 'es',
14        style: '{name}/style/index.css',
15        styleCase: 'paramCase'
16      }
17    ],
18  },
19}

Example

Input:

1import { Button } from 'antd';

Output:

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

Development

To build the plugin:

1cargo build --release

Testing

1cargo test

License

MIT