diff options
4 files changed, 35 insertions, 2 deletions
diff --git a/.changeset/clever-pillows-boil.md b/.changeset/clever-pillows-boil.md new file mode 100644 index 000000000..8a3532767 --- /dev/null +++ b/.changeset/clever-pillows-boil.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Excludes hoisted scripts and styles from Astro components imported with `?url` or `?raw` diff --git a/packages/astro/src/vite-plugin-astro-server/vite.ts b/packages/astro/src/vite-plugin-astro-server/vite.ts index 62bfa95d7..eba9a81d1 100644 --- a/packages/astro/src/vite-plugin-astro-server/vite.ts +++ b/packages/astro/src/vite-plugin-astro-server/vite.ts @@ -2,6 +2,7 @@ import npath from 'node:path'; import { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from '../core/constants.js'; import type { ModuleLoader, ModuleNode } from '../core/module-loader/index.js'; import { unwrapId } from '../core/util.js'; +import { hasSpecialQueries } from '../vite-plugin-utils/index.js'; import { isCSSRequest } from './util.js'; /** @@ -42,6 +43,10 @@ export async function* crawlGraph( if (id === entry.id) { scanned.add(id); + // NOTE: It may be worth revisiting if we can crawl direct imports of the module since + // `.importedModules` would also include modules that are dynamically watched, not imported. + // That way we no longer need the below `continue` skips. + // CSS requests `importedModules` are usually from `@import`, but we don't really need // to crawl into those as the `@import` code are already inlined into this `id`. // If CSS requests `importedModules` contain non-CSS files, e.g. Tailwind might add HMR @@ -50,6 +55,13 @@ export async function* crawlGraph( if (isCSSRequest(id)) { continue; } + // Some special Vite queries like `?url` or `?raw` are known to be a simple default export + // and doesn't have any imports to crawl. However, since they would `this.addWatchFile` the + // underlying module, our logic would crawl into them anyways which is incorrect as they + // don't take part in the final rendering, so we skip it here. + if (hasSpecialQueries(id)) { + continue; + } for (const importedModule of entry.importedModules) { if (!importedModule.id) continue; diff --git a/packages/astro/test/astro-basic.test.js b/packages/astro/test/astro-basic.test.js index 957be04fb..2cfa5d27f 100644 --- a/packages/astro/test/astro-basic.test.js +++ b/packages/astro/test/astro-basic.test.js @@ -162,7 +162,14 @@ describe('Astro basic build', () => { it('Handles importing .astro?raw correctly', async () => { const html = await fixture.readFile('/import-queries/raw/index.html'); const $ = cheerio.load(html); - assert.equal($('.raw-value').text(), '<h1>Hello</h1>\n'); + const rawValue = $('.raw-value').text(); + assert.match(rawValue, /<h1>Hello<\/h1>/); + assert.match(rawValue, /<script>/); + assert.match(rawValue, /<style>/); + // The rest of HTML should not contain any scripts or styles hoisted from the raw import + const otherHtml = html.replace(rawValue, ''); + assert.doesNotMatch(otherHtml, /<script/); + assert.doesNotMatch(otherHtml, /<style/); }); describe('preview', () => { @@ -223,6 +230,13 @@ describe('Astro basic development', () => { assert.equal(res.status, 200); const html = await res.text(); const $ = cheerio.load(html); - assert.equal($('.raw-value').text(), '<h1>Hello</h1>\n'); + const rawValue = $('.raw-value').text(); + assert.match(rawValue, /<h1>Hello<\/h1>/); + assert.match(rawValue, /<script>/); + assert.match(rawValue, /<style>/); + // The rest of HTML should not contain any scripts or styles hoisted from the raw import. + // However we don't check them here as dev plugins could add scripts and styles dynam + assert.doesNotMatch(html, /_content.astro\?astro&type=style/); + assert.doesNotMatch(html, /_content.astro\?astro&type=script/); }); }); diff --git a/packages/astro/test/fixtures/astro-basic/src/pages/import-queries/_content.astro b/packages/astro/test/fixtures/astro-basic/src/pages/import-queries/_content.astro index 986a4a1a2..f7a749075 100644 --- a/packages/astro/test/fixtures/astro-basic/src/pages/import-queries/_content.astro +++ b/packages/astro/test/fixtures/astro-basic/src/pages/import-queries/_content.astro @@ -1 +1,3 @@ <h1>Hello</h1> +<script>console.log('Should not log')</script> +<style>h1 { color: red; }</style> |