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

* adding SSRResult.styles back to the rendered head * adding test for define:vars in static build * chore: adding changeset
withastro · Apr 29, 2022 · d25dc4c · d25dc4c
1 parent f244b1c
commit d25dc4c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/.changeset/curly-crews-cross.md b/.changeset/curly-crews-cross.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix a bug in define:vars preventing variables from being included in rendered styles
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -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)

diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js
@@ -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);

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