diff --git a/src/@types/optimizer.ts b/src/@types/transformer.ts
similarity index 89%
rename from src/@types/optimizer.ts
rename to src/@types/transformer.ts
index b6459ab51..7f4167558 100644
--- a/src/@types/optimizer.ts
+++ b/src/@types/transformer.ts
@@ -8,7 +8,7 @@ export interface NodeVisitor {
   leave?: VisitorFn;
 }
 
-export interface Optimizer {
+export interface Transformer {
   visitors?: {
     html?: Record<string, NodeVisitor>;
     css?: Record<string, NodeVisitor>;
@@ -16,7 +16,7 @@ export interface Optimizer {
   finalize: () => Promise<void>;
 }
 
-export interface OptimizeOptions {
+export interface TransformOptions {
   compileOptions: CompileOptions;
   filename: string;
   fileID: string;
diff --git a/src/build/bundle.ts b/src/build/bundle.ts
index ba1b8f2c2..b55828c2e 100644
--- a/src/build/bundle.ts
+++ b/src/build/bundle.ts
@@ -7,7 +7,7 @@ import type { LogOptions } from '../logger';
 import esbuild from 'esbuild';
 import { promises as fsPromises } from 'fs';
 import { parse } from '../parser/index.js';
-import { optimize } from '../compiler/optimize/index.js';
+import { transform } from '../compiler/transform/index.js';
 import { getAttrValue } from '../ast.js';
 import { walk } from 'estree-walker';
 import babelParser from '@babel/parser';
@@ -86,7 +86,7 @@ export async function collectDynamicImports(filename: URL, { astroConfig, loggin
     return imports;
   }
 
-  await optimize(ast, {
+  await transform(ast, {
     filename: filename.pathname,
     fileID: '',
     compileOptions: {
diff --git a/src/compiler/codegen.ts b/src/compiler/codegen.ts
index 59cc2c702..8bcf3f49d 100644
--- a/src/compiler/codegen.ts
+++ b/src/compiler/codegen.ts
@@ -78,9 +78,10 @@ function getAttributes(attrs: Attribute[]): Record<string, string> {
       continue;
     }
     switch (val.type) {
-      case 'MustacheTag':
-        result[attr.name] = '(' + val.content + ')';
+      case 'MustacheTag': {
+        result[attr.name] = '(' + val.expression.codeStart + ')';
         continue;
+      }
       case 'Text':
         result[attr.name] = JSON.stringify(getTextFromAttribute(val));
         continue;
@@ -93,13 +94,21 @@ function getAttributes(attrs: Attribute[]): Record<string, string> {
 
 /** Get value from a TemplateNode Attribute (text attributes only!) */
 function getTextFromAttribute(attr: any): string {
-  if (attr.raw !== undefined) {
-    return attr.raw;
+  switch(attr.type) {
+    case 'Text': {
+      if (attr.raw !== undefined) {
+        return attr.raw;
+      }
+      if (attr.data !== undefined) {
+        return attr.data;
+      }
+      break;
+    }
+    case 'MustacheTag': {
+      return attr.expression.codeStart;
+    }
   }
-  if (attr.data !== undefined) {
-    return attr.data;
-  }
-  throw new Error('UNKNOWN attr');
+  throw new Error(`Unknown attribute type ${attr.type}`);
 }
 
 /** Convert TemplateNode attributes to string */
@@ -238,7 +247,7 @@ function getComponentWrapper(_name: string, { type, plugin, url }: ComponentInfo
   }
 }
 
-/** Evaluate mustache expression (safely) */
+/** Evaluate expression (safely) */
 function compileExpressionSafe(raw: string): string {
   let { code } = transformSync(raw, {
     loader: 'tsx',
@@ -468,33 +477,19 @@ function compileHtml(enterNode: TemplateNode, state: CodegenState, compileOption
   walk(enterNode, {
     enter(node: TemplateNode) {
       switch (node.type) {
-        case 'MustacheTag':
-          let code = compileExpressionSafe(node.content);
-
-          let matches: RegExpExecArray[] = [];
-          let match: RegExpExecArray | null | undefined;
-          const H_COMPONENT_SCANNER = /h\(['"]?([A-Z].*?)['"]?,/gs;
-          const regex = new RegExp(H_COMPONENT_SCANNER);
-          while ((match = regex.exec(code))) {
-            matches.push(match);
+        case 'Expression': {
+          let child = '';
+          if(node.children!.length) {
+            child = compileHtml(node.children![0], state, compileOptions);
           }
-          for (const astroComponent of matches.reverse()) {
-            const name = astroComponent[1];
-            const [componentName, componentKind] = name.split(':');
-            if (!components[componentName]) {
-              throw new Error(`Unknown Component: ${componentName}`);
-            }
-            const { wrapper, wrapperImport } = getComponentWrapper(name, components[componentName], { astroConfig, dynamicImports, filename });
-            if (wrapperImport) {
-              importExportStatements.add(wrapperImport);
-            }
-            if (wrapper !== name) {
-              code = code.slice(0, astroComponent.index + 2) + wrapper + code.slice(astroComponent.index + astroComponent[0].length - 1);
-            }
-          }
-          outSource += `,(${code.trim().replace(/\;$/, '')})`;
+          let raw = node.codeStart + child + node.codeEnd;
+          // TODO Do we need to compile this now, or should we compile the entire module at the end?
+          let code = compileExpressionSafe(raw).trim().replace(/\;$/, '');
+          outSource += `,(${code})`;
           this.skip();
-          return;
+          break;
+        }
+        case 'MustacheTag':
         case 'Comment':
           return;
         case 'Fragment':
@@ -557,11 +552,11 @@ function compileHtml(enterNode: TemplateNode, state: CodegenState, compileOption
     leave(node, parent, prop, index) {
       switch (node.type) {
         case 'Text':
-        case 'MustacheTag':
         case 'Attribute':
         case 'Comment':
-          return;
         case 'Fragment':
+        case 'Expression':
+        case 'MustacheTag':
           return;
         case 'Slot':
         case 'Head':
diff --git a/src/compiler/index.ts b/src/compiler/index.ts
index d33527b9b..db50abec8 100644
--- a/src/compiler/index.ts
+++ b/src/compiler/index.ts
@@ -11,7 +11,7 @@ import { parse } from '../parser/index.js';
 import { createMarkdownHeadersCollector } from './markdown/micromark-collect-headers.js';
 import { encodeMarkdown } from './markdown/micromark-encode.js';
 import { encodeAstroMdx } from './markdown/micromark-mdx-astro.js';
-import { optimize } from './optimize/index.js';
+import { transform } from './transform/index.js';
 import { codegen } from './codegen.js';
 
 /** Return Astro internal import URL */
@@ -29,7 +29,7 @@ interface ConvertAstroOptions {
  * .astro -> .jsx
  * Core function processing .astro files. Initiates all 3 phases of compilation:
  * 1. Parse
- * 2. Optimize
+ * 2. Transform
  * 3. Codegen
  */
 async function convertAstroToJsx(template: string, opts: ConvertAstroOptions): Promise<TransformResult> {
@@ -40,8 +40,8 @@ async function convertAstroToJsx(template: string, opts: ConvertAstroOptions): P
     filename,
   });
 
-  // 2. Optimize the AST
-  await optimize(ast, opts);
+  // 2. Transform the AST
+  await transform(ast, opts);
 
   // 3. Turn AST into JSX
   return await codegen(ast, opts);
diff --git a/src/compiler/optimize/doctype.ts b/src/compiler/transform/doctype.ts
similarity index 88%
rename from src/compiler/optimize/doctype.ts
rename to src/compiler/transform/doctype.ts
index 176880c08..d19b01f81 100644
--- a/src/compiler/optimize/doctype.ts
+++ b/src/compiler/transform/doctype.ts
@@ -1,7 +1,7 @@
-import { Optimizer } from '../../@types/optimizer';
+import { Transformer } from '../../@types/transformer';
 
-/** Optimize <!doctype> tg */
-export default function (_opts: { filename: string; fileID: string }): Optimizer {
+/** Transform <!doctype> tg */
+export default function (_opts: { filename: string; fileID: string }): Transformer {
   let hasDoctype = false;
 
   return {
diff --git a/src/compiler/optimize/index.ts b/src/compiler/transform/index.ts
similarity index 67%
rename from src/compiler/optimize/index.ts
rename to src/compiler/transform/index.ts
index fcbd6e950..6a81b92b0 100644
--- a/src/compiler/optimize/index.ts
+++ b/src/compiler/transform/index.ts
@@ -1,13 +1,13 @@
 import type { Ast, TemplateNode } from '../../parser/interfaces';
-import type { NodeVisitor, OptimizeOptions, Optimizer, VisitorFn } from '../../@types/optimizer';
+import type { NodeVisitor, TransformOptions, Transformer, VisitorFn } from '../../@types/transformer';
 
 import { walk } from 'estree-walker';
 
-// Optimizers
-import optimizeStyles from './styles.js';
-import optimizeDoctype from './doctype.js';
-import optimizeModuleScripts from './module-scripts.js';
-import optimizeCodeBlocks from './prism.js';
+// Transformers
+import transformStyles from './styles.js';
+import transformDoctype from './doctype.js';
+import transformModuleScripts from './module-scripts.js';
+import transformCodeBlocks from './prism.js';
 
 interface VisitorCollection {
   enter: Map<string, VisitorFn[]>;
@@ -24,23 +24,23 @@ function addVisitor(visitor: NodeVisitor, collection: VisitorCollection, nodeNam
   collection[event].set(nodeName, visitors);
 }
 
-/** Compile visitor actions from optimizer */
-function collectVisitors(optimizer: Optimizer, htmlVisitors: VisitorCollection, cssVisitors: VisitorCollection, finalizers: Array<() => Promise<void>>) {
-  if (optimizer.visitors) {
-    if (optimizer.visitors.html) {
-      for (const [nodeName, visitor] of Object.entries(optimizer.visitors.html)) {
+/** Compile visitor actions from transformer */
+function collectVisitors(transformer: Transformer, htmlVisitors: VisitorCollection, cssVisitors: VisitorCollection, finalizers: Array<() => Promise<void>>) {
+  if (transformer.visitors) {
+    if (transformer.visitors.html) {
+      for (const [nodeName, visitor] of Object.entries(transformer.visitors.html)) {
         addVisitor(visitor, htmlVisitors, nodeName, 'enter');
         addVisitor(visitor, htmlVisitors, nodeName, 'leave');
       }
     }
-    if (optimizer.visitors.css) {
-      for (const [nodeName, visitor] of Object.entries(optimizer.visitors.css)) {
+    if (transformer.visitors.css) {
+      for (const [nodeName, visitor] of Object.entries(transformer.visitors.css)) {
         addVisitor(visitor, cssVisitors, nodeName, 'enter');
         addVisitor(visitor, cssVisitors, nodeName, 'leave');
       }
     }
   }
-  finalizers.push(optimizer.finalize);
+  finalizers.push(transformer.finalize);
 }
 
 /** Utility for formatting visitors */
@@ -74,17 +74,17 @@ function walkAstWithVisitors(tmpl: TemplateNode, collection: VisitorCollection)
 }
 
 /**
- * Optimize
+ * Transform
  * Step 2/3 in Astro SSR.
- * Optimize is the point at which we mutate the AST before sending off to
+ * Transform is the point at which we mutate the AST before sending off to
  * Codegen, and then to Snowpack. In some ways, it‘s a preprocessor.
  */
-export async function optimize(ast: Ast, opts: OptimizeOptions) {
+export async function transform(ast: Ast, opts: TransformOptions) {
   const htmlVisitors = createVisitorCollection();
   const cssVisitors = createVisitorCollection();
   const finalizers: Array<() => Promise<void>> = [];
 
-  const optimizers = [optimizeStyles(opts), optimizeDoctype(opts), optimizeModuleScripts(opts), optimizeCodeBlocks(ast.module)];
+  const optimizers = [transformStyles(opts), transformDoctype(opts), transformModuleScripts(opts), transformCodeBlocks(ast.module)];
 
   for (const optimizer of optimizers) {
     collectVisitors(optimizer, htmlVisitors, cssVisitors, finalizers);
diff --git a/src/compiler/optimize/module-scripts.ts b/src/compiler/transform/module-scripts.ts
similarity index 86%
rename from src/compiler/optimize/module-scripts.ts
rename to src/compiler/transform/module-scripts.ts
index 9d4949215..aff1ec4f6 100644
--- a/src/compiler/optimize/module-scripts.ts
+++ b/src/compiler/transform/module-scripts.ts
@@ -1,11 +1,11 @@
-import type { Optimizer } from '../../@types/optimizer';
+import type { Transformer } from '../../@types/transformer';
 import type { CompileOptions } from '../../@types/compiler';
 
 import path from 'path';
 import { getAttrValue, setAttrValue } from '../../ast.js';
 
-/** Optimize <script type="module"> */
-export default function ({ compileOptions, filename }: { compileOptions: CompileOptions; filename: string; fileID: string }): Optimizer {
+/** Transform <script type="module"> */
+export default function ({ compileOptions, filename }: { compileOptions: CompileOptions; filename: string; fileID: string }): Transformer {
   const { astroConfig } = compileOptions;
   const { astroRoot } = astroConfig;
   const fileUrl = new URL(`file://${filename}`);
diff --git a/src/compiler/optimize/postcss-scoped-styles/index.ts b/src/compiler/transform/postcss-scoped-styles/index.ts
similarity index 100%
rename from src/compiler/optimize/postcss-scoped-styles/index.ts
rename to src/compiler/transform/postcss-scoped-styles/index.ts
diff --git a/src/compiler/optimize/prism.ts b/src/compiler/transform/prism.ts
similarity index 85%
rename from src/compiler/optimize/prism.ts
rename to src/compiler/transform/prism.ts
index 5c5364796..628dcce7e 100644
--- a/src/compiler/optimize/prism.ts
+++ b/src/compiler/transform/prism.ts
@@ -1,4 +1,4 @@
-import type { Optimizer } from '../../@types/optimizer';
+import type { Transformer } from '../../@types/transformer';
 import type { Script } from '../../parser/interfaces';
 import { getAttrValue } from '../../ast.js';
 
@@ -11,7 +11,7 @@ function escape(code: string) {
   });
 }
 
-export default function (module: Script): Optimizer {
+export default function (module: Script): Transformer {
   let usesPrism = false;
 
   return {
@@ -61,7 +61,12 @@ export default function (module: Script): Optimizer {
                   value: [
                     {
                       type: 'MustacheTag',
-                      content: '`' + escape(code) + '`',
+                      expression: {
+                        type: 'Expression',
+                        codeStart: '`' + escape(code) + '`',
+                        codeEnd: '',
+                        children: []
+                      }
                     },
                   ],
                 },
diff --git a/src/compiler/optimize/styles.ts b/src/compiler/transform/styles.ts
similarity index 96%
rename from src/compiler/optimize/styles.ts
rename to src/compiler/transform/styles.ts
index 807d869c9..d8e3196a1 100644
--- a/src/compiler/optimize/styles.ts
+++ b/src/compiler/transform/styles.ts
@@ -7,7 +7,7 @@ import postcssKeyframes from 'postcss-icss-keyframes';
 import findUp from 'find-up';
 import sass from 'sass';
 import type { RuntimeMode } from '../../@types/astro';
-import type { OptimizeOptions, Optimizer } from '../../@types/optimizer';
+import type { TransformOptions, Transformer } from '../../@types/transformer';
 import type { TemplateNode } from '../../parser/interfaces';
 import { debug } from '../../logger.js';
 import astroScopedStyles, { NEVER_SCOPED_TAGS } from './postcss-scoped-styles/index.js';
@@ -152,8 +152,8 @@ async function transformStyle(code: string, { type, filename, scopedClass, mode
   return { css, type: styleType };
 }
 
-/** Optimize <style> tags */
-export default function optimizeStyles({ compileOptions, filename, fileID }: OptimizeOptions): Optimizer {
+/** Transform <style> tags */
+export default function transformStyles({ compileOptions, filename, fileID }: TransformOptions): Transformer {
   const styleNodes: TemplateNode[] = []; // <style> tags to be updated
   const styleTransformPromises: Promise<StyleTransformResult>[] = []; // async style transform results to be finished in finalize();
   const scopedClass = `astro-${hashFromFilename(fileID)}`; // this *should* generate same hash from fileID every time
@@ -218,9 +218,9 @@ export default function optimizeStyles({ compileOptions, filename, fileID }: Opt
                   }
                 } else if (attr.value[k].type === 'MustacheTag' && attr.value[k]) {
                   // don‘t add same scopedClass twice (this check is a little more basic, but should suffice)
-                  if (!attr.value[k].content.includes(`' ${scopedClass}'`)) {
+                  if (!attr.value[k].expression.codeStart.includes(`' ${scopedClass}'`)) {
                     // MustacheTag
-                    attr.value[k].content = `(${attr.value[k].content}) + ' ${scopedClass}'`;
+                    attr.value[k].expression.codeStart = `(${attr.value[k].expression.codeStart}) + ' ${scopedClass}'`;
                   }
                 }
               }
diff --git a/src/parser/interfaces.ts b/src/parser/interfaces.ts
index 71b1812a3..4a4d43f71 100644
--- a/src/parser/interfaces.ts
+++ b/src/parser/interfaces.ts
@@ -1,7 +1,6 @@
-import type { Expression, Program } from '@babel/types';
 import type { SourceMap } from 'magic-string';
 
-interface BaseNode {
+export interface BaseNode {
   start: number;
   end: number;
   type: string;
@@ -50,6 +49,15 @@ export type Directive = BaseDirective | Transition;
 
 export type TemplateNode = Text | MustacheTag | BaseNode | Directive | Transition;
 
+export interface Expression {
+  type: 'Expression';
+  start: number;
+  end: number;
+  codeStart: string;
+  codeEnd: string;
+  children: BaseNode[];
+}
+
 export interface Parser {
   readonly template: string;
   readonly filename?: string;
diff --git a/src/parser/parse/acorn.ts b/src/parser/parse/acorn.ts
deleted file mode 100644
index c70756d79..000000000
--- a/src/parser/parse/acorn.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { Node } from 'acorn';
-import { parseExpression } from '@babel/parser';
-// import acorn from 'acorn';
-// // @ts-ignore
-// import jsx from 'acorn-jsx';
-// const acornJsx = acorn.Parser.extend(jsx());
-
-export const parse = (source: string): Node => {
-  throw new Error('No longer used.');
-  // acorn.parse(source, {
-  //   sourceType: 'module',
-  //   ecmaVersion: 2020,
-  //   locations: true,
-  // });
-};
-
-export const parse_expression_at = (source: string, index: number): number => {
-  // TODO: Clean up after acorn -> @babel/parser move
-  try {
-    // First, try to parse the expression. Unlike acorn, @babel/parser isn't relaxed
-    // enough to just stop after the first expression, so we almost always expect a
-    // parser error here instead. This is expected, so handle it.
-    parseExpression(source.slice(index), {
-      sourceType: 'module',
-      plugins: ['jsx', 'typescript'],
-    });
-    throw new Error('Parse error.'); // Expected to fail.
-  } catch (err) {
-    if (err.message.startsWith('Unexpected token') && source[index + err.pos] === '}') {
-      return index + err.pos;
-    }
-    if (err.pos) {
-      err.pos = index + err.pos;
-    }
-    throw err;
-  }
-};
-// acornJsx.parseExpressionAt(source, index, {
-//   sourceType: 'module',
-//   ecmaVersion: 2020,
-//   locations: true,
-// });
diff --git a/src/parser/parse/read/context.ts b/src/parser/parse/read/context.ts
index 4d8f12060..565c66d18 100644
--- a/src/parser/parse/read/context.ts
+++ b/src/parser/parse/read/context.ts
@@ -4,7 +4,7 @@ import { Parser } from '../index.js';
 import { isIdentifierStart } from 'acorn';
 import full_char_code_at from '../../utils/full_char_code_at.js';
 import { is_bracket_open, is_bracket_close, is_bracket_pair, get_bracket_close } from '../utils/bracket.js';
-import { parse_expression_at } from '../acorn.js';
+import { parse_expression_at } from './expression.js';
 import { Pattern } from 'estree';
 
 export default function read_context(parser: Parser): Pattern & { start: number; end: number } {
diff --git a/src/parser/parse/read/expression.ts b/src/parser/parse/read/expression.ts
index 6ea0ebc56..bdd6c4b81 100644
--- a/src/parser/parse/read/expression.ts
+++ b/src/parser/parse/read/expression.ts
@@ -1,39 +1,254 @@
-import { parse_expression_at } from '../acorn.js';
+
+import type { BaseNode, Expression } from '../../interfaces';
 import { Parser } from '../index.js';
-import { whitespace } from '../../utils/patterns.js';
+import parseAstro from '../index.js';
+
+interface ParseState {
+  source: string;
+  start: number;
+  index: number;
+  curlyCount: number;
+  bracketCount: number;
+  root: Expression;
+}
+
+function peek_char(state: ParseState) {
+  return state.source[state.index];
+}
+
+function peek_nonwhitespace(state: ParseState) {
+  let index = state.index;
+  do {
+    let char = state.source[index];
+    if(!/\s/.test(char)) {
+      return char;
+    }
+    index++;
+  } while(index < state.source.length);
+}
+
+function next_char(state: ParseState) {
+  return state.source[state.index++];
+}
+
+function in_bounds(state: ParseState) {
+  return state.index < state.source.length;
+}
+
+function consume_string(state: ParseState, stringChar: string) {
+  let inEscape;
+  do {
+    const char = next_char(state);
+
+    if(inEscape) {
+      inEscape = false;
+    } else if(char === '\\') {
+      inEscape = true;
+    } else if(char === stringChar) {
+      break;
+    }
+  } while(in_bounds(state));
+}
+
+function consume_multiline_comment(state: ParseState) {
+  do {
+    const char = next_char(state);
+
+    if(char === '*' && peek_char(state) === '/') {
+      break;
+    }
+  } while(in_bounds(state));
+}
+
+function consume_line_comment(state: ParseState) {
+  do {
+    const char = next_char(state);
+    if(char === '\n') {
+      break;
+    }
+  } while(in_bounds(state));
+}
+
+const voidElements = new Set(['area', 'base', 'br', 'col', 'command', 'embed', 
+  'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 
+  'track', 'wbr']);
+
+function consume_tag(state: ParseState) {
+  const start = state.index - 1;
+  let tagName = '';
+  let inTag = false;
+  let inStart = true;
+  let selfClosed = false;
+  let inClose = false;
+
+  let bracketIndex = 1;
+  do {
+    const char = next_char(state);
+
+    switch(char) {
+      case '\'':
+      case '"': {
+        consume_string(state, char);
+        break;
+      }
+      case '<': {
+        inTag = false;
+        tagName = '';
+
+        if(peek_nonwhitespace(state) === '/') {
+          inClose = true;
+          bracketIndex--;
+        } else {
+          inStart = true;
+          bracketIndex++;
+        }
+        break;
+      }
+      case '>': {
+        // An arrow function, probably
+        if(!inStart && !inClose) {
+          break;
+        }
+
+        bracketIndex--;
+
+        const addExpectedBrackets =
+          // Void elements don't need a closing
+          !voidElements.has(tagName.toLowerCase()) &&
+          // Self-closing don't need a closing
+          !selfClosed &&
+          // If we're in a start tag, we expect to find 2 more brackets
+          !inClose;
+
+        if(addExpectedBrackets) {
+          bracketIndex += 2;
+        }
+
+        inTag = false;
+        selfClosed = false;
+        inStart = false;
+        inClose = false;
+        break;
+      }
+      case ' ': {
+        inTag = true;
+        break;
+      }
+      case '/': {
+        if(inStart) {
+          selfClosed = true;
+        }
+        break;
+      }
+      default: {
+        if(!inTag) {
+          tagName += char;
+        }
+        break;
+      }
+    }
+
+    // Unclosed tags
+    if(state.curlyCount <= 0) {
+      break;
+    }
+
+    if(bracketIndex === 0) {
+      break;
+    }
+  } while(in_bounds(state));
+
+  const source = state.source.substring(start, state.index);
+
+
+  const ast = parseAstro(source);
+  const fragment = ast.html;
+
+  return fragment;
+}
+
+function consume_expression(source: string, start: number): Expression {
+  const expr: Expression = {
+    type: 'Expression',
+    start,
+    end: Number.NaN,
+    codeStart: '',
+    codeEnd: '',
+    children: []
+  };
+
+  let codeEndStart: number = 0;
+  const state: ParseState = {
+    source, start, index: start,
+    curlyCount: 1,
+    bracketCount: 0,
+    root: expr
+  };
+
+  do {
+    const char = next_char(state);
+    
+    switch(char) {
+      case '{': {
+        state.curlyCount++;
+        break;
+      }
+      case '}': {
+        state.curlyCount--;
+        break;
+      }
+      case '<': {
+        expr.codeStart = source.substring(start, state.index - 1);
+        const tag = consume_tag(state);
+        expr.children.push(tag);
+        codeEndStart = state.index;
+        break;
+      }
+      case '\'':
+      case '"':
+      case '`': {
+        consume_string(state, char);
+        break;
+      }
+      case '/': {
+        switch(peek_char(state)) {
+          case '/': {
+            consume_line_comment(state);
+            break;
+          }
+          case '*': {
+            consume_multiline_comment(state);
+            break;
+          }
+        }
+      }
+    }
+  } while(in_bounds(state) && state.curlyCount > 0);
+
+  expr.end = state.index - 1;
+
+  if(codeEndStart) {
+    expr.codeEnd = source.substring(codeEndStart, expr.end);
+  } else {
+    expr.codeStart = source.substring(start, expr.end);
+  }
+
+  return expr;
+}
+
+export const parse_expression_at = (source: string, index: number): Expression => {
+  const expression = consume_expression(source, index);
+
+  return expression;
+};
 
 // @ts-ignore
-export default function read_expression(parser: Parser): string {
+export default function read_expression(parser: Parser) {
   try {
-    const start = parser.index;
-    let index = parse_expression_at(parser.template, parser.index);
-    let num_parens = 0;
-
-    for (let i = parser.index; i < start; i += 1) {
-      if (parser.template[i] === '(') num_parens += 1;
-    }
-
-    while (num_parens > 0) {
-      const char = parser.template[index];
-
-      if (char === ')') {
-        num_parens -= 1;
-      } else if (!whitespace.test(char)) {
-        parser.error(
-          {
-            code: 'unexpected-token',
-            message: 'Expected )',
-          },
-          index
-        );
-      }
-
-      index += 1;
-    }
-
-    parser.index = index;
-
-    return parser.template.substring(start, index);
+    debugger;
+    const expression = parse_expression_at(parser.template, parser.index);
+    parser.index = expression.end;
+    return expression;
   } catch (err) {
     parser.acorn_error(err);
   }
diff --git a/src/parser/parse/read/script.ts b/src/parser/parse/read/script.ts
index 7afbfb08f..4f1d31b44 100644
--- a/src/parser/parse/read/script.ts
+++ b/src/parser/parse/read/script.ts
@@ -1,9 +1,9 @@
 // @ts-nocheck
 
-import * as acorn from '../acorn';
+import type { Node } from 'estree';
 import { Parser } from '../index.js';
 import { Script } from '../../interfaces.js';
-import { Node, Program } from 'estree';
+
 
 const script_closing_tag = '</script>';
 
diff --git a/src/parser/parse/state/mustache.ts b/src/parser/parse/state/mustache.ts
index 8ffac4f85..79372d8d9 100644
--- a/src/parser/parse/state/mustache.ts
+++ b/src/parser/parse/state/mustache.ts
@@ -397,7 +397,7 @@ export default function mustache(parser: Parser) {
     // });
     throw new Error('@debug not yet supported');
   } else {
-    const content = read_expression(parser);
+    const expression = read_expression(parser);
 
     parser.allow_whitespace();
     parser.eat('}', true);
@@ -407,7 +407,7 @@ export default function mustache(parser: Parser) {
       start,
       end: parser.index,
       type: 'MustacheTag',
-      content,
+      expression,
     });
   }
 }
diff --git a/src/parser/parse/state/tag.ts b/src/parser/parse/state/tag.ts
index bacaffdef..a8b919a49 100644
--- a/src/parser/parse/state/tag.ts
+++ b/src/parser/parse/state/tag.ts
@@ -549,7 +549,7 @@ function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
       flush();
 
       parser.allow_whitespace();
-      const content = read_expression(parser);
+      const expression = read_expression(parser);
       parser.allow_whitespace();
       parser.eat('}', true);
 
@@ -557,7 +557,7 @@ function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
         start: index,
         end: parser.index,
         type: 'MustacheTag',
-        content,
+        expression,
       });
 
       current_chunk = {
diff --git a/test/astro-expr.test.js b/test/astro-expr.test.js
index 9c73d719f..689c32ced 100644
--- a/test/astro-expr.test.js
+++ b/test/astro-expr.test.js
@@ -10,9 +10,47 @@ setup(Expressions, './fixtures/astro-expr');
 Expressions('Can load page', async ({ runtime }) => {
   const result = await runtime.load('/');
 
-  console.log(result);
   assert.equal(result.statusCode, 200);
-  console.log(result.contents);
+  
+  const $ = doc(result.contents);
+
+  for(let col of ['red', 'yellow', 'blue']) {
+    assert.equal($('#' + col).length, 1);
+  }
+});
+
+Expressions('Ignores characters inside of strings', async ({ runtime }) => {
+  const result = await runtime.load('/strings');
+
+  assert.equal(result.statusCode, 200);
+  
+  const $ = doc(result.contents);
+
+  for(let col of ['red', 'yellow', 'blue']) {
+    assert.equal($('#' + col).length, 1);
+  }
+});
+
+Expressions('Ignores characters inside of line comments', async ({ runtime }) => {
+  const result = await runtime.load('/line-comments');
+  assert.equal(result.statusCode, 200);
+  
+  const $ = doc(result.contents);
+
+  for(let col of ['red', 'yellow', 'blue']) {
+    assert.equal($('#' + col).length, 1);
+  }
+});
+
+Expressions('Ignores characters inside of multiline comments', async ({ runtime }) => {
+  const result = await runtime.load('/multiline-comments');
+  assert.equal(result.statusCode, 200);
+  
+  const $ = doc(result.contents);
+
+  for(let col of ['red', 'yellow', 'blue']) {
+    assert.equal($('#' + col).length, 1);
+  }
 });
 
 Expressions.run();
diff --git a/test/astro-scoped-styles.test.js b/test/astro-scoped-styles.test.js
index 5c01a31fb..295668b84 100644
--- a/test/astro-scoped-styles.test.js
+++ b/test/astro-scoped-styles.test.js
@@ -1,6 +1,6 @@
 import { suite } from 'uvu';
 import * as assert from 'uvu/assert';
-import { scopeRule } from '../lib/compiler/optimize/postcss-scoped-styles/index.js';
+import { scopeRule } from '../lib/compiler/transform/postcss-scoped-styles/index.js';
 
 const ScopedStyles = suite('Astro PostCSS Scoped Styles Plugin');
 
diff --git a/test/fixtures/astro-expr/astro/components/Color.jsx b/test/fixtures/astro-expr/astro/components/Color.jsx
index 13a5049aa..c2681cc9b 100644
--- a/test/fixtures/astro-expr/astro/components/Color.jsx
+++ b/test/fixtures/astro-expr/astro/components/Color.jsx
@@ -1,5 +1,5 @@
 import { h } from 'preact';
 
 export default function({ name }) {
-  return <div>{name}</div>
+  return <div id={name}>{name}</div>
 }
\ No newline at end of file
diff --git a/test/fixtures/astro-expr/astro/pages/index.astro b/test/fixtures/astro-expr/astro/pages/index.astro
index f0a4d2ab0..50af05d93 100644
--- a/test/fixtures/astro-expr/astro/pages/index.astro
+++ b/test/fixtures/astro-expr/astro/pages/index.astro
@@ -3,7 +3,7 @@ import Color from '../components/Color.jsx';
 
 let title = 'My Site';
 
-const colors = ['red', 'yellow', 'blue']
+const colors = ['red', 'yellow', 'blue'];
 ---
 
 <html lang="en">
diff --git a/test/fixtures/astro-expr/astro/pages/line-comments.astro b/test/fixtures/astro-expr/astro/pages/line-comments.astro
new file mode 100644
index 000000000..2fb7bf643
--- /dev/null
+++ b/test/fixtures/astro-expr/astro/pages/line-comments.astro
@@ -0,0 +1,17 @@
+---
+let title = 'My App';
+
+let colors = ['red', 'yellow', 'blue'];
+---
+
+<html>
+<head>
+  <title>{title}</title>
+</head>
+<body>
+  {colors.map(color => (
+    // foo < > < }
+    <div id={color}>color</div>
+  ))}
+</body>
+</html>
\ No newline at end of file
diff --git a/test/fixtures/astro-expr/astro/pages/multiline-comments.astro b/test/fixtures/astro-expr/astro/pages/multiline-comments.astro
new file mode 100644
index 000000000..5c7016ee8
--- /dev/null
+++ b/test/fixtures/astro-expr/astro/pages/multiline-comments.astro
@@ -0,0 +1,16 @@
+---
+let title = 'My App';
+
+let colors = ['red', 'yellow', 'blue'];
+---
+
+<html>
+<head>
+  <title>{title}</title>
+</head>
+<body>
+  {colors.map(color => (
+    /* foo < > < } */ <div id={color}>color</div>
+  ))}
+</body>
+</html>
\ No newline at end of file
diff --git a/test/fixtures/astro-expr/astro/pages/strings.astro b/test/fixtures/astro-expr/astro/pages/strings.astro
new file mode 100644
index 000000000..712df6120
--- /dev/null
+++ b/test/fixtures/astro-expr/astro/pages/strings.astro
@@ -0,0 +1,16 @@
+---
+let title = 'My App';
+
+let colors = ['red', 'yellow', 'blue'];
+---
+
+<html>
+<head>
+  <title>{title}</title>
+</head>
+<body>
+  {colors.map(color => (
+    'foo < > < }' && <div id={color}>color</div>
+  ))}
+</body>
+</html>
\ No newline at end of file