diff options
4 files changed, 4 insertions, 48 deletions
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index bfe095f52..e1ffd69e5 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -183,26 +183,7 @@ export async function renderComponent( } if (Component && (Component as any).isAstroComponentFactory) { - async function * renderAstroComponentInline(): AsyncGenerator<string, void, undefined> { - let iterable = await renderToIterable(result, Component as any, _props, slots); - // If this component added any define:vars styles and the head has already been - // sent out, we need to include those inline. - if(result.styles.size && alreadyHeadRenderedResults.has(result)) { - let styles = Array.from(result.styles); - result.styles.clear(); - for(const style of styles) { - if('define:vars' in style.props) { - // We only want to render the property value and not the full stylesheet - // which is bundled in the head. - style.children = ''; - yield markHTMLString(renderElement('style', style)); - } - } - } - yield * iterable; - } - - return renderAstroComponentInline(); + return renderToIterable(result, Component as any, _props, slots); } if (!Component && !_props['client:only']) { @@ -427,7 +408,6 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr island.children = `${html ?? ''}${template}`; - // Scripts to prepend let prescriptType: PrescriptType = needsHydrationScript ? 'both' : needsDirectiveScript @@ -435,7 +415,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr : null; let prescripts = getPrescripts(prescriptType, hydration.directive); - return markHTMLString(prestyles + prescripts + renderElement('astro-island', island, false)); + return markHTMLString(prescripts + renderElement('astro-island', island, false)); } /** Create the Astro.fetchContent() runtime function. */ @@ -739,8 +719,6 @@ export async function renderHead(result: SSRResult): Promise<string> { const styles = Array.from(result.styles) .filter(uniqueElements) .map((style) => renderElement('style', style)); - // Clear result.styles so that any new styles added will be inlined. - result.styles.clear(); const scripts = Array.from(result.scripts) .filter(uniqueElements) .map((script, i) => { diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js index 0a4bab43b..161063e97 100644 --- a/packages/astro/test/astro-directives.test.js +++ b/packages/astro/test/astro-directives.test.js @@ -22,7 +22,7 @@ describe('Directives', async () => { const html = await fixture.readFile('/define-vars/index.html'); const $ = cheerio.load(html); - expect($('style')).to.have.lengthOf(2); + expect($('style')).to.have.lengthOf(1); expect($('style').toString()).to.include('--bg: white;'); expect($('style').toString()).to.include('--fg: black;'); @@ -31,18 +31,9 @@ describe('Directives', async () => { .split(' ') .find((name) => /^astro-[A-Za-z0-9-]+/.test(name)); - expect($($('style').get(0)).toString().replace(/\s+/g, '')).to.equal( + expect($('style').toString().replace(/\s+/g, '')).to.equal( `<style>.${scopedClass}{--bg:white;--fg:black;}body{background:var(--bg);color:var(--fg)}</style>` ); - - const scopedTitleClass = $('.title') - .attr('class') - .split(' ') - .find((name) => /^astro-[A-Za-z0-9-]+/.test(name)); - - expect($($('style').get(1)).toString().replace(/\s+/g, '')).to.equal( - `<style>.${scopedTitleClass}{--textColor:red;}</style>` - ); }); it('set:html', async () => { diff --git a/packages/astro/test/fixtures/astro-directives/src/components/Title.astro b/packages/astro/test/fixtures/astro-directives/src/components/Title.astro deleted file mode 100644 index b59303ed6..000000000 --- a/packages/astro/test/fixtures/astro-directives/src/components/Title.astro +++ /dev/null @@ -1,10 +0,0 @@ ---- - const textColor = 'red' ---- -<h1 class="title">hello there</h1> - -<style define:vars={{textColor: textColor}}> - .title { - color: var(--textColor); - } -</style> diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro index 3df42aea1..db03705ad 100644 --- a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro +++ b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro @@ -1,5 +1,4 @@ --- -import Title from "../components/Title.astro" let foo = 'bar' let bg = 'white' let fg = 'black' @@ -18,7 +17,5 @@ let fg = 'black' <script id="inline" define:vars={{ foo }}> console.log(foo); </script> - - <Title /> </body> </html> |