michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Matthew Phillips 2022-07-18 16:42:57 -04:00 committed by GitHub
parent aa06fd9f9a
commit 5fde2fd8bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 69 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/warm-news-fly.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Makes the Debug component's styles be inlined

4
packages/astro/components/Code.astro
View file

@ -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. */ /** Replace the shiki class name with a custom astro class name. */
function repairShikiTheme(html: string): string { function repairShikiTheme(html: string): string {
// Replace "shiki" class naming with "astro" and add "is:raw". // Replace "shiki" class naming with "astro"
html = html.replace('<pre class="shiki"', '<pre is:raw class="astro-code"'); html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
// Replace "shiki" css variable naming with "astro". // Replace "shiki" css variable naming with "astro".
html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-'); html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
// Handle code wrapping // Handle code wrapping

22
packages/astro/components/Debug.astro
View file

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

26
packages/astro/test/code-component.test.js Normal file
View file

@ -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);
});
});

8
packages/astro/test/fixtures/code-component/package.json vendored Normal file
View file

@ -0,0 +1,8 @@
{
"name": "@test/code-component",
"version": "0.0.0",
"private": true,
"dependencies": {
"astro": "workspace:*"
}
}

11
packages/astro/test/fixtures/code-component/src/pages/index.astro vendored Normal file
View file

@ -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>

6
pnpm-lock.yaml
View file

@ -1359,6 +1359,12 @@ importers:
dependencies: dependencies:
astro: link:../../.. astro: link:../../..
packages/astro/test/fixtures/code-component:
specifiers:
astro: workspace:*
dependencies:
astro: link:../../..
packages/astro/test/fixtures/component-library: packages/astro/test/fixtures/component-library:
specifiers: specifiers:
'@astrojs/preact': workspace:* '@astrojs/preact': workspace:*