[v4] Source maps with Rspack

[benjosity]

I don't seem to be able to get sourcemaps working with dev build. The Tailwind installation guide for Rspack doesn't give too much info on prop vs dev builds and Rspack just links back to Tailwind Docs. I have sourcemapping enabled but because Tailwind PostCss plugin minimises the CSS there's only ever index.css in a minimised state with no sourcemaps.

rspack.dev.js configuration -

const path = require('path');
const { merge } = require('webpack-merge');
const { rspack } = require('@rspack/core');
const common = require('./rspack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    cache: true,
    watch: true,
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: '/assets/',
        clean: true,
    },
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: ['**/dist/**', '**/static/**', '**/node_modules/**', '**/.turbo/**', '**/.build_cache/**'],
        followSymlinks: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                oneOf: [
                    {
                        include: [path.resolve(__dirname, 'tailwind')],
                        use: ["postcss-loader"],
                        type: "css",
                    },
                    {
                        exclude: [path.resolve(__dirname, 'tailwind')],
                        use: [
                            rspack.CssExtractRspackPlugin.loader,
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                },
                            },
                            {
                                loader: 'postcss-loader',
                                options: {
                                    sourceMap: true,
                                },
                            },
                        ],
                        sideEffects: true,
                    },
                ],
            },
        ],
    },
    optimization: {
        minimize: false,
        runtimeChunk: 'single',
        moduleIds: 'deterministic',
        chunkIds: 'deterministic',
        splitChunks: {
            chunks: 'all',
            minSize: 20000,
            minChunks: 1,
            maxAsyncRequests: 30,
            maxInitialRequests: 30,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    reuseExistingChunk: true,
                    name: 'vendors',
                },
                common: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                    name: 'common',
                },
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
    plugins: [
        new rspack.CssExtractRspackPlugin({
            filename: '[name].[contenthash:8].css',
            chunkFilename: '[name].[contenthash:8].chunk.css',
            ignoreOrder: true,
        }),
    ],
});

TailwindCSS entrypoint -

/*==================
  Fonts
==================*/
@import './font.css'; /* Needs to be imported before tailwindcss */

/*===============
  Tailwind Core
===============*/
@import "tailwindcss" source('../../../../../src'); /* Base Tailwind */

/*=============================
  Tailwind Theme Variables
=============================*/
@import './theme-variables/animations.css';
@import './theme-variables/breakpoints.css';
@import './theme-variables/colors.css';
@import './theme-variables/layouts.css';
@import './theme-variables/typography.css';

/*===============================
  Tailwind Utility Classes
===============================*/
@import './utilities/borders.css';
@import './utilities/collapse.css';
@import './utilities/container.css';
@import './utilities/display.css';
@import './utilities/grid-template-columns.css';
@import './utilities/prose.css';
@import './utilities/shadows.css';
@import './utilities/spacer.css';
@import './utilities/tw-button.css';
@import './utilities/tw-card.css';
@import './utilities/tw-dropdown.css';
@import './utilities/tw-tabs.css';

/*=============================
  Application Base
=============================*/
@import './base/index.css';

/*=============================
  Application Components
=============================*/
@import './components/index.css';

/*=============================
  Application Pages
=============================*/
@import './pages/index.css';

/*=============================
  Application Legacy
=============================*/
@import './legacy/index.css';