diff --git a/packages/wxt/e2e/tests/output-structure.test.ts b/packages/wxt/e2e/tests/output-structure.test.ts index 2a691a9f..c3c638fa 100644 --- a/packages/wxt/e2e/tests/output-structure.test.ts +++ b/packages/wxt/e2e/tests/output-structure.test.ts @@ -84,6 +84,51 @@ describe('Output Directory Structure', () => { `); }); + it('should route content script CSS with Rollup strict deprecations enabled', async () => { + const project = new TestProject(); + project.addFile( + 'entrypoints/content.content/index.ts', + `import './style.css'; + export default defineContentScript({ + matches: ["*://*/*"], + main: () => {}, + })`, + ); + project.addFile( + 'entrypoints/content.content/style.css', + `body { color: purple }`, + ); + + await project.build({ + vite: () => ({ + build: { + rollupOptions: { + strictDeprecations: true, + }, + }, + }), + }); + + expect( + await project.serializeOutput([ + '.output/chrome-mv3/content-scripts/content.js', + ]), + ).toMatchInlineSnapshot(` + ".output/chrome-mv3/content-scripts/content.css + ---------------------------------------- + body{color:purple} + + ================================================================================ + .output/chrome-mv3/content-scripts/content.js + ---------------------------------------- + + ================================================================================ + .output/chrome-mv3/manifest.json + ---------------------------------------- + {"manifest_version":3,"name":"E2E Extension","description":"Example description","version":"0.0.0","content_scripts":[{"matches":["*://*/*"],"css":["content-scripts/content.css"],"js":["content-scripts/content.js"]}]}" + `); + }); + it('should allow inputs with invalid JS variable names, like dashes', async () => { const project = new TestProject(); project.addFile( diff --git a/packages/wxt/src/core/builders/vite/index.ts b/packages/wxt/src/core/builders/vite/index.ts index 43da7ebe..24247d74 100644 --- a/packages/wxt/src/core/builders/vite/index.ts +++ b/packages/wxt/src/core/builders/vite/index.ts @@ -29,6 +29,11 @@ import { } from '../../utils/virtual-modules'; import * as wxtPlugins from './plugins'; +interface RollupAssetNameInfo { + name?: string; + names?: string[]; +} + export async function createViteBuilder( wxtConfig: ResolvedConfig, hooks: Hookable, @@ -166,10 +171,12 @@ export async function createViteBuilder( ), // Output content script CSS to `content-scripts/`, but all other scripts are written to // `assets/`. - assetFileNames: ({ name }) => { + assetFileNames: (assetInfo) => { if ( entrypoint.type === 'content-script' && - name?.endsWith('css') + getRollupAssetNames(assetInfo).some((name) => + name.endsWith('css'), + ) ) { return `content-scripts/${entrypoint.name}.[ext]`; } else { @@ -392,6 +399,11 @@ export async function createViteBuilder( }; } +function getRollupAssetNames(assetInfo: RollupAssetNameInfo): string[] { + if (Array.isArray(assetInfo.names)) return assetInfo.names; + return assetInfo.name ? [assetInfo.name] : []; +} + function getBuildOutputChunks( result: Awaited>, ): BuildStepOutput['chunks'] {