diff --git a/test/static-assets/index.test.ts b/test/static-assets/index.test.ts new file mode 100644 index 0000000..c46049b --- /dev/null +++ b/test/static-assets/index.test.ts @@ -0,0 +1,37 @@ +import { readFileSync } from 'node:fs'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { expect, test } from '@playwright/test'; +import { createRsbuild } from '@rsbuild/core'; +import { pluginTailwindCSS } from '../../src'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +test('should not interfere with static asset queries (?url, ?raw)', async ({ + page, +}) => { + const rsbuild = await createRsbuild({ + cwd: __dirname, + rsbuildConfig: { + plugins: [pluginTailwindCSS()], + }, + }); + + await rsbuild.build(); + const { server, urls } = await rsbuild.preview(); + + await page.goto(urls[0]); + + const cssUrl = await page.evaluate(() => window.cssUrl); + const cssRaw = await page.evaluate(() => window.cssRaw); + + // Check ?url + expect(cssUrl).toMatch(/\.css$/); + + // Check ?raw + // It should contain the original CSS content, NOT Tailwind's injected content (like @tailwind base etc.) + const originalCss = readFileSync(resolve(__dirname, 'src/index.css'), 'utf-8'); + expect(cssRaw.trim()).toBe(originalCss.trim()); + + await server.close(); +}); diff --git a/test/static-assets/src/index.css b/test/static-assets/src/index.css new file mode 100644 index 0000000..a15c877 --- /dev/null +++ b/test/static-assets/src/index.css @@ -0,0 +1,3 @@ +.foo { + color: red; +} diff --git a/test/static-assets/src/index.js b/test/static-assets/src/index.js new file mode 100644 index 0000000..dc11f60 --- /dev/null +++ b/test/static-assets/src/index.js @@ -0,0 +1,9 @@ +// import url from './index.css?url'; +const url = new URL('./index.css', import.meta.url).href; +import raw from './index.css?raw'; + +window.cssUrl = url; +window.cssRaw = raw; + +// We also need to inject it to make sure it doesn't break normal behavior +import './index.css';