summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Matthew Phillips <matthew@skypack.dev> 2022-07-18 16:42:57 -0400
committerGravatar GitHub <noreply@github.com> 2022-07-18 16:42:57 -0400
commit5fde2fd8bcc7f10e8a449146fa89843f6e6b6aa3 (patch)
tree3d3ca9d5dd7a02d083b281c2ba81211a5de5e312
parentaa06fd9f9a290633620a5d937cdaf1b89bf2a1b0 (diff)
downloadastro-5fde2fd8bcc7f10e8a449146fa89843f6e6b6aa3.tar.gz
astro-5fde2fd8bcc7f10e8a449146fa89843f6e6b6aa3.tar.zst
astro-5fde2fd8bcc7f10e8a449146fa89843f6e6b6aa3.zip
Moves Debug component's styles to be inlined (#3963)
-rw-r--r--.changeset/warm-news-fly.md5
-rw-r--r--packages/astro/components/Code.astro4
-rw-r--r--packages/astro/components/Debug.astro22
-rw-r--r--packages/astro/test/code-component.test.js26
-rw-r--r--packages/astro/test/fixtures/code-component/package.json8
-rw-r--r--packages/astro/test/fixtures/code-component/src/pages/index.astro11
-rw-r--r--pnpm-lock.yaml6
7 files changed, 69 insertions, 13 deletions
diff --git a/.changeset/warm-news-fly.md b/.changeset/warm-news-fly.md
new file mode 100644
index 000000000..389a39049
--- /dev/null
+++ 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
index e829f87be..a2052c816 100644
--- 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
index 4256041cd..1eaae6af5 100644
--- 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
new file mode 100644
index 000000000..c80107681
--- /dev/null
+++ 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
new file mode 100644
index 000000000..a33708105
--- /dev/null
+++ 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
new file mode 100644
index 000000000..763f32cae
--- /dev/null
+++ 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
index f2a34e998..8a5a8b42a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1359,6 +1359,12 @@ importers:
dependencies:
astro: link:../../..
+ packages/astro/test/fixtures/code-component:
+ specifiers:
+ astro: workspace:*
+ dependencies:
+ astro: link:../../..
+
packages/astro/test/fixtures/component-library:
specifiers:
'@astrojs/preact': workspace:*