diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts index 6a9bf957a..ec1372de8 100644 --- a/packages/plugin-rsc/e2e/basic.test.ts +++ b/packages/plugin-rsc/e2e/basic.test.ts @@ -1179,4 +1179,28 @@ function defineTest(f: Fixture) { await expect(page.locator(selector)).toHaveCSS('color', color) } }) + + test('assets', async ({ page }) => { + await page.goto(f.url()) + await waitForHydration(page) + await expect( + page.getByTestId('test-assets-server-import'), + ).not.toHaveJSProperty('naturalWidth', 0) + await expect( + page.getByTestId('test-assets-client-import'), + ).not.toHaveJSProperty('naturalWidth', 0) + + async function testBackgroundImage(selector: string) { + const url = await page + .locator(selector) + .evaluate((el) => getComputedStyle(el).backgroundImage) + expect(url).toMatch(/^url\(.*\)$/) + const response = await page.request.get(url.slice(5, -2)) + expect(response.ok()).toBeTruthy() + expect(response.headers()['content-type']).toBe('image/svg+xml') + } + + await testBackgroundImage('.test-assets-server-css') + await testBackgroundImage('.test-assets-client-css') + }) } diff --git a/packages/plugin-rsc/examples/basic/src/routes/assets/client-css.svg b/packages/plugin-rsc/examples/basic/src/routes/assets/client-css.svg new file mode 100644 index 000000000..6c87de9bb --- /dev/null +++ b/packages/plugin-rsc/examples/basic/src/routes/assets/client-css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/plugin-rsc/examples/basic/src/routes/assets/client.css b/packages/plugin-rsc/examples/basic/src/routes/assets/client.css new file mode 100644 index 000000000..b9fe5b89f --- /dev/null +++ b/packages/plugin-rsc/examples/basic/src/routes/assets/client.css @@ -0,0 +1,6 @@ +.test-assets-client-css { + background: url(./client-css.svg) no-repeat; + background-size: contain; + width: 20px; + height: 20px; +} diff --git a/packages/plugin-rsc/examples/basic/src/routes/assets/client.svg b/packages/plugin-rsc/examples/basic/src/routes/assets/client.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/packages/plugin-rsc/examples/basic/src/routes/assets/client.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/plugin-rsc/examples/basic/src/routes/assets/client.tsx b/packages/plugin-rsc/examples/basic/src/routes/assets/client.tsx new file mode 100644 index 000000000..14d14c63c --- /dev/null +++ b/packages/plugin-rsc/examples/basic/src/routes/assets/client.tsx @@ -0,0 +1,19 @@ +'use client' + +import './client.css' +import svg from './client.svg?no-inline' + +export function TestAssetsClient() { + return ( +
+ test-assets-client + + +
+ ) +} diff --git a/packages/plugin-rsc/examples/basic/src/routes/assets/server-css.svg b/packages/plugin-rsc/examples/basic/src/routes/assets/server-css.svg new file mode 100644 index 000000000..6c87de9bb --- /dev/null +++ b/packages/plugin-rsc/examples/basic/src/routes/assets/server-css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/plugin-rsc/examples/basic/src/routes/assets/server.css b/packages/plugin-rsc/examples/basic/src/routes/assets/server.css new file mode 100644 index 000000000..d7fef5877 --- /dev/null +++ b/packages/plugin-rsc/examples/basic/src/routes/assets/server.css @@ -0,0 +1,6 @@ +.test-assets-server-css { + background: url(./server-css.svg) no-repeat; + background-size: contain; + width: 20px; + height: 20px; +} diff --git a/packages/plugin-rsc/examples/basic/src/routes/assets/server.svg b/packages/plugin-rsc/examples/basic/src/routes/assets/server.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/packages/plugin-rsc/examples/basic/src/routes/assets/server.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/plugin-rsc/examples/basic/src/routes/assets/server.tsx b/packages/plugin-rsc/examples/basic/src/routes/assets/server.tsx new file mode 100644 index 000000000..1feddf7be --- /dev/null +++ b/packages/plugin-rsc/examples/basic/src/routes/assets/server.tsx @@ -0,0 +1,21 @@ +import { TestAssetsClient } from './client' +import './server.css' +import svg from './server.svg?no-inline' + +export function TestAssetsServer() { + return ( + <> +
+ test-assets-server + + +
+ + + ) +} diff --git a/packages/plugin-rsc/examples/basic/src/routes/root.tsx b/packages/plugin-rsc/examples/basic/src/routes/root.tsx index 70e6e0112..fa2940011 100644 --- a/packages/plugin-rsc/examples/basic/src/routes/root.tsx +++ b/packages/plugin-rsc/examples/basic/src/routes/root.tsx @@ -37,6 +37,7 @@ import { TestHmrSharedClient } from './hmr-shared/client' import { TestHmrSharedAtomic } from './hmr-shared/atomic/server' import { TestCssQueries } from './css-queries/server' import { TestImportMetaGlob } from './import-meta-glob/server' +import { TestAssetsServer } from './assets/server' export function Root(props: { url: URL }) { return ( @@ -87,6 +88,7 @@ export function Root(props: { url: URL }) { + ) diff --git a/packages/plugin-rsc/examples/basic/src/server.tsx b/packages/plugin-rsc/examples/basic/src/server.tsx index 27808ff17..b845bfba2 100644 --- a/packages/plugin-rsc/examples/basic/src/server.tsx +++ b/packages/plugin-rsc/examples/basic/src/server.tsx @@ -27,6 +27,7 @@ export default async function handler(request: Request): Promise { // `unsafe-eval` is required during dev since React uses eval for findSourceMapURL feature `script-src 'self' 'nonce-${nonce}' ${import.meta.env.DEV ? `'unsafe-eval'` : ``};`, `style-src 'self' 'unsafe-inline';`, + `img-src 'self' data:;`, // allow blob: worker for Vite server ping shared worker import.meta.hot && `worker-src 'self' blob:;`, ]