From 8f699e5a427a68cb2e0ffb9048afc398b49769ba Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Tue, 26 Oct 2021 14:36:53 -0700
Subject: [PATCH] fix: scope `define:vars` to `:root` for `<style global>`
 (#1663)

---
 packages/astro/src/runtime/server/index.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index d839eafe2..827676452 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -338,12 +338,12 @@ function serializeListValue(value: any) {
   }
 }
 
-export function defineStyleVars(astroId: string, vars: Record<any, any>) {
+export function defineStyleVars(selector: string, vars: Record<any, any>) {
   let output = '\n';
   for (const [key, value] of Object.entries(vars)) {
     output += `  --${key}: ${value};\n`;
   }
-  return `.astro-${astroId} {${output}}`;
+  return `${selector} {${output}}`;
 }
 
 export function defineScriptVars(vars: Record<any, any>) {
@@ -380,10 +380,15 @@ export async function renderAstroComponent(component: InstanceType<typeof AstroC
 }
 
 function renderElement(name: string, { props: _props, children = '' }: { props: Record<any, any>; children?: string }) {
-  const { hoist: _, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props;
+  // Do not print `hoist`, `lang`, `global`
+  const { hoist: _0, lang: _1, global = false, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props;
   if (defineVars) {
     if (name === 'style') {
-      children = defineStyleVars(astroId, defineVars) + '\n' + children;
+      if (global) {
+        children = defineStyleVars(`:root`, defineVars) + '\n' + children;
+      } else {
+        children = defineStyleVars(`.astro-${astroId}`, defineVars) + '\n' + children;
+      }
     }
     if (name === 'script') {
       children = defineScriptVars(defineVars) + '\n' + children;