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

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

Browse source 
* Fix define:vars in the static build flag

* Adds a changeset

* linting
This commit is contained in:
Matthew Phillips 2022-01-31 16:56:14 -05:00 • committed by GitHub
parent 187d5128af
commit 3d2c184962
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/mighty-lamps-drive.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Bug fix for define:vars with the --experimental-static-build flag

13
examples/fast-build/src/pages/index.astro
View file

@ -22,6 +22,11 @@ import ExternalHoisted from '../components/ExternalHoisted.astro';
color: purple; color: purple;
} }
</style> </style>
<style define:vars={{ color: 'blue' }}>
.define-vars h1 {
color: var(--color);
}
</style>
</head> </head>
<body> <body>
<section> <section>
@ -58,5 +63,13 @@ import ExternalHoisted from '../components/ExternalHoisted.astro';
<InlineHoisted /> <InlineHoisted />
<ExternalHoisted /> <ExternalHoisted />
</section> </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> </body>
</html> </html>

2
packages/astro/package.json
View file

@ -55,7 +55,7 @@
"test:match": "mocha --timeout 15000 -g" "test:match": "mocha --timeout 15000 -g"
}, },
"dependencies": { "dependencies": {
"@astrojs/compiler": "^0.9.2", "@astrojs/compiler": "^0.10.0",
"@astrojs/language-server": "^0.8.6", "@astrojs/language-server": "^0.8.6",
"@astrojs/markdown-remark": "^0.6.0", "@astrojs/markdown-remark": "^0.6.0",
"@astrojs/prism": "0.4.0", "@astrojs/prism": "0.4.0",

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

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

8
yarn.lock
View file

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