Moves Debug component's styles to be inlined (#3963)
This commit is contained in:
Matthew Phillips
GitHub
parent
aa06fd9f9a
commit
5fde2fd8bc
7 changed files with 69 additions and 13 deletions
5
.changeset/warm-news-fly.md
Normal file
5
.changeset/warm-news-fly.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Makes the Debug component's styles be inlined
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
26
packages/astro/test/code-component.test.js
Normal file
26
packages/astro/test/code-component.test.js
Normal 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
8
packages/astro/test/fixtures/code-component/package.json
vendored
Normal 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
11
packages/astro/test/fixtures/code-component/src/pages/index.astro
vendored
Normal 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>
|
||||
|
|
@ -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:*
|
||||
|
|
|
|||
Loading…
Reference in a new issue