Fix define:vars in the static build flag (withastro#2511)

* Fix define:vars in the static build flag * Adds a changeset * linting
harrytran998 · Jan 31, 2022 · 3d2c184 · 3d2c184
1 parent 187d512
commit 3d2c184
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 15 deletions.
diff --git a/.changeset/mighty-lamps-drive.md b/.changeset/mighty-lamps-drive.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Bug fix for define:vars with the --experimental-static-build flag
diff --git a/examples/fast-build/src/pages/index.astro b/examples/fast-build/src/pages/index.astro
@@ -22,6 +22,11 @@ import ExternalHoisted from '../components/ExternalHoisted.astro';
  color: purple;
  }
  </style>
+ <style define:vars={{ color: 'blue' }}>
+ .define-vars h1 {
+ color: var(--color);
+ }
+ </style>
  </head>
  <body>
  <section>
@@ -58,5 +63,13 @@ import ExternalHoisted from '../components/ExternalHoisted.astro';
  <InlineHoisted />
  <ExternalHoisted />
  </section>
+
+ <section class="define-vars">
+ <h1>define:vars</h1>
+ <h2></h2>
+ <script define:vars={{ color: 'blue' }}>
+ document.querySelector('.define-vars h2').textContent = `Color: ${color}`;
+ </script>
+ </section>
 </body>
 </html>
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -55,7 +55,7 @@
  "test:match": "mocha --timeout 15000 -g"
  },
  "dependencies": {
- "@astrojs/compiler": "^0.9.2",
+ "@astrojs/compiler": "^0.10.0",
  "@astrojs/language-server": "^0.8.6",
  "@astrojs/markdown-remark": "^0.6.0",
  "@astrojs/prism": "0.4.0",

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -392,16 +392,16 @@ const uniqueElements = (item: any, index: number, all: any[]) => {
 // styles and scripts into the head.
 export async function renderPage(result: SSRResult, Component: AstroComponentFactory, props: any, children: any) {
  const template = await renderToString(result, Component, props, children);
- const styles = result._metadata.experimentalStaticBuild
- ? []
- : Array.from(result.styles)
-  .filter(uniqueElements)
- .map((style) =>
-  renderElement('style', {
-  ...style,
-  props: { ...style.props, 'astro-style': true },
-  })
-  );
+ const styles = Array.from(result.styles)
+ .filter(uniqueElements)
+ .map((style) => {
+ const styleChildren = result._metadata.experimentalStaticBuild ? '' : style.children;
+
+ return renderElement('style', {
+ children: styleChildren,
+ props: { ...style.props, 'astro-style': true },
+ });
+ });
  let needsHydrationStyles = false;
  const scripts = Array.from(result.scripts)
  .filter(uniqueElements)

diff --git a/yarn.lock b/yarn.lock
@@ -130,10 +130,10 @@
  jsonpointer "^5.0.0"
  leven "^3.1.0"
 
-"@astrojs/compiler@^0.9.2":
- version "0.9.2"
- resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.9.2.tgz#aea226472046cb88c0ff20661be34af84d983feb"
- integrity sha512-8yxdyokSNmTbcDfW75k5NcPKMBnPTfzLHVxhdiUrII7Zqh/OG9SaOZWFCnvFhU8dkQBUU6B1eh/ABAHwnxZWGw==
+"@astrojs/compiler@^0.10.0":
+ version "0.10.0"
+ resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.10.0.tgz#6ba2707bf9a91017fd72fb46b1d7865036b71c09"
+ integrity sha512-TbeuITyhRGlQowipNX7Q8o5QczVjSxlE68xKh7i1swTxUhM8K/cnCPSyzTsWiuFWY4C5PDI1GREUaD3BHYfzqQ==
  dependencies:
  typescript "^4.3.5"