diff --git a/.changeset/witty-taxis-accept.md b/.changeset/witty-taxis-accept.md new file mode 100644 index 000000000..c9cd5ef6d --- /dev/null +++ b/.changeset/witty-taxis-accept.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Prevent `?inline` and `?raw` css query suffixes from injecting style tags in development diff --git a/packages/astro/src/core/render/dev/css.ts b/packages/astro/src/core/render/dev/css.ts index 7e9eebed2..db33935d5 100644 --- a/packages/astro/src/core/render/dev/css.ts +++ b/packages/astro/src/core/render/dev/css.ts @@ -2,7 +2,7 @@ import type { ModuleLoader } from '../../module-loader/index'; import { RuntimeMode } from '../../../@types/astro.js'; import { viteID } from '../../util.js'; -import { isCSSRequest } from './util.js'; +import { isBuildableCSSRequest } from './util.js'; import { crawlGraph } from './vite.js'; /** Given a filePath URL, crawl Vite’s module graph to find all style imports. */ @@ -15,7 +15,7 @@ export async function getStylesForURL( const importedStylesMap = new Map(); for await (const importedModule of crawlGraph(loader, viteID(filePath), true)) { - if (isCSSRequest(importedModule.url)) { + if (isBuildableCSSRequest(importedModule.url)) { let ssrModule: Record; try { // The SSR module is possibly not loaded. Load it if it's null. diff --git a/packages/astro/test/css-inline.test.js b/packages/astro/test/css-inline.test.js index 01d3133b8..03bee955b 100644 --- a/packages/astro/test/css-inline.test.js +++ b/packages/astro/test/css-inline.test.js @@ -4,25 +4,64 @@ import { loadFixture } from './test-utils.js'; describe('Importing raw/inlined CSS', () => { let fixture; - before(async () => { fixture = await loadFixture({ root: './fixtures/css-inline/', }); - await fixture.build(); + }); + describe('Build', () => { + before(async () => { + await fixture.build(); + }); + it('?inline is imported as a string', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('#inline').text()).to.contain('tomato'); + expect($('link[rel=stylesheet]')).to.have.lengthOf(1); + expect($('style')).to.have.lengthOf(0); + }); + + it('?raw is imported as a string', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('#raw').text()).to.contain('plum'); + expect($('link[rel=stylesheet]')).to.have.lengthOf(1); + expect($('style')).to.have.lengthOf(0); + }); }); - it('?inline is imported as a string', async () => { - const html = await fixture.readFile('/index.html'); - const $ = cheerio.load(html); + describe('Dev', () => { + /** @type {import('./test-utils').DevServer} */ + let devServer; - expect($('#inline').text()).to.contain('tomato'); - }); + before(async () => { + devServer = await fixture.startDevServer(); + }); - it('?raw is imported as a string', async () => { - const html = await fixture.readFile('/index.html'); - const $ = cheerio.load(html); + after(async () => { + await devServer.stop(); + }); - expect($('#raw').text()).to.contain('plum'); + it("?inline is imported as string and doesn't make css bundled ", async () => { + const response = await fixture.fetch('/'); + const html = await response.text(); + const $ = cheerio.load(html); + + expect($('#inline').text()).to.contain('tomato'); + expect($('link[rel=stylesheet]')).to.have.lengthOf(0); + expect($('style')).to.have.lengthOf(1); + }); + + it("?raw is imported as a string and doesn't make css bundled", async () => { + const response = await fixture.fetch('/'); + const html = await response.text(); + const $ = cheerio.load(html); + + expect($('#raw').text()).to.contain('plum'); + expect($('link[rel=stylesheet]')).to.have.lengthOf(0); + expect($('style')).to.have.lengthOf(1); + }); }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e6fbaa05d..25643eafd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1120,14 +1120,6 @@ importers: astro: link:../../.. vue: 3.2.47 - packages/astro/test/benchmark/simple: - specifiers: - '@astrojs/node': workspace:* - astro: workspace:* - dependencies: - '@astrojs/node': link:../../../../integrations/node - astro: link:../../.. - packages/astro/test/fixtures/0-css: specifiers: '@astrojs/react': workspace:*