summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Happydev <81974850+MoustaphaDev@users.noreply.github.com> 2023-03-06 13:06:55 +0000
committerGravatar GitHub <noreply@github.com> 2023-03-06 08:06:55 -0500
commite0844852d31d0f5680f2710aaa84e3e808aeb88d (patch)
tree52155ed8ce8b7e7c6d6444c827741dd09f04ae45
parent9d236c9417317f318639ce8d9c1cb24a34b4b0f5 (diff)
downloadastro-e0844852d31d0f5680f2710aaa84e3e808aeb88d.tar.gz
astro-e0844852d31d0f5680f2710aaa84e3e808aeb88d.tar.zst
astro-e0844852d31d0f5680f2710aaa84e3e808aeb88d.zip
Fix `?inline` and `?raw` css query suffixes inlined in style tags in development (#6426)
* test: add test cases * test: add another expectation * fix: don't crawl inline and raw css queries * chore: changeset
-rw-r--r--.changeset/witty-taxis-accept.md5
-rw-r--r--packages/astro/src/core/render/dev/css.ts4
-rw-r--r--packages/astro/test/css-inline.test.js59
-rw-r--r--pnpm-lock.yaml8
4 files changed, 56 insertions, 20 deletions
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<string, string>();
for await (const importedModule of crawlGraph(loader, viteID(filePath), true)) {
- if (isCSSRequest(importedModule.url)) {
+ if (isBuildableCSSRequest(importedModule.url)) {
let ssrModule: Record<string, any>;
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('?inline is imported as a string', async () => {
- const html = await fixture.readFile('/index.html');
- const $ = cheerio.load(html);
+ it('?raw is imported as a string', async () => {
+ const html = await fixture.readFile('/index.html');
+ const $ = cheerio.load(html);
- expect($('#inline').text()).to.contain('tomato');
+ expect($('#raw').text()).to.contain('plum');
+ 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);
+ describe('Dev', () => {
+ /** @type {import('./test-utils').DevServer} */
+ let devServer;
+
+ before(async () => {
+ devServer = await fixture.startDevServer();
+ });
+
+ after(async () => {
+ await devServer.stop();
+ });
+
+ 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($('#raw').text()).to.contain('plum');
+ 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:*