fix(plugin-vue2): fix loaders duplicating problem caused by vue-loader@15 (#2142)

Author: xc2

e2e/cases/vue2/sfc-style/index.test.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
-import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { build, gotoPage, rspackOnlyTest as test } from '@e2e/helper';
 
-rspackOnlyTest('should build Vue sfc style correctly', async ({ page }) => {
+test('should build Vue sfc style correctly', async ({ page }) => {
   const rsbuild = await build({
     cwd: __dirname,
     runServer: true,
@@ -15,5 +15,7 @@ rspackOnlyTest('should build Vue sfc style correctly', async ({ page }) => {
   const body = page.locator('body');
   await expect(body).toHaveCSS('background-color', 'rgb(0, 0, 255)');
 
+  await expect(body).toHaveCSS('padding', '16px');
+
   await rsbuild.close();
 });

e2e/cases/vue2/sfc-style/src/App.vue

@@ -12,3 +12,11 @@ export default {};
   background-color: green;
 }
 </style>
+
+<style lang="less">
+body {
+  // this case is to test if loaders run twice
+  // if the next line is transformed twice, less will throw.
+  padding: -webkit-calc(~'16px + env(safe-area-inset-bottom)');
+}
+</style>

packages/plugin-vue2/src/VueLoader15PitchFixPlugin.ts

@@ -0,0 +1,49 @@
+import type { Rspack } from '@rsbuild/shared';
+
+/**
+ * this plugin is a quick fix for issue https://github.com/web-infra-dev/rsbuild/issues/2093
+ */
+export class VueLoader15PitchFixPlugin implements Rspack.RspackPluginInstance {
+  readonly name = 'VueLoader15PitchFixPlugin';
+
+  apply(compiler: Rspack.Compiler) {
+    const { NormalModule } = compiler.webpack;
+    compiler.hooks.compilation.tap(this.name, (compilation) => {
+      const isExpCssOn = compilation.compiler.options?.experiments?.css;
+      // the related issue only happens when experiments.css is on
+      if (!isExpCssOn) return;
+
+      NormalModule.getCompilationHooks(compilation).loader.tap(
+        this.name,
+        (loaderContext) => {
+          if (
+            // the related issue only happens for <style>
+            /[?&]type=style/.test(loaderContext.resourceQuery) &&
+            // the fix should be applied before `pitch` phase completed.
+            // once `pitch` phase completed, vue-loader will remove its pitcher loader.
+            /[\\/]vue-loader[\\/]lib[\\/]loaders[\\/]pitcher/.test(
+              loaderContext.loaders?.[0]?.path || '',
+            )
+          ) {
+            const seen = new Set<string>();
+            const loaders = [];
+            // deduplicate loaders
+            for (const loader of loaderContext.loaders || []) {
+              const identifier =
+                typeof loader === 'string'
+                  ? loader
+                  : loader.path + loader.query;
+
+              if (!seen.has(identifier)) {
+                seen.add(identifier);
+                loaders.push(loader);
+              }
+            }
+
+            loaderContext.loaders = loaders;
+          }
+        },
+      );
+    });
+  }
+}

packages/plugin-vue2/src/index.ts

@@ -3,6 +3,7 @@ import { VueLoaderPlugin } from 'vue-loader';
 import type { RsbuildPlugin } from '@rsbuild/core';
 import type { VueLoaderOptions } from 'vue-loader';
 import { applySplitChunksRule } from './splitChunks';
+import { VueLoader15PitchFixPlugin } from './VueLoader15PitchFixPlugin';
 
 export type SplitVueChunkOptions = {
   /**
@@ -60,6 +61,10 @@ export function pluginVue2(options: PluginVueOptions = {}): RsbuildPlugin {
           .options(vueLoaderOptions);
 
         chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(VueLoaderPlugin);
+        // we could remove this once a new vue-loader@15 is released with https://github.com/vuejs/vue-loader/pull/2071 shipped
+        chain
+          .plugin(CHAIN_ID.PLUGIN.VUE_LOADER_15_PITCH_FIX_PLUGIN)
+          .use(VueLoader15PitchFixPlugin);
       });
 
       applySplitChunksRule(api, options.splitChunks);

packages/plugin-vue2/tests/__snapshots__/index.test.ts.snap

@@ -22,6 +22,9 @@ exports[`plugin-vue2 > should add vue-loader and VueLoaderPlugin correctly 1`] =
   },
   "plugins": [
     VueLoaderPlugin {},
+    VueLoader15PitchFixPlugin {
+      "name": "VueLoader15PitchFixPlugin",
+    },
   ],
   "resolve": {
     "alias": {
@@ -57,6 +60,9 @@ exports[`plugin-vue2 > should allow to configure vueLoader options 1`] = `
   },
   "plugins": [
     VueLoaderPlugin {},
+    VueLoader15PitchFixPlugin {
+      "name": "VueLoader15PitchFixPlugin",
+    },
   ],
   "resolve": {
     "alias": {

packages/shared/src/chain.ts

@@ -214,6 +214,8 @@ export const CHAIN_ID = {
     ASSETS_RETRY: 'assets-retry',
     /** AutoSetRootFontSizePlugin */
     AUTO_SET_ROOT_SIZE: 'auto-set-root-size',
+    /** VueLoader15PitchFixPlugin */
+    VUE_LOADER_15_PITCH_FIX_PLUGIN: 'vue-loader-15-pitch-fix',
   },
   /** Predefined minimizers */
   MINIMIZER: {