From 60e7455cead078ffc4d36e7d4e92f60fc6f6bb68 Mon Sep 17 00:00:00 2001
From: xc2 <xc2@users.noreply.github.com>
Date: Fri, 19 Apr 2024 00:00:56 +0800
Subject: [PATCH 1/3] test: add style test to vue2 case folder for testing
 loaders duplicating

---
 e2e/cases/vue2/sfc-style/index.test.ts | 9 +++++++--
 e2e/cases/vue2/sfc-style/src/App.vue   | 8 ++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/e2e/cases/vue2/sfc-style/index.test.ts b/e2e/cases/vue2/sfc-style/index.test.ts
index 8c6684c566..43990ae149 100644
--- a/e2e/cases/vue2/sfc-style/index.test.ts
+++ b/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,10 @@ 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',
+    '-webkit-calc(16px + env(safe-area-inset-bottom))',
+  );
+
   await rsbuild.close();
 });
diff --git a/e2e/cases/vue2/sfc-style/src/App.vue b/e2e/cases/vue2/sfc-style/src/App.vue
index 34564f4245..28ef8186cf 100644
--- a/e2e/cases/vue2/sfc-style/src/App.vue
+++ b/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>

From bbb989f6154e72326c92c4508061c62efc7f468a Mon Sep 17 00:00:00 2001
From: xc2 <xc2@users.noreply.github.com>
Date: Fri, 19 Apr 2024 00:26:49 +0800
Subject: [PATCH 2/3] fix(plugin-vue2): a quick fix for loaders duplicating
 issue of vue-loader@15

---
 e2e/cases/vue2/sfc-style/index.test.ts        |  5 +-
 .../src/VueLoader15PitchFixPlugin.ts          | 49 +++++++++++++++++++
 packages/plugin-vue2/src/index.ts             |  5 ++
 packages/shared/src/chain.ts                  |  2 +
 4 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 packages/plugin-vue2/src/VueLoader15PitchFixPlugin.ts

diff --git a/e2e/cases/vue2/sfc-style/index.test.ts b/e2e/cases/vue2/sfc-style/index.test.ts
index 43990ae149..03b3777a9f 100644
--- a/e2e/cases/vue2/sfc-style/index.test.ts
+++ b/e2e/cases/vue2/sfc-style/index.test.ts
@@ -15,10 +15,7 @@ test('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',
-    '-webkit-calc(16px + env(safe-area-inset-bottom))',
-  );
+  await expect(body).toHaveCSS('padding', '16px');
 
   await rsbuild.close();
 });
diff --git a/packages/plugin-vue2/src/VueLoader15PitchFixPlugin.ts b/packages/plugin-vue2/src/VueLoader15PitchFixPlugin.ts
new file mode 100644
index 0000000000..1d5faa3eb0
--- /dev/null
+++ b/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;
+          }
+        },
+      );
+    });
+  }
+}
diff --git a/packages/plugin-vue2/src/index.ts b/packages/plugin-vue2/src/index.ts
index 8aad37931d..7381a6a67d 100644
--- a/packages/plugin-vue2/src/index.ts
+++ b/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);
diff --git a/packages/shared/src/chain.ts b/packages/shared/src/chain.ts
index 021d0ba0bf..d504a6ed6d 100644
--- a/packages/shared/src/chain.ts
+++ b/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: {

From d9a273acecd9f3d98da2fc816086c59724e09600 Mon Sep 17 00:00:00 2001
From: xc2 <xc2@users.noreply.github.com>
Date: Fri, 19 Apr 2024 00:30:30 +0800
Subject: [PATCH 3/3] chore: update snapshot

---
 packages/plugin-vue2/tests/__snapshots__/index.test.ts.snap | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/plugin-vue2/tests/__snapshots__/index.test.ts.snap b/packages/plugin-vue2/tests/__snapshots__/index.test.ts.snap
index 59bfbe69c2..1db2a93294 100644
--- a/packages/plugin-vue2/tests/__snapshots__/index.test.ts.snap
+++ b/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": {