Language support#

TypeScript#

Enabling TypeScript support can be done through builtin:swc-loader.

Transpile-only#

For maximum speed, builtin:swc-loader transpiles TypeScript source code without performing any type checking. An external tool such as tsc must be used for type checking.

isolatedModules#

To maximize parallelism, builtin:swc-loader will transpile each module separately. This implies that isolatedModules must be enabled in your TypeScript configuration. Certain language features such as const enum rely on parsing the entire project, and thus cannot be used with isolated module transpilation. Enable isolatedModules in your tsconfig.json file to ensure that your IDE hints and type checker accurately reflect Rspack's module handling behavior:

{
  "compilerOptions": {
    "isolatedModules": true
  }
}

TypeCheck#

You can use the fork-ts-checker-webpack-plugin to perform TypeScript type checking during compilation. However, it’s important to note that TypeScript’s type checking can be time-consuming, especially for larger projects. This means that the time required for type checking may exceed the build time of Rspack itself.

If you are using the plugin in development mode, it won’t block the build and you can continue with the build process. However, in build mode, the plugin will block the build until the type checking is complete.

Based on your actual needs, you should decide whether to enable this plugin. If the type checking process becomes a bottleneck in your build process, we recommend using TypeScript’s incremental build feature. This feature can greatly speed up the type checking process by only analyzing the changed files since the last build.

To enable TypeScript’s incremental build, you can use tsc --incremental independently or enabling incremental mode in the plugin.

Enabling incremental build can help reduce type checking time, especially when only a few files have been modified. This way, you can optimize your build process without sacrificing the benefits of type checking.

Remember to evaluate the trade-off between build speed and the accuracy of type checking in your specific project, and choose the best approach accordingly.

JSX and TSX#

Enabling TSX|JSX support can be done through builtin:swc-loader.

Alias#

See resolve.tsConfigPath for details.

Node polyfills#

Rspack does not automatically inject polyfills for Node. If you need to use the corresponding functionality, add the node-polyfill-webpack-plugin plugin and corresponding configuration in rspack.config.js:

const NodePolyfill = require('node-polyfill-webpack-plugin');

module.exports = {
  plugins: [new NodePolyfill()],
};

Static resource handling#

Rspack supports handling of static resources, including images, fonts, videos, etc.

The relevant configuration is specified in rspack.config.js.

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset',
      },
    ],
  },
};

The example above will treat all *.png files as asset modules. For more details, see Asset modules.

CSS#

CSS is a first-class citizen with Rspack. Rspack has the ability to handle CSS out-of-box, so additional configuration isn't required.

By default, files ending in *.css are treated as CSS module types. Files ending in *.module.css are treated as CSS Modules module types.

If you're migrating from Webpack, you can remove the css-loader or style-loader components from your configuration to use Rspack's built-in CSS processing capabilities, as described in migration guide.

CSS Modules#

A "CSS Modules" file can be referenced in Rspack like this:

.red {
  color: red;
}

In the example above, the module will be converted to a JavaScript object, which you can reference in JavaScript:

import { red } from './index.module.css';
document.getElementById('element').className = red;

For more information on configuring CSS Modules, see builtins.css.modules.

PostCSS#

Rspack is compatible with postcss-loader, which you can configure like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // ...
              },
            },
          },
        ],
        type: 'css/auto', // set to 'css/auto' if you want to support '*.module.css' as CSS Module, otherwise set type to 'css'
      },
    ],
  },
};

The above configuration will have all *.css files processed by postcss-loader. The output will be passed to Rspack for CSS post-processing.

Less#

Rspack is compatible with less-loader, which you can configure like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
            options: {
              // ...
            },
          },
        ],
        type: 'css/auto', // set to 'css/auto' if you want to support '*.module.less' as CSS Module, otherwise set type to 'css'
      },
    ],
  },
};

The above configuration runs all *.less files through the less-loader and passes the generated results to Rspack for CSS post-processing.

Sass#

Rspack is compatible with sass-loader, which you can configure like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              // ...
            },
          },
        ],
        type: 'css/auto', // set to 'css/auto' if you want to support '*.module.(scss|sass)' as CSS Module, otherwise set type to 'css'
      },
    ],
  },
};

The above configuration runs all *.sass files through the sass-loader and passes the resulting results to Rspack for CSS post-processing.

Tailwind CSS#

Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with Rspack.

Install Tailwind CSS#

Please install tailwindcss,autoprefixer,postcss and postcss-loader in your project.

npm install -D tailwindcss autoprefixer postcss postcss-loader

Configure Tailwind CSS#

Once installed, you need to configure postcss-loader in rspack.config.js to handle CSS files, and then add tailwindcss to postcssOptions.plugins.

Here is an example configuration for handling .css files, if you need to handle .scss or .less files, you can refer to this example for modifications.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: {
                  tailwindcss: {},
                  autoprefixer: {},
                },
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

At this point, you have completed the build configuration required to use Tailwind CSS in Rspack.

Next you can follow the steps in the Tailwind CSS Documentation to add the required configuration and code for Tailwind CSS and start using it.

JSON#

JSON is a first-class citizen with Rspack. You can import it directly, for example:

{
  "foo": "bar"
}

import json from './example.json';
json.foo; // bar