Docusaurus Faster styling issues only in production

[Blargian]

I am running Docusaurus V3.7 and I enabled Docusaurus Faster. Everything works wonderfully in development mode but in production after running yarn build, yarn serve the styling of the site is broken (see below)

Development:

Production:

I came across 9303 and initially assumed that the issue must be that minification is breaking nested css but I am not convinced this is the case. So far I have tried:

• adding a plugin to use postcss-preset-env
• disable feature flag lightningCssMinimizer

In both cases the issue persists. I would expect that if the issue was with minification that the styling would be okay with lightningCssMinimizer turned off.

Further more if I turn off just rspackBundler then the styling is okay so I am thinking it's an issue with how the css is getting bundled.

We use a mixture of a custom .scss file and .scss modules (styles.module.css imported with import styles from './styles.module.css'). The styling which is broken does seem to be related to, for instance:

@use "colors";
html[data-theme="dark"] {
  background: var(--click-color-background);
  background-attachment: fixed;
}

Where @use "colors" is a file with:

:root {
  --palette_neutral_0: #FFFFFF;
  --palette_neutral_100: #F9F9F9;
  --palette_neutral_200: #DFDFDF;
  --palette_neutral_300: #C0C0C0;

--click-color-background: var(--palette_neutral_0);
--click-color-background-muted: var(--palette_slate_50);
--click-color-text: var(--palette_slate_900);

Are there any known issues with styling this way with Docusaurus Faster?

I tried to implement my own rspack config according to the rspack documentation but did not have much luck:

plugins/custom-loaders:

module.exports = function (context, options) {
    return {
        name: 'custom-loaders',
        configureWebpack(config, isServer, {currentBundler}) {
            return {
                module: {
                    parser: {
                        'css/auto': {
                            namedExports: false, // enable default imports for css modules (e.g., import styles from './App.module.scss')
                        },
                    },
                    rules: [
                        {
                            test: /\.css$/,
                            type: 'css/auto'
                        },
                        {
                            test: /\.(sass|scss)$/,
                            use: [
                                {
                                    loader: 'sass-loader',
                                    options: {
                                        // using `modern-compiler` and `sass-embedded` together significantly improve build performance,
                                        // requires `sass-loader >= 14.2.1`
                                        api: 'modern-compiler',
                                        implementation: require.resolve('sass-embedded'),
                                    },
                                },
                            ],
                            // set to 'css/auto' if you want to support '*.module.(scss|sass)' as CSS Modules, otherwise set type to 'css'
                            type: 'css/auto',
                        },
                    ],
                },
            };
        },
    };
};

plugins/custom-loaders/package.json":

{
  "name": "custom-loaders",
  "version": "0.0.0",
  "private": true
}

package.json:

"dependencies": {
...
"custom-postcss": "file:plugins/custom-postcss"
}

Run:

yarn install

docusaurus.config.js:

plugins: [
  'custom-loaders'
}

rspack.config.js:

export default {
  experiments: {
    css: true,
  },
};

With this the build throws an error when it encounters *.module.css so I suspect that Docusaurus is not picking up the rspack.config.js, or I have done something else incorrectly.

What is the correct way to write a custom config for rspack with Docusaurus Faster?

[Blargian]

I tracked down the issue to a single incorrect line --click-color-table-header-text: var(var(--palette_slate_900)); which broke all styling defined after it with the minimisation in place. Removing the incorrect nested var solved the issue.