[Bug]: "getComputedStyle is not defined" using css experiment field set to true on SSR

[JSMD-maintainers]

System Info

System:
OS: macOS 14.6
CPU: (10) arm64 Apple M1 Pro
Memory: 218.47 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
npm: 10.8.3 - ~/.nvm/versions/node/v18.18.2/bin/npm
pnpm: 6.35.1 - ~/.nvm/versions/node/v18.18.2/bin/pnpm
bun: 1.1.12 - /opt/homebrew/bin/bun
Browsers:
Chrome: 129.0.6668.90
Safari: 17.6
npmPackages:
@rspack/cli: ^1.0.0 => 1.0.0
@rspack/core: ^1.0.0 => 1.0.0

Details

When using the native css support it seems that SSR is not working in the sense that the application is responding with an error:

This is my configuration (the minimal reproducible link has a smaller configuration to narrow the focus):

const rspack = require("@rspack/core");
const path = require("path");
const { moduleFileExtensions } = require("./utils");
const { EnvironmentPlugin } = require("@rspack/core");

/** @type {import('@rspack/cli').Configuration} */
const rspackClientConfig = {
  mode: "development",
  bail: false,
  stats: "normal",
  devtool: "source-map",
  resolve: {
    extensions: moduleFileExtensions.map((extension) => `.${extension}`),
  },
  experiments: {
    css: true,
  },
  entry: {
    index: path.resolve(__dirname, "client", "index.js"),
    hydrator: path.resolve(__dirname, "client", "hydrator.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    clean: true,
    sourceMapFilename: "[name][ext].map",
    library: ["hydrator", "[name]"],
    libraryTarget: "umd",
    globalObject: "(typeof self != 'undefined' ? self : this)",
  },
  externals: {
    react: {
      root: ["hydrator", "React"],
      commonjs: "react",
      commonjs2: "react",
      amd: "react",
    },
    "react-dom": {
      root: ["hydrator", "ReactDOM"],
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "react-dom",
    },
    "react/jsx-runtime": {
      root: ["hydrator", "jsx"],
      commonjs: "react/jsx-runtime",
      commonjs2: "react/jsx-runtime",
      amd: "react/jsx-runtime",
    },
  },
  module: {
    parser: {
      javascript: {
        importExportsPresence: "error",
      },
      "css/auto": {
        namedExports: false,
      },
      css: {
        namedExports: false,
      },
      // Parser options for css/module modules
      "css/module": {
        namedExports: false,
      },
    },
    rules: [
      {
        test: /\.(js|jsx)$/u,
        use: {
          loader: "builtin:swc-loader",
          options: {
            sourceMap: true,
            jsc: {
              target: "es2020",
              parser: {
                syntax: "ecmascript",
                jsx: true,
              },
              externalHelpers: true,
              preserveAllComments: false,
              transform: {
                react: {
                  runtime: "automatic",
                  throwIfNamespace: true,
                  useBuiltins: false,
                },
              },
              experimental: {
                plugins: [
                  [
                    "@formatjs/swc-plugin-experimental",
                    {
                      idInterpolationPattern: "[sha512:contenthash:base64:6]",
                    },
                  ],
                ],
              },
            },
          },
        },
        type: "javascript/auto",
      },
      {
        test: /\.(scss|sass)$/u,
        use: [
          {
            loader: "sass-loader",
            options: {
              api: "modern-compiler",
              sourceMap: true,
            },
          },
        ],
        type: "css/auto",
      },
    ],
  },
  plugins: [
    new rspack.ProgressPlugin(),
    new EnvironmentPlugin(Object.keys(process.env)),
  ],
};

module.exports = rspackClientConfig;

// Error
{
"statusCode": 500,
"error": "Internal Server Error",
"message": "getComputedStyle is not defined"
}

The js bundle generates the code as follows where it crashes:

// webpack/runtime/css_loading
(() => {
var installedChunks = {};
var uniqueName = "Evelin.fragments.product-detail-fragment";
function handleCssComposes(exports, composes) {
  for (var i = 0; i < composes.length; i += 3) {
    var moduleId = composes[i];
    var composeFrom = composes[i + 1];
    var composeVar = composes[i + 2];
    var composedId = __webpack_require__(composeFrom)[composeVar];
    exports[moduleId] = exports[moduleId] + " " + composedId
  }
}
var loadCssChunkData = (target, link, chunkId) => {
var data, token = "", token2 = "", token3 = "", exports = {}, composes = [], name = "--webpack-" + uniqueName + "-" + chunkId, i, cc = 1, composes = {};
try {
  if(!link) link = loadStylesheet(chunkId);
  var cssRules = link.sheet.cssRules || link.sheet.rules;
  var j = cssRules.length - 1;
  while(j > -1 && !data) {
    var style = cssRules[j--].style;
    if(!style) continue;
    data = style.getPropertyValue(name);
  }
} catch(_) {}
if(!data) {
  data = getComputedStyle(document.head).getPropertyValue(name); // here
}

I am following the this section of the docs: https://rspack.dev/guide/tech/css#sass

Expected behaviour:
Using css should not lead to an error. If you remove the css file and the css import in the App.jsx the app is running fine.

Reproduce link

https://github.com/MarcoLeko/rspack-can-not-read-property-of-undefined

Reproduce Steps

1. Run npm ci
2. Run npm run rspack:dev:server
3. Check out: http://localhost:3001/