withastro · matthewp · Feb 7, 2023 · Feb 7, 2023 · Feb 7, 2023 · Feb 7, 2023
diff --git a/.changeset/big-rocks-do.md b/.changeset/big-rocks-do.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent ?inline and ?raw CSS from being bundled as CSS
diff --git a/packages/astro/src/core/render/util.ts b/packages/astro/src/core/render/util.ts
@@ -15,4 +15,9 @@ const cssRe = new RegExp(
 		.map((s) => s.slice(1))
 		.join('|')})($|\\?)`
 );
-export const isCSSRequest = (request: string): boolean => cssRe.test(request);
+
+const rawRE = /(?:\?|&)raw(?:&|$)/;
+const inlineRE = /(?:\?|&)inline\b/;
+
+export const isCSSRequest = (request: string): boolean => cssRe.test(request) &&
+	!rawRE.test(request) && !inlineRE.test(request);
diff --git a/packages/astro/test/css-inline.test.js b/packages/astro/test/css-inline.test.js
@@ -0,0 +1,28 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+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();
+	});
+
+	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');
+	});
+
+	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');
+	});
+});
diff --git a/packages/astro/test/fixtures/css-inline/package.json b/packages/astro/test/fixtures/css-inline/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/css-inline",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/css-inline/src/inline.css b/packages/astro/test/fixtures/css-inline/src/inline.css
@@ -0,0 +1,3 @@
+body {
+	background: tomato;
+}
diff --git a/packages/astro/test/fixtures/css-inline/src/layouts/Layout.astro b/packages/astro/test/fixtures/css-inline/src/layouts/Layout.astro
@@ -0,0 +1,35 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+		--accent: 124, 58, 237;
+		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
+	}
+	html {
+		font-family: system-ui, sans-serif;
+		background-color: #F6F6F6;
+	}
+	code {
+		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+	}
+</style>
diff --git a/packages/astro/test/fixtures/css-inline/src/pages/index.astro b/packages/astro/test/fixtures/css-inline/src/pages/index.astro
@@ -0,0 +1,19 @@
+---
+import Layout from '../layouts/Layout.astro';
+import inline from '../inline.css?inline';
+import raw from '../raw.css?raw';
+---
+<Layout title="Welcome to Astro.">
+	<main>
+	<h1>Welcome to Astro</h1>
+	<p>
+	This are some `?inline` styles to show as object:
+	</p>
+	<p id="inline">
+		{inline}
+	</p>
+	<p id="raw">
+		{raw}
+	</p>
+	</main>
+</Layout>
diff --git a/packages/astro/test/fixtures/css-inline/src/raw.css b/packages/astro/test/fixtures/css-inline/src/raw.css
@@ -0,0 +1,3 @@
+main {
+	background: plum;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml