diff --git a/e2e/cases/vue2/sfc-style/index.test.ts b/e2e/cases/vue2/sfc-style/index.test.ts index 8c6684c566..03b3777a9f 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,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(); }); 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; } + + 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