Moves Debug component's styles to be inlined (#3963)

withastro · Jul 18, 2022 · 5fde2fd · 5fde2fd
1 parent aa06fd9
commit 5fde2fd
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 13 deletions.
diff --git a/.changeset/warm-news-fly.md b/.changeset/warm-news-fly.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Makes the Debug component's styles be inlined
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
@@ -36,8 +36,8 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
 
 /** Replace the shiki class name with a custom astro class name. */
 function repairShikiTheme(html: string): string {
-	// Replace "shiki" class naming with "astro" and add "is:raw".
-	html = html.replace('<pre class="shiki"', '<pre is:raw class="astro-code"');
+	// Replace "shiki" class naming with "astro"
+	html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
 	// Replace "shiki" css variable naming with "astro".
 	html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
 	// Handle code wrapping

diff --git a/packages/astro/components/Debug.astro b/packages/astro/components/Debug.astro
@@ -5,48 +5,48 @@ const key = Object.keys(Astro.props)[0];
 const value = Astro.props[key];
 ---
 
-<div class="debug">
-	<div class="debug-header">
-		<h2 class="debug-title"><span class="debug-label">Debug</span> <span class="debug-name">"{key}"</span></h2>
+<div class="astro-debug">
+	<div class="astro-debug-header">
+		<h2 class="astro-debug-title"><span class="astro-debug-label">Debug</span> <span class="astro-debug-name">"{key}"</span></h2>
 	</div>
 
 	<Code code={JSON.stringify(value, null, 2)} />
 </div>
 
-<style>
-	.debug {
+<style is:inline>
+	.astro-debug {
 		font-size: 14px;
 		padding: 1rem 1.5rem;
 		background: white;
 		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	}
 
-	.debug-header,
-	pre {
+	.astro-debug-header,
+	pre.astro-code {
 		margin: -1rem -1.5rem 1rem;
 		padding: 0.25rem 0.75rem;
 	}
 
-	.debug-header {
+	.astro-debug-header {
 		background: #ff1639;
 		border-radius: 4px;
 		border-bottom-left-radius: 0;
 		border-bottom-right-radius: 0;
 	}
 
-	.debug-title {
+	.astro-debug-title {
 		font-size: 1em;
 		color: white;
 		margin: 0.5em 0;
 	}
 
-	.debug-label {
+	.astro-debug-label {
 		font-weight: bold;
 		text-transform: uppercase;
 		margin-right: 0.75em;
 	}
 
-	pre {
+	pre.astro-code {
 		border: 1px solid #eee;
 		padding: 1rem 0.75rem;
 		border-radius: 4px;

diff --git a/packages/astro/test/code-component.test.js b/packages/astro/test/code-component.test.js
@@ -0,0 +1,26 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Code component', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({ root: './fixtures/code-component/' });
+		await fixture.build();
+	});
+
+	it('Debug component styles are not included in the page', async () => {
+		let html = await fixture.readFile('/index.html');
+		let $ = cheerio.load(html);
+		expect($('link[rel=stylesheet]')).to.have.a.lengthOf(0, 'No styles should be built');
+		expect($('style')).to.have.a.lengthOf(0);
+	});
+
+	it('is:raw attribute not serialized', async () => {
+		let html = await fixture.readFile('/index.html');
+		let $ = cheerio.load(html);
+		expect($('pre').attr('is:raw')).to.equal(undefined);
+	});
+});
diff --git a/packages/astro/test/fixtures/code-component/package.json b/packages/astro/test/fixtures/code-component/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/code-component",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/code-component/src/pages/index.astro b/packages/astro/test/fixtures/code-component/src/pages/index.astro
@@ -0,0 +1,11 @@
+---
+import { Code } from 'astro/components';
+---
+<html>
+	<head>
+		<title>Testing</title>
+	</head>
+	<body>
+		<Code lang="js" code={`let foo = 'bar';`} />
+	</body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml