fix: ensure consistent CSS output for SSR and client hydration (#6558)

Author: chenjiahan

e2e/cases/css/inline-query-node-target/.browserslistrc

@@ -0,0 +1 @@
+Android >= 4.0

e2e/cases/css/inline-query-node-target/rsbuild.config.ts

@@ -1,13 +1,18 @@
 import { defineConfig } from '@rsbuild/core';
 
 export default defineConfig({
-  output: {
-    target: 'node',
-    module: true,
-    overrideBrowserslist: ['Android >= 4.0'],
-    distPath: process.env.NODE_ENV === 'production' ? 'dist-build' : 'dist-dev',
-  },
   dev: {
     writeToDisk: true,
   },
+  environments: {
+    web: {},
+    node: {
+      output: {
+        target: 'node',
+        module: true,
+        distPath:
+          process.env.NODE_ENV === 'production' ? 'dist-build' : 'dist-dev',
+      },
+    },
+  },
 });

packages/core/src/plugins/css.ts

@@ -267,7 +267,10 @@ export const pluginCss = (): RsbuildPlugin => ({
 
     api.modifyBundlerChain({
       order: 'pre',
-      handler: async (chain, { target, isProd, CHAIN_ID, environment }) => {
+      handler: async (
+        chain,
+        { target, isProd, CHAIN_ID, environment, environments },
+      ) => {
         const rule = chain.module.rule(CHAIN_ID.RULE.CSS);
         const inlineRule = chain.module.rule(CHAIN_ID.RULE.CSS_INLINE);
         const { config } = environment;
@@ -358,6 +361,18 @@ export const pluginCss = (): RsbuildPlugin => ({
 
           const { minifyCss } = parseMinifyOptions(config);
 
+          // Use the same browserslist as web bundles to ensure consistent CSS output
+          // Prevent mismatched prefixes or features between SSR and client hydration
+          let { browserslist } = environment;
+          if (target === 'node') {
+            const webEnvironment = Object.values(environments).find(
+              (env) => env.config.output.target === 'web',
+            );
+            if (webEnvironment?.browserslist) {
+              browserslist = webEnvironment.browserslist;
+            }
+          }
+
           updateRules(
             (rule, type) => {
               // Inline styles are not processed by Rspack's minimizers,
@@ -368,7 +383,7 @@ export const pluginCss = (): RsbuildPlugin => ({
 
               const lightningcssOptions = getLightningCSSLoaderOptions(
                 config,
-                environment.browserslist,
+                browserslist,
                 minify,
               );
 

packages/core/tests/__snapshots__/environments.test.ts.snap

@@ -2003,7 +2003,10 @@ exports[`environment config > tools.rspack / bundlerChain can be configured in e
               "options": {
                 "errorRecovery": true,
                 "targets": [
-                  "node >= 16",
+                  "chrome >= 87",
+                  "edge >= 88",
+                  "firefox >= 78",
+                  "safari >= 14",
                 ],
               },
             },