diff --git a/packages/astro/package.json b/packages/astro/package.json
index 690ee2070..64c102f82 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -39,7 +39,7 @@
     "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.1.0-canary.45",
+    "@astrojs/compiler": "^0.1.0-canary.46",
     "@astrojs/language-server": "^0.7.16",
     "@astrojs/markdown-remark": "^0.3.1",
     "@astrojs/markdown-support": "0.3.1",
diff --git a/packages/astro/src/runtime/astro.ts b/packages/astro/src/runtime/astro.ts
index a525a0d3f..d01716f1f 100644
--- a/packages/astro/src/runtime/astro.ts
+++ b/packages/astro/src/runtime/astro.ts
@@ -1,5 +1,7 @@
 import type { AstroComponent, AstroComponentFactory } from '../internal';
 
+import { spreadAttributes, defineStyleVars, defineScriptVars } from '../internal';
+
 export async function renderAstroComponent(component: InstanceType<typeof AstroComponent>) {
   let template = '';
 
@@ -24,3 +26,16 @@ export async function renderPage(result: any, Component: AstroComponentFactory,
   const scripts = Array.from(result.scripts);
   return template.replace('</head>', styles.join('\n') + scripts.join('\n') + '</head>');
 }
+
+function renderElement(name: string, { props: _props, children = ''}: { props: Record<any, any>, children?: string }) {
+  const { hoist: _, "data-astro-id": astroId, "define:vars": defineVars, ...props } = _props;
+  if (defineVars) {
+    if (name === 'style') {
+      children = defineStyleVars(astroId, defineVars) + '\n' + children;
+    }
+    if (name === 'script') {
+      children = defineScriptVars(defineVars) + '\n' + children;
+    }
+  }
+  return `<${name}${spreadAttributes(props)}>${children}</${name}>`
+}
diff --git a/yarn.lock b/yarn.lock
index 2d95f59dd..7721e128d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -106,10 +106,10 @@
     "@algolia/logger-common" "4.10.5"
     "@algolia/requester-common" "4.10.5"
 
-"@astrojs/compiler@^0.1.0-canary.45":
-  version "0.1.0-canary.45"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.1.0-canary.45.tgz#826ec2eba4785eb08095bd04210b74d1fada4b95"
-  integrity sha512-B68nKGSHh319vum/XP6o8mNcv6bYqg7ipvtqlT7kiaxqXQ/2zA4PZcnWShF7XZ4s6jgs8WG3Pv+vo5/1rPs8pw==
+"@astrojs/compiler@^0.1.0-canary.46":
+  version "0.1.0-canary.46"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.1.0-canary.46.tgz#99d12c9148c9233df81929204b823112ea26cb69"
+  integrity sha512-JwcPl90H59wjxP/Jx2Ub+OHGqgzkU+QFoZxur2CU028/2rwjkp2N1B5biAakS6g/8trIPwnZK/7iETKWOCGc+Q==
   dependencies:
     typescript "^4.3.5"