[v4] Rspack not registering changes in nested/@import CSS files when watching

[benjosity]

I'm having a bit of an issue with migrating to Tailwind v4.

I have migrated from SCSS to CSS (at least for the core Tailwind parts of my project) I've left a few other things in SCSS for now.

My issue is prod build is working fine but when running in dev mode; on initial build it registers changes in all CSS and builds accordingly but while Rspack watches files it is not applying/building changes in nested/@import CSS file includes during the watch, I need to make a change in one of the nested CSS files and then save root index.css for these changes to have an affect.

rspack.common.js

const path = require('path');
const ESLintPlugin = require('eslint-rspack-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    // Keep the other entries the same
    entry: {
        react: './react/index.tsx',
        core: './js/core.entry.js',
        analytics: './js/analytics.entry.js',
        styling: './styles/main.scss',
        tailwind: './tailwind/index.css',
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        publicPath: '/assets/',
        clean: true,
    },

    // Enable CSS processing
    experiments: {
        css: true,
    },

    module: {
        rules: [
            {
                test: /\.(j|t)sx?$/,
                exclude: /node_modules/,
                loader: 'builtin:swc-loader',
                options: {
                    jsc: {
                        parser: {
                            syntax: 'typescript',
                            tsx: true,
                            decorators: true,
                        },
                        transform: {
                            react: {
                                runtime: 'automatic',
                                development: process.env.NODE_ENV !== 'production',
                                refresh: process.env.NODE_ENV !== 'production',
                            },
                        },
                    },
                    env: {
                        targets: {
                            chrome: '87',
                            firefox: '78',
                            safari: '14',
                            edge: '88',
                        },
                    },
                },
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name][ext]',
                },
            },
        ],
    },

    plugins: [
        new ESLintPlugin({
            extensions: ['js', 'jsx', 'ts', 'tsx'],
            files: ['./js', './react'],
            cache: true,
            cacheLocation: path.resolve(__dirname, 'node_modules/.cache/.eslintcache'),
        }),
        new StylelintPlugin({
            files: './styles/**/*.{css,scss}',
        }),
        new BundleTracker({
            filename: 'dist-assets.json',
            relativePath: true,
        }),
    ],

    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.scss'],
        alias: {
            '@api': path.resolve(__dirname, 'react/api/'),
            '@components': path.resolve(__dirname, 'react/components/'),
            '@fonts': path.resolve(__dirname, 'fonts/'),
            '@hooks': path.resolve(__dirname, 'react/hooks/'),
            '@modules': path.resolve(__dirname, 'react/modules/'),
            '@state': path.resolve(__dirname, 'react/state/'),
            '@styles': path.resolve(__dirname, 'styles/'),
            '@schemas': path.resolve(__dirname, 'react/schemas/'),
            '@type': path.resolve(__dirname, 'react/types/'),
            '@ui': path.resolve(__dirname, 'react/components/ui'),
            '@utils': path.resolve(__dirname, 'react/utils/'),
            react: path.resolve(__dirname, 'node_modules/react'),
            'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
        },
    },

    cache: true,

    stats: {
        all: false,
        chunkGroups: true,
        timings: true,
        errors: true,
        assetsSort: '!size',
        children: false,
        usedExports: false,
        modules: false,
        entrypoints: false,
        excludeAssets: [/\.*\.map/],
    },
};

rspack.dev.js

// rspack.dev.js

// Increase EventEmitter max listeners (useful if you run into warnings)
require('events').EventEmitter.defaultMaxListeners = 50; // or higher if needed

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

module.exports = merge(common, {
    mode: 'development',

    // Source maps for easier debugging
    devtool: 'cheap-module-source-map',

    // Setting it to `true` is typical in dev mode.
    cache: true,

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        publicPath: '/assets/',
        clean: true,
    },

    module: {
        rules: [
            // Add this rule first in the rules array
            {
                test: /\.css$/,
                include: [path.resolve(__dirname, 'tailwind')],
                use: [
                    rspack.CssExtractRspackPlugin.loader,
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [require('@tailwindcss/postcss')],
                            },
                        },
                    }
                ],
                type: 'css'  // Keep as 'css' since we have experiments.css enabled
            },
            // Then modify the existing CSS rule to exclude the tailwind directory
            // CSS Files
            {
                test: /\.css$/, // Matches CSS files
                exclude: [path.resolve(__dirname, 'tailwind')],
                use: [
                    rspack.CssExtractRspackPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true, // Enable source maps for CSS
                            importLoaders: 1,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true, // Enable source maps for PostCSS
                        },
                    },
                ],
                sideEffects: true,
            },
            // SCSS Files
            {
                test: /\.scss$/, // Matches SCSS files
                use: [
                    rspack.CssExtractRspackPlugin.loader, // Extract CSS into separate files
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true, // Enable source maps for CSS
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true, // Enable source maps for PostCSS
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true, // Enable source maps for Sass
                        },
                    },
                ],
                exclude: /node_modules/,
            },
        ],
    },

    // Watch options for local development
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: ['**/dist/**', '**/static/**', '**/node_modules/**', '**/.turbo/**', '**/.build_cache/**'],
        followSymlinks: false,
    },

    // Performance hints usually not needed in dev
    performance: {
        hints: false,
    },

    // Dev-friendly optimizations
    optimization: {
        removeAvailableModules: false,
        removeEmptyChunks: false,
        splitChunks: false,
        minimize: false,
    },

    // Plugins for dev
    plugins: [
        new rspack.CssExtractRspackPlugin({
            // If you'd rather avoid hashing in dev for faster rebuilds, consider '[name].css'
            filename: '[name].[contenthash].css',
            ignoreOrder: true,
        }),
        new rspack.ProgressPlugin({
            prefix: 'Development Build',
            profile: true,
            template: '● {prefix:.bold.blue} {bar:25.cyan/white.dim} ({percent}%) {wide_msg:.dim}',
        }),
    ],
});

Tailwind Entry point

/* 
==================
  External Fonts
==================
*/

/* Needed to be imported before tailwindcss */
@import './font.css';

/* 
===============
  Tailwind Core
===============
*/
@import "tailwindcss"; /* Base Tailwind */

/* 
=========================
  Tailwind Source Files
=========================
*/
@import './source.css'; /* Source file paths for Tailwind to look for */

/* 
=============================
  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';