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

Fixes variable definitions in <style define:vars> (#3241)

Browse source 
* adding SSRResult.styles back to the rendered head

* adding test for define:vars in static build

* chore: adding changeset
This commit is contained in:
Tony Sullivan 2022-04-29 21:15:56 +00:00 committed by GitHub
parent f244b1c6e4
commit d25dc4c448
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/curly-crews-cross.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix a bug in define:vars preventing variables from being included in rendered styles

4
packages/astro/src/runtime/server/index.ts
View file

@ -543,7 +543,9 @@ const uniqueElements = (item: any, index: number, all: any[]) => {
// Renders a page to completion by first calling the factory callback, waiting for its result, and then appending
// styles and scripts into the head.
export async function renderHead(result: SSRResult): Promise<string> {
const styles = [];
const styles = Array.from(result.styles)
.filter(uniqueElements)
.map((style) => renderElement('style', style));
let needsHydrationStyles = false;
const scripts = Array.from(result.scripts)
.filter(uniqueElements)

16
packages/astro/test/astro-directives.test.js
View file

@ -18,6 +18,22 @@ describe('Directives', async () => {
expect($('script#inline').toString()).to.include('let foo = "bar"');
});
it('Passes define:vars to style elements', async () => {
const html = await fixture.readFile('/define-vars/index.html');
const $ = cheerio.load(html);
expect($('style')).to.have.lengthOf(1);
expect($('style').toString()).to.include('--bg: white;');
expect($('style').toString()).to.include('--fg: black;');
const scopedClass = $('html').attr('class').split(' ')
.find((name) => /^astro-[A-Za-z0-9-]+/.test(name));
expect($('style').toString().replace(/\s+/g, '')).to.equal(
`<style>.${scopedClass}{--bg:white;--fg:black;}body{background:var(--bg);color:var(--fg)}</style>`
);
});
it('set:html', async () => {
const html = await fixture.readFile('/set-html/index.html');
const $ = cheerio.load(html);

11
packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro vendored
View file

@ -1,9 +1,18 @@
---
let foo = 'bar'
let bg = 'white'
let fg = 'black'
---
<html>
<head></head>
<head>
<style define:vars={{bg, fg}}>
body {
background: var(--bg);
color: var(--fg);
}
</style>
</head>
<body>
<script id="inline" define:vars={{ foo }}>
console.log(foo);