diff --git a/packages/wxt-demo/src/entrypoints/ui.content/index.ts b/packages/wxt-demo/src/entrypoints/ui.content/index.ts index 914e73c3..1104aed3 100644 --- a/packages/wxt-demo/src/entrypoints/ui.content/index.ts +++ b/packages/wxt-demo/src/entrypoints/ui.content/index.ts @@ -1,11 +1,16 @@ import 'uno.css'; import './style.css'; +import manualStyle from './manual-style.css?inline'; export default defineContentScript({ matches: ['https://*.duckduckgo.com/*'], cssInjectionMode: 'ui', async main(ctx) { + const style = document.createElement('style'); + style.textContent = manualStyle; + document.head.append(style); + const ui = await createShadowRootUi(ctx, { name: 'demo-ui', position: 'inline', diff --git a/packages/wxt-demo/src/entrypoints/ui.content/manual-style.css b/packages/wxt-demo/src/entrypoints/ui.content/manual-style.css new file mode 100644 index 00000000..bc4142da --- /dev/null +++ b/packages/wxt-demo/src/entrypoints/ui.content/manual-style.css @@ -0,0 +1,4 @@ +body { + padding: 2rem; + background-color: blanchedalmond; +} diff --git a/packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts b/packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts index 838e2061..3dad59a8 100644 --- a/packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts +++ b/packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts @@ -359,5 +359,63 @@ describe('Detect Dev Changes', () => { expect(actual).toEqual(expected); }); + + it('should detect changes to import files with `?suffix`', () => { + const importedPath = '/root/utils/shared.css?inline'; + const changedPath = '/root/utils/shared.css'; + const script1 = fakeContentScriptEntrypoint({ + inputPath: '/root/overlay1.content/index.ts', + }); + const script2 = fakeContentScriptEntrypoint({ + inputPath: '/root/overlay2.ts', + }); + const script3 = fakeContentScriptEntrypoint({ + inputPath: '/root/overlay3.content/index.ts', + }); + + const step1: BuildStepOutput = { + entrypoints: script1, + chunks: [ + fakeOutputChunk({ + moduleIds: [fakeFile(), importedPath], + }), + ], + }; + const step2: BuildStepOutput = { + entrypoints: script2, + chunks: [ + fakeOutputChunk({ + moduleIds: [fakeFile(), fakeFile(), fakeFile()], + }), + ], + }; + const step3: BuildStepOutput = { + entrypoints: script3, + chunks: [ + fakeOutputChunk({ + moduleIds: [importedPath, fakeFile(), fakeFile()], + }), + ], + }; + + const currentOutput: BuildOutput = { + manifest: fakeManifest(), + publicAssets: [], + steps: [step1, step2, step3], + }; + const expected: DevModeChange = { + type: 'content-script-reload', + cachedOutput: { + ...currentOutput, + steps: [step2], + }, + changedSteps: [step1, step3], + rebuildGroups: [script1, script3], + }; + + const actual = detectDevChanges([changedPath], currentOutput); + + expect(actual).toEqual(expected); + }); }); }); diff --git a/packages/wxt/src/core/utils/building/detect-dev-changes.ts b/packages/wxt/src/core/utils/building/detect-dev-changes.ts index b5884288..1fe00653 100644 --- a/packages/wxt/src/core/utils/building/detect-dev-changes.ts +++ b/packages/wxt/src/core/utils/building/detect-dev-changes.ts @@ -135,14 +135,26 @@ function findEffectedSteps( const changes: BuildStepOutput[] = []; const changedPath = normalizePath(changedFile); - const isChunkEffected = (chunk: OutputFile): boolean => - // If it's an HTML file with the same path, is is effected because HTML files need to be re-rendered - // - fileName is normalized, relative bundle path, ".html" - (chunk.type === 'asset' && - changedPath.replace('/index.html', '.html').endsWith(chunk.fileName)) || - // If it's a chunk that depends on the changed file, it is effected - // - moduleIds are absolute, normalized paths - (chunk.type === 'chunk' && chunk.moduleIds.includes(changedPath)); + const isChunkEffected = (chunk: OutputFile): boolean => { + switch (chunk.type) { + // If it's an HTML file with the same path, is is effected because HTML files need to be re-rendered + // - fileName is normalized, relative bundle path, ".html" + case 'asset': { + return changedPath + .replace('/index.html', '.html') + .endsWith(chunk.fileName); + } + // If it's a chunk that depends on the changed file, it is effected + // - moduleIds are absolute, normalized paths + case 'chunk': { + const modulePaths = chunk.moduleIds.map((path) => path.split('?')[0]); + return modulePaths.includes(changedPath); + } + default: { + return false; + } + } + }; for (const step of currentOutput.steps) { const effectedChunk = step.chunks.find((chunk) => isChunkEffected(chunk));