diff options
author | 2022-07-18 16:42:57 -0400 | |
---|---|---|
committer | 2022-07-18 16:42:57 -0400 | |
commit | 5fde2fd8bcc7f10e8a449146fa89843f6e6b6aa3 (patch) | |
tree | 3d3ca9d5dd7a02d083b281c2ba81211a5de5e312 | |
parent | aa06fd9f9a290633620a5d937cdaf1b89bf2a1b0 (diff) | |
download | astro-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.md | 5 | ||||
-rw-r--r-- | packages/astro/components/Code.astro | 4 | ||||
-rw-r--r-- | packages/astro/components/Debug.astro | 22 | ||||
-rw-r--r-- | packages/astro/test/code-component.test.js | 26 | ||||
-rw-r--r-- | packages/astro/test/fixtures/code-component/package.json | 8 | ||||
-rw-r--r-- | packages/astro/test/fixtures/code-component/src/pages/index.astro | 11 | ||||
-rw-r--r-- | pnpm-lock.yaml | 6 |
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:* |