Package Exports

swc-import-plugin
swc-import-plugin/wasm/swc_import_plugin.wasm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (swc-import-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SWC Import Plugin

A SWC plugin for automatically importing component styles.

Features

Automatically imports component styles based on your imports
Supports both CSS and default style imports
Configurable component name transformation (camelCase to dash-case)
Works with rspack's builtin:swc-loader

Installation

First, install Rust and add the wasm32-unknown-unknown target:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
rustup target add wasm32-unknown-unknown

Then install the plugin:

npm install swc-import-plugin

Usage with rspack

In your rspack configuration:

{
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              experimental: {
                plugins: [
                  [
                    'swc-import-plugin',
                    {
                      "import": [
                        {
                          "libraryName": "antd",
                          "libraryDirectory": "es",
                          "style": "css" // or true for less
                        }
                      ],
                      "ignoreStylePathNotFound": true
                    }
                  ]
                ]
              }
            }
          }
        }
      }
    ]
  }
}

Configuration Options

import: Array of library configurations
- libraryName: Name of the library to process
- libraryDirectory: Optional subdirectory for component imports
- style: Can be "css", true (for less), or false
- camel2DashComponentName: Convert camelCase to dash-case (default: true)
ignoreStylePathNotFound: Whether to ignore missing style files (default: true)

Example

Input:

import { Button } from 'antd';

Output:

import 'antd/es/button/style/css';
import { Button } from 'antd';

Development

To build the plugin locally:

# Add wasm32-unknown-unknown target (if not already added)
rustup target add wasm32-unknown-unknown

# Build the plugin
npm install
npm run build

License

MIT