From 469b4bc23fa5412bae6f2b3a701c180b1f77b812 Mon Sep 17 00:00:00 2001
From: Dylan Piercey <dpiercey@ebay.com>
Date: Sat, 7 May 2022 20:14:01 -0700
Subject: [PATCH] fix: multi line expression parsing

---
 .changeset/strange-zoos-tell.md               |   5 +
 .../attr-operators-newline-after.expected.txt | 914 ++++++++++++++++++
 .../attr-operators-newline-after/input.marko  | 232 +++++
 ...attr-operators-newline-before.expected.txt | 427 ++++++++
 .../attr-operators-newline-before/input.marko | 118 +++
 src/states/EXPRESSION.ts                      |  45 +-
 src/states/OPEN_TAG.ts                        |   2 +-
 7 files changed, 1726 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/strange-zoos-tell.md
 create mode 100644 src/__tests__/fixtures/attr-operators-newline-after/__snapshots__/attr-operators-newline-after.expected.txt
 create mode 100644 src/__tests__/fixtures/attr-operators-newline-after/input.marko
 create mode 100644 src/__tests__/fixtures/attr-operators-newline-before/__snapshots__/attr-operators-newline-before.expected.txt
 create mode 100644 src/__tests__/fixtures/attr-operators-newline-before/input.marko

diff --git a/.changeset/strange-zoos-tell.md b/.changeset/strange-zoos-tell.md
new file mode 100644
index 00000000..480f50fd
--- /dev/null
+++ b/.changeset/strange-zoos-tell.md
@@ -0,0 +1,5 @@
+---
+"htmljs-parser": patch
+---
+
+Improves consistency with v2 of the parser by allowing expressions to span multiple lines if the line is ended with the continuation. This change also allows html attributes and grouped concise attributes to span multiple lines with a new line before _or after_ the continuation.
diff --git a/src/__tests__/fixtures/attr-operators-newline-after/__snapshots__/attr-operators-newline-after.expected.txt b/src/__tests__/fixtures/attr-operators-newline-after/__snapshots__/attr-operators-newline-after.expected.txt
new file mode 100644
index 00000000..eedcad00
--- /dev/null
+++ b/src/__tests__/fixtures/attr-operators-newline-after/__snapshots__/attr-operators-newline-after.expected.txt
@@ -0,0 +1,914 @@
+1╭─ a= await
+ │  ││ ╰─ attrValue.value "await\ny"
+ │  │├─ attrValue "= await\ny"
+ │  │╰─ attrName
+ ╰─ ╰─ tagName
+2╭─ y a
+ ╰─   ╰─ attrName
+3╭─ a= new
+ │  ││ ╰─ attrValue.value "new\ny"
+ │  │├─ attrValue "= new\ny"
+ │  │╰─ attrName
+ │  ├─ closeTag(a)
+ │  ├─ openTagEnd
+ ╰─ ╰─ tagName
+4╭─ y a
+ ╰─   ╰─ attrName
+5╭─ a= void
+ │  ││ ╰─ attrValue.value "void\ny"
+ │  │├─ attrValue "= void\ny"
+ │  │╰─ attrName
+ │  ├─ closeTag(a)
+ │  ├─ openTagEnd
+ ╰─ ╰─ tagName
+6╭─ y a
+ ╰─   ╰─ attrName
+7╭─ a= typeof
+ │  ││ ╰─ attrValue.value "typeof\ny"
+ │  │├─ attrValue "= typeof\ny"
+ │  │╰─ attrName
+ │  ├─ closeTag(a)
+ │  ├─ openTagEnd
+ ╰─ ╰─ tagName
+8╭─ y a
+ ╰─   ╰─ attrName
+9╭─ a= class
+ │  ││ ╰─ attrValue.value "class\nY {}"
+ │  │├─ attrValue "= class\nY {}"
+ │  │╰─ attrName
+ │  ├─ closeTag(a)
+ │  ├─ openTagEnd
+ ╰─ ╰─ tagName
+10╭─ Y {} a
+  ╰─      ╰─ attrName
+11╭─ a=x .
+  │  ││╰─ attrValue.value "x .\ny"
+  │  │├─ attrValue "=x .\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+12╭─ y a
+  ╰─   ╰─ attrName
+13╭─ a=x !
+  │  ││╰─ attrValue.value "x !\ny"
+  │  │├─ attrValue "=x !\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+14╭─ y a
+  ╰─   ╰─ attrName
+15╭─ a=x *
+  │  ││╰─ attrValue.value "x *\ny"
+  │  │├─ attrValue "=x *\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+16╭─ y a
+  ╰─   ╰─ attrName
+17╭─ a=x /
+  │  ││╰─ attrValue.value "x /\ny"
+  │  │├─ attrValue "=x /\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+18╭─ y a
+  ╰─   ╰─ attrName
+19╭─ a=x **
+  │  ││╰─ attrValue.value "x **\ny"
+  │  │├─ attrValue "=x **\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+20╭─ y a
+  ╰─   ╰─ attrName
+21╭─ a=x %
+  │  ││╰─ attrValue.value "x %\ny"
+  │  │├─ attrValue "=x %\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+22╭─ y a
+  ╰─   ╰─ attrName
+23╭─ a=x &
+  │  ││╰─ attrValue.value "x &\ny"
+  │  │├─ attrValue "=x &\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+24╭─ y a
+  ╰─   ╰─ attrName
+25╭─ a=x &&
+  │  ││╰─ attrValue.value "x &&\ny"
+  │  │├─ attrValue "=x &&\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+26╭─ y a
+  ╰─   ╰─ attrName
+27╭─ a=x ^
+  │  ││╰─ attrValue.value "x ^\ny"
+  │  │├─ attrValue "=x ^\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+28╭─ y a
+  ╰─   ╰─ attrName
+29╭─ a=x ~
+  │  ││╰─ attrValue.value "x ~\ny"
+  │  │├─ attrValue "=x ~\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+30╭─ y a
+  ╰─   ╰─ attrName
+31╭─ a=x |
+  │  ││╰─ attrValue.value "x |\ny"
+  │  │├─ attrValue "=x |\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+32╭─ y a
+  ╰─   ╰─ attrName
+33╭─ a=x ||
+  │  ││╰─ attrValue.value "x ||\ny"
+  │  │├─ attrValue "=x ||\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+34╭─ y a
+  ╰─   ╰─ attrName
+35╭─ a=x ??
+  │  ││╰─ attrValue.value "x ??\ny"
+  │  │├─ attrValue "=x ??\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+36╭─ y a
+  ╰─   ╰─ attrName
+37╭─ a=x ?
+  │  ││╰─ attrValue.value "x ?\ny :\nz"
+  │  │├─ attrValue "=x ?\ny :\nz"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+38├─ y :
+39╭─ z a
+  ╰─   ╰─ attrName
+40╭─ a=x ==
+  │  ││╰─ attrValue.value "x ==\ny"
+  │  │├─ attrValue "=x ==\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+41╭─ y a
+  ╰─   ╰─ attrName
+42╭─ a=x ===
+  │  ││╰─ attrValue.value "x ===\ny"
+  │  │├─ attrValue "=x ===\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+43╭─ y a
+  ╰─   ╰─ attrName
+44╭─ a=x !=
+  │  ││╰─ attrValue.value "x !=\ny"
+  │  │├─ attrValue "=x !=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+45╭─ y a
+  ╰─   ╰─ attrName
+46╭─ a=x !==
+  │  ││╰─ attrValue.value "x !==\ny"
+  │  │├─ attrValue "=x !==\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+47╭─ y a
+  ╰─   ╰─ attrName
+48╭─ a=x <=
+  │  ││╰─ attrValue.value "x <=\ny"
+  │  │├─ attrValue "=x <=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+49╭─ y a
+  ╰─   ╰─ attrName
+50╭─ a=x >=
+  │  ││╰─ attrValue.value "x >=\ny"
+  │  │├─ attrValue "=x >=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+51╭─ y a
+  ╰─   ╰─ attrName
+52╭─ a=x &=
+  │  ││╰─ attrValue.value "x &=\ny"
+  │  │├─ attrValue "=x &=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+53╭─ y a
+  ╰─   ╰─ attrName
+54╭─ a=x &&=
+  │  ││╰─ attrValue.value "x &&=\ny"
+  │  │├─ attrValue "=x &&=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+55╭─ y a
+  ╰─   ╰─ attrName
+56╭─ a=x |=
+  │  ││╰─ attrValue.value "x |=\ny"
+  │  │├─ attrValue "=x |=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+57╭─ y a
+  ╰─   ╰─ attrName
+58╭─ a=x ||=
+  │  ││╰─ attrValue.value "x ||=\ny"
+  │  │├─ attrValue "=x ||=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+59╭─ y a
+  ╰─   ╰─ attrName
+60╭─ a=x ^=
+  │  ││╰─ attrValue.value "x ^=\ny"
+  │  │├─ attrValue "=x ^=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+61╭─ y a
+  ╰─   ╰─ attrName
+62╭─ a=x ~=
+  │  ││╰─ attrValue.value "x ~=\ny"
+  │  │├─ attrValue "=x ~=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+63╭─ y a
+  ╰─   ╰─ attrName
+64╭─ a=x >>=
+  │  ││╰─ attrValue.value "x >>=\ny"
+  │  │├─ attrValue "=x >>=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+65╭─ y a
+  ╰─   ╰─ attrName
+66╭─ a=x >>>=
+  │  ││╰─ attrValue.value "x >>>=\ny"
+  │  │├─ attrValue "=x >>>=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+67╭─ y a
+  ╰─   ╰─ attrName
+68╭─ a=x -=
+  │  ││╰─ attrValue.value "x -=\ny"
+  │  │├─ attrValue "=x -=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+69╭─ y a
+  ╰─   ╰─ attrName
+70╭─ a=x /=
+  │  ││╰─ attrValue.value "x /=\ny"
+  │  │├─ attrValue "=x /=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+71╭─ y a
+  ╰─   ╰─ attrName
+72╭─ a=x *=
+  │  ││╰─ attrValue.value "x *=\ny"
+  │  │├─ attrValue "=x *=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+73╭─ y a
+  ╰─   ╰─ attrName
+74╭─ a=x **=
+  │  ││╰─ attrValue.value "x **=\ny"
+  │  │├─ attrValue "=x **=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+75╭─ y a
+  ╰─   ╰─ attrName
+76╭─ a=x %=
+  │  ││╰─ attrValue.value "x %=\ny"
+  │  │├─ attrValue "=x %=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+77╭─ y a
+  ╰─   ╰─ attrName
+78╭─ a=x +=
+  │  ││╰─ attrValue.value "x +=\ny"
+  │  │├─ attrValue "=x +=\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+79╭─ y a
+  ╰─   ╰─ attrName
+80╭─ a=x ++ +
+  │  ││╰─ attrValue.value "x ++ +\ny"
+  │  │├─ attrValue "=x ++ +\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+81╭─ y a
+  ╰─   ╰─ attrName
+82╭─ a=x +
+  │  ││╰─ attrValue.value "x +\n++ y"
+  │  │├─ attrValue "=x +\n++ y"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+83╭─ ++ y a
+  ╰─      ╰─ attrName
+84╭─ a=x >>
+  │  ││╰─ attrValue.value "x >>\ny"
+  │  │├─ attrValue "=x >>\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+85╭─ y a
+  ╰─   ╰─ attrName
+86╭─ a=x >>>
+  │  ││╰─ attrValue.value "x >>>\ny"
+  │  │├─ attrValue "=x >>>\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+87╭─ y a
+  ╰─   ╰─ attrName
+88╭─ a=x =>
+  │  ││╰─ attrValue.value "x =>\ny"
+  │  │├─ attrValue "=x =>\ny"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+89╭─ y a
+  ╰─   ╰─ attrName
+90╭─ a=x =>
+  │  ││╰─ attrValue.value "x =>\n( y )"
+  │  │├─ attrValue "=x =>\n( y )"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+91╭─ ( y ) a
+  ╰─       ╰─ attrName
+92╭─ a= (x) =>
+  │  ││ ╰─ attrValue.value "(x) =>\n{ console.log(\"y\") }"
+  │  │├─ attrValue "= (x) =>\n{ console.log(\"y\") }"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+93╭─ { console.log("y") } a
+  ╰─                      ╰─ attrName
+94╭─ a= async
+  │  ││ ╰─ attrValue.value "async\nx =>\n{ console.log(\"y\") }"
+  │  │├─ attrValue "= async\nx =>\n{ console.log(\"y\") }"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+95├─ x =>
+96├─ { console.log("y") }
+97╭─ a
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+98╭─ a= function
+  │  ││ ╰─ attrValue.value "function\n(x) { console.log(\"y\") }"
+  │  │├─ attrValue "= function\n(x) { console.log(\"y\") }"
+  │  │╰─ attrName
+  │  ├─ closeTag(a)
+  │  ├─ openTagEnd
+  ╰─ ╰─ tagName
+99├─ (x) { console.log("y") }
+100╭─ a
+   │  ├─ closeTag(a)
+   │  ├─ openTagEnd
+   ╰─ ╰─ tagName
+101╭─ a= x =>
+   │  ││ ╰─ attrValue.value "x =>\n{ console.log(\"y\") }"
+   │  │├─ attrValue "= x =>\n{ console.log(\"y\") }"
+   │  │╰─ attrName
+   │  ├─ closeTag(a)
+   │  ├─ openTagEnd
+   ╰─ ╰─ tagName
+102├─ { console.log("y") }
+103╭─ a
+   │  ├─ closeTag(a)
+   │  ├─ openTagEnd
+   ╰─ ╰─ tagName
+104╭─ a= async
+   │  ││ ╰─ attrValue.value "async\nfunction\n(x) { console.log(\"y\") }"
+   │  │├─ attrValue "= async\nfunction\n(x) { console.log(\"y\") }"
+   │  │╰─ attrName
+   │  ├─ closeTag(a)
+   │  ├─ openTagEnd
+   ╰─ ╰─ tagName
+105├─ function
+106├─ (x) { console.log("y") }
+107╭─ a
+   │  ├─ closeTag(a)
+   │  ├─ openTagEnd
+   ╰─ ╰─ tagName
+108╭─ 
+   ╰─ ╰─ openTagEnd
+109╭─ <a= await
+   │  │││ ╰─ attrValue.value "await\ny"
+   │  ││├─ attrValue "= await\ny"
+   │  ││╰─ attrName
+   │  │╰─ tagName
+   ╰─ ╰─ closeTag(a)
+110╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+111╭─ <a= new
+   │   ││ ╰─ attrValue.value "new\ny"
+   │   │├─ attrValue "= new\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+112╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+113╭─ <a= void
+   │   ││ ╰─ attrValue.value "void\ny"
+   │   │├─ attrValue "= void\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+114╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+115╭─ <a= typeof
+   │   ││ ╰─ attrValue.value "typeof\ny"
+   │   │├─ attrValue "= typeof\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+116╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+117╭─ <a= class
+   │   ││ ╰─ attrValue.value "class\nY\n{}"
+   │   │├─ attrValue "= class\nY\n{}"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+118├─ Y
+119╭─ {} a/>
+   │     │╰─ openTagEnd:selfClosed "/>"
+   ╰─    ╰─ attrName
+120╭─ <a=x .
+   │   ││╰─ attrValue.value "x .\ny"
+   │   │├─ attrValue "=x .\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+121╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+122╭─ <a=x !
+   │   ││╰─ attrValue.value "x !\ny"
+   │   │├─ attrValue "=x !\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+123╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+124╭─ <a=x *
+   │   ││╰─ attrValue.value "x *\ny"
+   │   │├─ attrValue "=x *\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+125╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+126╭─ <a=x /
+   │   ││╰─ attrValue.value "x /\ny"
+   │   │├─ attrValue "=x /\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+127╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+128╭─ <a=x **
+   │   ││╰─ attrValue.value "x **\ny"
+   │   │├─ attrValue "=x **\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+129╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+130╭─ <a=x %
+   │   ││╰─ attrValue.value "x %\ny"
+   │   │├─ attrValue "=x %\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+131╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+132╭─ <a=x &
+   │   ││╰─ attrValue.value "x &\ny"
+   │   │├─ attrValue "=x &\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+133╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+134╭─ <a=x &&
+   │   ││╰─ attrValue.value "x &&\ny"
+   │   │├─ attrValue "=x &&\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+135╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+136╭─ <a=x ^
+   │   ││╰─ attrValue.value "x ^\ny"
+   │   │├─ attrValue "=x ^\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+137╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+138╭─ <a=x ~
+   │   ││╰─ attrValue.value "x ~\ny"
+   │   │├─ attrValue "=x ~\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+139╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+140╭─ <a=x |
+   │   ││╰─ attrValue.value "x |\ny"
+   │   │├─ attrValue "=x |\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+141╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+142╭─ <a=x ||
+   │   ││╰─ attrValue.value "x ||\ny"
+   │   │├─ attrValue "=x ||\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+143╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+144╭─ <a=x ??
+   │   ││╰─ attrValue.value "x ??\ny"
+   │   │├─ attrValue "=x ??\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+145╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+146╭─ <a=x ?
+   │   ││╰─ attrValue.value "x ?\ny :\nz"
+   │   │├─ attrValue "=x ?\ny :\nz"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+147├─ y :
+148╭─ z a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+149╭─ <a=x ==
+   │   ││╰─ attrValue.value "x ==\ny"
+   │   │├─ attrValue "=x ==\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+150╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+151╭─ <a=x ===
+   │   ││╰─ attrValue.value "x ===\ny"
+   │   │├─ attrValue "=x ===\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+152╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+153╭─ <a=x !=
+   │   ││╰─ attrValue.value "x !=\ny"
+   │   │├─ attrValue "=x !=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+154╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+155╭─ <a=x !==
+   │   ││╰─ attrValue.value "x !==\ny"
+   │   │├─ attrValue "=x !==\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+156╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+157╭─ <a=x <=
+   │   ││╰─ attrValue.value "x <=\ny"
+   │   │├─ attrValue "=x <=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+158╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+159╭─ <a=x >=
+   │   ││╰─ attrValue.value "x >=\ny"
+   │   │├─ attrValue "=x >=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+160╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+161╭─ <a=x &=
+   │   ││╰─ attrValue.value "x &=\ny"
+   │   │├─ attrValue "=x &=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+162╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+163╭─ <a=x &&=
+   │   ││╰─ attrValue.value "x &&=\ny"
+   │   │├─ attrValue "=x &&=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+164╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+165╭─ <a=x |=
+   │   ││╰─ attrValue.value "x |=\ny"
+   │   │├─ attrValue "=x |=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+166╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+167╭─ <a=x ||=
+   │   ││╰─ attrValue.value "x ||=\ny"
+   │   │├─ attrValue "=x ||=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+168╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+169╭─ <a=x ^=
+   │   ││╰─ attrValue.value "x ^=\ny"
+   │   │├─ attrValue "=x ^=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+170╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+171╭─ <a=x ~=
+   │   ││╰─ attrValue.value "x ~=\ny"
+   │   │├─ attrValue "=x ~=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+172╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+173╭─ <a=x >>=
+   │   ││╰─ attrValue.value "x >>=\ny"
+   │   │├─ attrValue "=x >>=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+174╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+175╭─ <a=x >>>=
+   │   ││╰─ attrValue.value "x >>>=\ny"
+   │   │├─ attrValue "=x >>>=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+176╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+177╭─ <a=x -=
+   │   ││╰─ attrValue.value "x -=\ny"
+   │   │├─ attrValue "=x -=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+178╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+179╭─ <a=x /=
+   │   ││╰─ attrValue.value "x /=\ny"
+   │   │├─ attrValue "=x /=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+180╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+181╭─ <a=x *=
+   │   ││╰─ attrValue.value "x *=\ny"
+   │   │├─ attrValue "=x *=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+182╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+183╭─ <a=x **=
+   │   ││╰─ attrValue.value "x **=\ny"
+   │   │├─ attrValue "=x **=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+184╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+185╭─ <a=x %=
+   │   ││╰─ attrValue.value "x %=\ny"
+   │   │├─ attrValue "=x %=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+186╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+187╭─ <a=x +=
+   │   ││╰─ attrValue.value "x +=\ny"
+   │   │├─ attrValue "=x +=\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+188╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+189╭─ <a=x ++ +
+   │   ││╰─ attrValue.value "x ++ +\ny"
+   │   │├─ attrValue "=x ++ +\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+190╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+191╭─ <a=x +
+   │   ││╰─ attrValue.value "x +\n++ y"
+   │   │├─ attrValue "=x +\n++ y"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+192╭─ ++ y a/>
+   │       │╰─ openTagEnd:selfClosed "/>"
+   ╰─      ╰─ attrName
+193╭─ <a=x >>
+   │   ││╰─ attrValue.value "x >>\ny"
+   │   │├─ attrValue "=x >>\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+194╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+195╭─ <a=x >>>
+   │   ││╰─ attrValue.value "x >>>\ny"
+   │   │├─ attrValue "=x >>>\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+196╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+197╭─ <a=x
+   │   ││╰─ attrValue.value "x\n( y )"
+   │   │├─ attrValue "=x\n( y )"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+198╭─ ( y ) a/>
+   │        │╰─ openTagEnd:selfClosed "/>"
+   ╰─       ╰─ attrName
+199╭─ <a=x
+   │   ││╰─ attrValue.value "x\n{ y }"
+   │   │├─ attrValue "=x\n{ y }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+200╭─ { y } a/>
+   │        │╰─ openTagEnd:selfClosed "/>"
+   ╰─       ╰─ attrName
+201╭─ <a=x
+   │   ││╰─ attrValue.value "x\n=>\ny"
+   │   │├─ attrValue "=x\n=>\ny"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+202├─ =>
+203╭─ y a/>
+   │    │╰─ openTagEnd:selfClosed "/>"
+   ╰─   ╰─ attrName
+204╭─ <a=x
+   │   ││╰─ attrValue.value "x\n=>\n( y )"
+   │   │├─ attrValue "=x\n=>\n( y )"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+205├─ =>
+206╭─ ( y ) a/>
+   │        │╰─ openTagEnd:selfClosed "/>"
+   ╰─       ╰─ attrName
+207╭─ <a=x
+   │   ││╰─ attrValue.value "x\n=>\n{ y }"
+   │   │├─ attrValue "=x\n=>\n{ y }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+208├─ =>
+209╭─ { y } a/>
+   │        │╰─ openTagEnd:selfClosed "/>"
+   ╰─       ╰─ attrName
+210╭─ <a=( x )
+   │   ││╰─ attrValue.value "( x )\n{ y }"
+   │   │├─ attrValue "=( x )\n{ y }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+211╭─ { y } a/>
+   │        │╰─ openTagEnd:selfClosed "/>"
+   ╰─       ╰─ attrName
+212╭─ <a= (x)
+   │   ││ ╰─ attrValue.value "(x)\n=>\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= (x)\n=>\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+213├─ =>
+214╭─ { console.log("y") } a/>
+   │                       │╰─ openTagEnd:selfClosed "/>"
+   ╰─                      ╰─ attrName
+215╭─ <a= async
+   │   ││ ╰─ attrValue.value "async\nx\n=>\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= async\nx\n=>\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+216├─ x
+217├─ =>
+218├─ { console.log("y") }
+219╭─ a/>
+   │  │╰─ openTagEnd:selfClosed "/>"
+   ╰─ ╰─ attrName
+220╭─ <a= function
+   │   ││ ╰─ attrValue.value "function\n(x)\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= function\n(x)\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+221├─ (x)
+222├─ { console.log("y") }
+223╭─ a/>
+   │  │╰─ openTagEnd:selfClosed "/>"
+   ╰─ ╰─ attrName
+224╭─ <a= x
+   │   ││ ╰─ attrValue.value "x\n=>\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= x\n=>\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+225├─ =>
+226├─ { console.log("y") }
+227╭─ a/>
+   │  │╰─ openTagEnd:selfClosed "/>"
+   ╰─ ╰─ attrName
+228╭─ <a= async
+   │   ││ ╰─ attrValue.value "async\nfunction\n(x)\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= async\nfunction\n(x)\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+229├─ function
+230├─ (x)
+231├─ { console.log("y") }
+232╭─ a/>
+   │  │╰─ openTagEnd:selfClosed "/>"
+   ╰─ ╰─ attrName
\ No newline at end of file
diff --git a/src/__tests__/fixtures/attr-operators-newline-after/input.marko b/src/__tests__/fixtures/attr-operators-newline-after/input.marko
new file mode 100644
index 00000000..3813fe7a
--- /dev/null
+++ b/src/__tests__/fixtures/attr-operators-newline-after/input.marko
@@ -0,0 +1,232 @@
+a= await
+y a
+a= new
+y a
+a= void
+y a
+a= typeof
+y a
+a= class
+Y {} a
+a=x .
+y a
+a=x !
+y a
+a=x *
+y a
+a=x /
+y a
+a=x **
+y a
+a=x %
+y a
+a=x &
+y a
+a=x &&
+y a
+a=x ^
+y a
+a=x ~
+y a
+a=x |
+y a
+a=x ||
+y a
+a=x ??
+y a
+a=x ?
+y :
+z a
+a=x ==
+y a
+a=x ===
+y a
+a=x !=
+y a
+a=x !==
+y a
+a=x <=
+y a
+a=x >=
+y a
+a=x &=
+y a
+a=x &&=
+y a
+a=x |=
+y a
+a=x ||=
+y a
+a=x ^=
+y a
+a=x ~=
+y a
+a=x >>=
+y a
+a=x >>>=
+y a
+a=x -=
+y a
+a=x /=
+y a
+a=x *=
+y a
+a=x **=
+y a
+a=x %=
+y a
+a=x +=
+y a
+a=x ++ +
+y a
+a=x +
+++ y a
+a=x >>
+y a
+a=x >>>
+y a
+a=x =>
+y a
+a=x =>
+( y ) a
+a= (x) =>
+{ console.log("y") } a
+a= async
+x =>
+{ console.log("y") }
+a
+a= function
+(x) { console.log("y") }
+a
+a= x =>
+{ console.log("y") }
+a
+a= async
+function
+(x) { console.log("y") }
+a
+
+<a= await
+y a/>
+<a= new
+y a/>
+<a= void
+y a/>
+<a= typeof
+y a/>
+<a= class
+Y
+{} a/>
+<a=x .
+y a/>
+<a=x !
+y a/>
+<a=x *
+y a/>
+<a=x /
+y a/>
+<a=x **
+y a/>
+<a=x %
+y a/>
+<a=x &
+y a/>
+<a=x &&
+y a/>
+<a=x ^
+y a/>
+<a=x ~
+y a/>
+<a=x |
+y a/>
+<a=x ||
+y a/>
+<a=x ??
+y a/>
+<a=x ?
+y :
+z a/>
+<a=x ==
+y a/>
+<a=x ===
+y a/>
+<a=x !=
+y a/>
+<a=x !==
+y a/>
+<a=x <=
+y a/>
+<a=x >=
+y a/>
+<a=x &=
+y a/>
+<a=x &&=
+y a/>
+<a=x |=
+y a/>
+<a=x ||=
+y a/>
+<a=x ^=
+y a/>
+<a=x ~=
+y a/>
+<a=x >>=
+y a/>
+<a=x >>>=
+y a/>
+<a=x -=
+y a/>
+<a=x /=
+y a/>
+<a=x *=
+y a/>
+<a=x **=
+y a/>
+<a=x %=
+y a/>
+<a=x +=
+y a/>
+<a=x ++ +
+y a/>
+<a=x +
+++ y a/>
+<a=x >>
+y a/>
+<a=x >>>
+y a/>
+<a=x
+( y ) a/>
+<a=x
+{ y } a/>
+<a=x
+=>
+y a/>
+<a=x
+=>
+( y ) a/>
+<a=x
+=>
+{ y } a/>
+<a=( x )
+{ y } a/>
+<a= (x)
+=>
+{ console.log("y") } a/>
+<a= async
+x
+=>
+{ console.log("y") }
+a/>
+<a= function
+(x)
+{ console.log("y") }
+a/>
+<a= x
+=>
+{ console.log("y") }
+a/>
+<a= async
+function
+(x)
+{ console.log("y") }
+a/>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/attr-operators-newline-before/__snapshots__/attr-operators-newline-before.expected.txt b/src/__tests__/fixtures/attr-operators-newline-before/__snapshots__/attr-operators-newline-before.expected.txt
new file mode 100644
index 00000000..bfa278ad
--- /dev/null
+++ b/src/__tests__/fixtures/attr-operators-newline-before/__snapshots__/attr-operators-newline-before.expected.txt
@@ -0,0 +1,427 @@
+1╭─ // newline continuations only work for html mode or enclosed concice attr groups.
+ │  │ ╰─ comment.value " newline continuations only work for html mode or enclosed concice attr groups."
+ ╰─ ╰─ comment "// newline continuations only work for html mode or enclosed concice attr groups."
+2╭─ // here we sanity check that is the case.
+ │  │ ╰─ comment.value " here we sanity check that is the case."
+ ╰─ ╰─ comment "// here we sanity check that is the case."
+3╭─ a=x
+ │  ││╰─ attrValue.value
+ │  │├─ attrValue "=x"
+ │  │╰─ attrName
+ ╰─ ╰─ tagName
+4╭─ .b
+ │  │╰─ tagShorthandClass.quasis[0]
+ │  ├─ closeTag(a)
+ │  ├─ openTagEnd
+ │  ├─ tagShorthandClass ".b"
+ ╰─ ╰─ tagName
+5╭─ 
+ ╰─ ╰─ openTagEnd
+6╭─ <a=x
+ │  │││╰─ attrValue.value "x\n.y"
+ │  ││├─ attrValue "=x\n.y"
+ │  ││╰─ attrName
+ │  │╰─ tagName
+ ╰─ ╰─ closeTag()
+7╭─ .y a/>
+ │     │╰─ openTagEnd:selfClosed "/>"
+ ╰─    ╰─ attrName
+8╭─ <a=x
+ │   ││╰─ attrValue.value "x\n! y"
+ │   │├─ attrValue "=x\n! y"
+ │   │╰─ attrName
+ ╰─  ╰─ tagName
+9╭─ ! y a/>
+ │      │╰─ openTagEnd:selfClosed "/>"
+ ╰─     ╰─ attrName
+10╭─ <a=x
+  │   ││╰─ attrValue.value "x\n* y"
+  │   │├─ attrValue "=x\n* y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+11╭─ * y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+12╭─ <a=x
+  │   ││╰─ attrValue.value "x\n/ y"
+  │   │├─ attrValue "=x\n/ y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+13╭─ / y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+14╭─ <a=x
+  │   ││╰─ attrValue.value "x\n** y"
+  │   │├─ attrValue "=x\n** y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+15╭─ ** y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+16╭─ <a=x
+  │   ││╰─ attrValue.value "x\n% y"
+  │   │├─ attrValue "=x\n% y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+17╭─ % y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+18╭─ <a=x
+  │   ││╰─ attrValue.value "x\n& y"
+  │   │├─ attrValue "=x\n& y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+19╭─ & y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+20╭─ <a=x
+  │   ││╰─ attrValue.value "x\n&& y"
+  │   │├─ attrValue "=x\n&& y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+21╭─ && y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+22╭─ <a=x
+  │   ││╰─ attrValue.value "x\n^ y"
+  │   │├─ attrValue "=x\n^ y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+23╭─ ^ y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+24╭─ <a=x
+  │   ││╰─ attrValue.value "x\n~ y"
+  │   │├─ attrValue "=x\n~ y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+25╭─ ~ y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+26╭─ <a=x
+  │   ││╰─ attrValue.value "x\n| y"
+  │   │├─ attrValue "=x\n| y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+27╭─ | y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+28╭─ <a=x
+  │   ││╰─ attrValue.value "x\n|| y"
+  │   │├─ attrValue "=x\n|| y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+29╭─ || y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+30╭─ <a=x
+  │   ││╰─ attrValue.value "x\n?? y"
+  │   │├─ attrValue "=x\n?? y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+31╭─ ?? y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+32╭─ <a=x
+  │   ││╰─ attrValue.value "x\n? y\n: z"
+  │   │├─ attrValue "=x\n? y\n: z"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+33├─ ? y
+34╭─ : z a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+35╭─ <a=x
+  │   ││╰─ attrValue.value "x\n== y"
+  │   │├─ attrValue "=x\n== y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+36╭─ == y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+37╭─ <a=x
+  │   ││╰─ attrValue.value "x\n=== y"
+  │   │├─ attrValue "=x\n=== y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+38╭─ === y a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+39╭─ <a=x
+  │   ││╰─ attrValue.value "x\n!= y"
+  │   │├─ attrValue "=x\n!= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+40╭─ != y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+41╭─ <a=x
+  │   ││╰─ attrValue.value "x\n!== y"
+  │   │├─ attrValue "=x\n!== y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+42╭─ !== y a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+43╭─ <a=x
+  │   ││╰─ attrValue.value "x\n<= y"
+  │   │├─ attrValue "=x\n<= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+44╭─ <= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+45╭─ <a=x
+  │   ││╰─ attrValue.value "x\n>= y"
+  │   │├─ attrValue "=x\n>= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+46╭─ >= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+47╭─ <a=x
+  │   ││╰─ attrValue.value "x\n&= y"
+  │   │├─ attrValue "=x\n&= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+48╭─ &= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+49╭─ <a=x
+  │   ││╰─ attrValue.value "x\n&&= y"
+  │   │├─ attrValue "=x\n&&= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+50╭─ &&= y a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+51╭─ <a=x
+  │   ││╰─ attrValue.value "x\n|= y"
+  │   │├─ attrValue "=x\n|= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+52╭─ |= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+53╭─ <a=x
+  │   ││╰─ attrValue.value "x\n||= y"
+  │   │├─ attrValue "=x\n||= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+54╭─ ||= y a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+55╭─ <a=x
+  │   ││╰─ attrValue.value "x\n^= y"
+  │   │├─ attrValue "=x\n^= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+56╭─ ^= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+57╭─ <a=x
+  │   ││╰─ attrValue.value "x\n~= y"
+  │   │├─ attrValue "=x\n~= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+58╭─ ~= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+59╭─ <a=x
+  │   ││╰─ attrValue.value "x\n>>= y"
+  │   │├─ attrValue "=x\n>>= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+60╭─ >>= y a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+61╭─ <a=x
+  │   ││╰─ attrValue.value "x\n>>>= y"
+  │   │├─ attrValue "=x\n>>>= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+62╭─ >>>= y a/>
+  │         │╰─ openTagEnd:selfClosed "/>"
+  ╰─        ╰─ attrName
+63╭─ <a=x
+  │   ││╰─ attrValue.value "x\n-= y"
+  │   │├─ attrValue "=x\n-= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+64╭─ -= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+65╭─ <a=x
+  │   ││╰─ attrValue.value "x\n/= y"
+  │   │├─ attrValue "=x\n/= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+66╭─ /= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+67╭─ <a=x
+  │   ││╰─ attrValue.value "x\n*= y"
+  │   │├─ attrValue "=x\n*= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+68╭─ *= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+69╭─ <a=x
+  │   ││╰─ attrValue.value "x\n**= y"
+  │   │├─ attrValue "=x\n**= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+70╭─ **= y a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+71╭─ <a=x
+  │   ││╰─ attrValue.value "x\n%= y"
+  │   │├─ attrValue "=x\n%= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+72╭─ %= y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+73╭─ <a=x
+  │   ││╰─ attrValue.value "x\n+= y"
+  │   │├─ attrValue "=x\n+= y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+74╭─ += y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+75╭─ <a=x ++
+  │   ││╰─ attrValue.value "x ++\n+ y"
+  │   │├─ attrValue "=x ++\n+ y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+76╭─ + y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+77╭─ <a=x +
+  │   ││╰─ attrValue.value "x +\n++ y"
+  │   │├─ attrValue "=x +\n++ y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+78╭─ ++ y a/>
+  │       │╰─ openTagEnd:selfClosed "/>"
+  ╰─      ╰─ attrName
+79╭─ <a=x
+  │   ││╰─ attrValue.value "x\n>>y"
+  │   │├─ attrValue "=x\n>>y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+80╭─ >>y a/>
+  │      │╰─ openTagEnd:selfClosed "/>"
+  ╰─     ╰─ attrName
+81╭─ <a=x
+  │   ││╰─ attrValue.value "x\n>>> y"
+  │   │├─ attrValue "=x\n>>> y"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+82╭─ >>> y a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+83╭─ <a=x
+  │   ││╰─ attrValue.value "x\n( y )"
+  │   │├─ attrValue "=x\n( y )"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+84╭─ ( y ) a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+85╭─ <a=x
+  │   ││╰─ attrValue.value "x\n{ y }"
+  │   │├─ attrValue "=x\n{ y }"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+86╭─ { y } a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+87╭─ <a=x
+  │   ││╰─ attrValue.value "x\n=>\ny"
+  │   │├─ attrValue "=x\n=>\ny"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+88├─ =>
+89╭─ y a/>
+  │    │╰─ openTagEnd:selfClosed "/>"
+  ╰─   ╰─ attrName
+90╭─ <a=x
+  │   ││╰─ attrValue.value "x\n=>\n( y )"
+  │   │├─ attrValue "=x\n=>\n( y )"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+91├─ =>
+92╭─ ( y ) a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+93╭─ <a=x
+  │   ││╰─ attrValue.value "x\n=>\n{ y }"
+  │   │├─ attrValue "=x\n=>\n{ y }"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+94├─ =>
+95╭─ { y } a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+96╭─ <a=( x )
+  │   ││╰─ attrValue.value "( x )\n{ y }"
+  │   │├─ attrValue "=( x )\n{ y }"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+97╭─ { y } a/>
+  │        │╰─ openTagEnd:selfClosed "/>"
+  ╰─       ╰─ attrName
+98╭─ <a= (x)
+  │   ││ ╰─ attrValue.value "(x)\n=>\n{ console.log(\"y\") }"
+  │   │├─ attrValue "= (x)\n=>\n{ console.log(\"y\") }"
+  │   │╰─ attrName
+  ╰─  ╰─ tagName
+99├─ =>
+100╭─ { console.log("y") } a/>
+   │                       │╰─ openTagEnd:selfClosed "/>"
+   ╰─                      ╰─ attrName
+101╭─ <a= async
+   │   ││ ╰─ attrValue.value "async\nx\n=>\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= async\nx\n=>\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+102├─ x
+103├─ =>
+104├─ { console.log("y") }
+105╭─ a/>
+   │  │╰─ openTagEnd:selfClosed "/>"
+   ╰─ ╰─ attrName
+106╭─ <a= function
+   │   ││ ╰─ attrValue.value "function\n(x)\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= function\n(x)\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+107├─ (x)
+108├─ { console.log("y") }
+109╭─ a/>
+   │  │╰─ openTagEnd:selfClosed "/>"
+   ╰─ ╰─ attrName
+110╭─ <a= x
+   │   ││ ╰─ attrValue.value "x\n=>\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= x\n=>\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+111├─ =>
+112├─ { console.log("y") }
+113╭─ a/>
+   │  │╰─ openTagEnd:selfClosed "/>"
+   ╰─ ╰─ attrName
+114╭─ <a= async
+   │   ││ ╰─ attrValue.value "async\nfunction\n(x)\n{ console.log(\"y\") }"
+   │   │├─ attrValue "= async\nfunction\n(x)\n{ console.log(\"y\") }"
+   │   │╰─ attrName
+   ╰─  ╰─ tagName
+115├─ function
+116├─ (x)
+117├─ { console.log("y") }
+118╭─ a/>
+   │  │╰─ openTagEnd:selfClosed "/>"
+   ╰─ ╰─ attrName
\ No newline at end of file
diff --git a/src/__tests__/fixtures/attr-operators-newline-before/input.marko b/src/__tests__/fixtures/attr-operators-newline-before/input.marko
new file mode 100644
index 00000000..a854587b
--- /dev/null
+++ b/src/__tests__/fixtures/attr-operators-newline-before/input.marko
@@ -0,0 +1,118 @@
+// newline continuations only work for html mode or enclosed concice attr groups.
+// here we sanity check that is the case.
+a=x
+.b
+
+<a=x
+.y a/>
+<a=x
+! y a/>
+<a=x
+* y a/>
+<a=x
+/ y a/>
+<a=x
+** y a/>
+<a=x
+% y a/>
+<a=x
+& y a/>
+<a=x
+&& y a/>
+<a=x
+^ y a/>
+<a=x
+~ y a/>
+<a=x
+| y a/>
+<a=x
+|| y a/>
+<a=x
+?? y a/>
+<a=x
+? y
+: z a/>
+<a=x
+== y a/>
+<a=x
+=== y a/>
+<a=x
+!= y a/>
+<a=x
+!== y a/>
+<a=x
+<= y a/>
+<a=x
+>= y a/>
+<a=x
+&= y a/>
+<a=x
+&&= y a/>
+<a=x
+|= y a/>
+<a=x
+||= y a/>
+<a=x
+^= y a/>
+<a=x
+~= y a/>
+<a=x
+>>= y a/>
+<a=x
+>>>= y a/>
+<a=x
+-= y a/>
+<a=x
+/= y a/>
+<a=x
+*= y a/>
+<a=x
+**= y a/>
+<a=x
+%= y a/>
+<a=x
++= y a/>
+<a=x ++
++ y a/>
+<a=x +
+++ y a/>
+<a=x
+>>y a/>
+<a=x
+>>> y a/>
+<a=x
+( y ) a/>
+<a=x
+{ y } a/>
+<a=x
+=>
+y a/>
+<a=x
+=>
+( y ) a/>
+<a=x
+=>
+{ y } a/>
+<a=( x )
+{ y } a/>
+<a= (x)
+=>
+{ console.log("y") } a/>
+<a= async
+x
+=>
+{ console.log("y") }
+a/>
+<a= function
+(x)
+{ console.log("y") }
+a/>
+<a= x
+=>
+{ console.log("y") }
+a/>
+<a= async
+function
+(x)
+{ console.log("y") }
+a/>
\ No newline at end of file
diff --git a/src/states/EXPRESSION.ts b/src/states/EXPRESSION.ts
index a9ddb9b9..a6273f2e 100644
--- a/src/states/EXPRESSION.ts
+++ b/src/states/EXPRESSION.ts
@@ -8,6 +8,12 @@ import {
   ErrorCode,
 } from "../internal";
 
+const enum PatternType {
+  HTML_ATTRS,
+  CONCISE_ATTRS,
+  CONCISE_ATTRS_GROUP,
+}
+
 export interface ExpressionMeta extends Meta {
   groupStack: number[];
   terminator: number | (number | number[])[];
@@ -16,8 +22,9 @@ export interface ExpressionMeta extends Meta {
   terminatedByWhitespace: boolean;
 }
 
-const conciseOperatorPattern = buildOperatorPattern(true);
-const htmlOperatorPattern = buildOperatorPattern(false);
+const htmlAttrsPattern = buildPattern(PatternType.HTML_ATTRS);
+const conciseAttrsPattern = buildPattern(PatternType.CONCISE_ATTRS);
+const conciseAttrsGroupPattern = buildPattern(PatternType.CONCISE_ATTRS_GROUP);
 
 export const EXPRESSION: StateDefinition<ExpressionMeta> = {
   name: "EXPRESSION",
@@ -134,7 +141,8 @@ export const EXPRESSION: StateDefinition<ExpressionMeta> = {
   eol(_, expression) {
     if (
       !expression.groupStack.length &&
-      (expression.terminatedByWhitespace || expression.terminatedByEOL)
+      (expression.terminatedByEOL || expression.terminatedByWhitespace) &&
+      !checkForOperators(this, expression)
     ) {
       this.exitState();
     }
@@ -201,17 +209,20 @@ export const EXPRESSION: StateDefinition<ExpressionMeta> = {
   return() {},
 };
 
-function buildOperatorPattern(isConcise: boolean) {
+function buildPattern(type: PatternType) {
+  const space = type === PatternType.CONCISE_ATTRS ? "[ \\t]" : "\\s";
   const binary =
     "(?:[!~*%&^|?<]+=*)+" + // Any of these characters can always continue an expression
     "|:+(?!=)" + // Match a colon without matching a bound attribute
     "|[>/+=-]+=|=>" + // Match equality and multi char assignment operators w/o matching equals by itself
-    "|(?<!\\+)[ \\t]*\\+(?:[ \\t]*\\+[ \\t]*\\+)*[ \\t]*(?!\\+)" + // We only match an odd number of plus's
-    `|(?<!-)-${isConcise ? "" : "(?:[ \\t]*-[ \\t]*-)*[ \\t]*"}(?!-)` + // In concise mode we can't match multiple hyphens otherwise we can match an even number of hyphens
-    `|(?<![/*])/(?![/*${isConcise ? "" : ">"}])` + // We only continue after a forward slash if it isn't //, /* (or /> in html mode)
-    `|(?<!\\.)\\.(?!\\.)` + // We only continue after a dot if it isn't on newline in concise mode or a ...
-    `|>${isConcise ? "+" : "{2,}"}` + // in html mode only consume closing angle brackets if it is >>
-    "|\\b(?:in(?:stanceof)?|as|extends)(?=[ \\t]+[^=/,;:>])"; // We only continue after word operators (instanceof/in) when they are not followed by a terminator
+    `|(?<!\\+)[ \\t]*\\+(?:\\s*\\+\\s*\\+)*\\s*(?!\\+)` + // We only match an odd number of plus's
+    `|(?<!-)-${
+      type === PatternType.CONCISE_ATTRS ? "" : "(?:\\s*-\\s*-)*\\s*"
+    }(?!-)` + // In concise mode we can't match multiple hyphens otherwise we can match an even number of hyphens
+    `|(?<![/*])/(?![/*${type === PatternType.HTML_ATTRS ? ">" : ""}])` + // We only continue after a forward slash if it isn't //, /* (or /> in html mode)
+    `|(?<!\\.)\\.(?!\\.)` + // We only continue after a dot if it isn't a ...
+    `|>${type === PatternType.HTML_ATTRS ? "{2,}" : "+"}` + // in html mode only consume closing angle brackets if it is >>
+    "|[ \\t]+(?:in(?:stanceof)?|as|extends)(?=[ \\t]+[^=/,;:>])"; // We only continue after word operators (instanceof/in) when they are not followed by a terminator
   const unary =
     "\\b(?<![.]\\s*)(?:" +
     "a(?:sync|wait)" +
@@ -222,8 +233,7 @@ function buildOperatorPattern(isConcise: boolean) {
     "|typeof" +
     "|void" +
     ")\\b";
-  const lookAheadPattern =
-    "[ \\t]*(?:" + binary + ")[ \\t]*" + `|[ \\t]+(?=[{(])`; // if we have spaces followed by an opening bracket, we'll consume the spaces and let the expression state handle the brackets
+  const lookAheadPattern = `${space}*(?:${binary})\\s*|${space}+(?=[{(])`; // if we have spaces followed by an opening bracket, we'll consume the spaces and let the expression state handle the brackets
   const lookBehindPattern = `(?<=${unary}|${binary})`;
   return new RegExp(`${lookAheadPattern}|${lookBehindPattern}`, "ym");
 }
@@ -233,10 +243,13 @@ function checkForOperators(parser: Parser, expression: ExpressionMeta) {
     return false;
   }
 
-  const pattern =
-    parser.isConcise || expression.terminatedByEOL
-      ? conciseOperatorPattern
-      : htmlOperatorPattern;
+  const pattern = parser.isConcise
+    ? parser.activeTag?.stage === STATE.TAG_STAGE.ATTR_GROUP
+      ? conciseAttrsGroupPattern
+      : conciseAttrsPattern
+    : expression.terminatedByEOL
+    ? conciseAttrsPattern
+    : htmlAttrsPattern;
   pattern.lastIndex = parser.pos;
   const matches = pattern.exec(parser.data);
 
diff --git a/src/states/OPEN_TAG.ts b/src/states/OPEN_TAG.ts
index d8f7284e..4514e0f1 100644
--- a/src/states/OPEN_TAG.ts
+++ b/src/states/OPEN_TAG.ts
@@ -9,7 +9,7 @@ import {
   ErrorCode,
 } from "../internal";
 
-const enum TAG_STAGE {
+export const enum TAG_STAGE {
   UNKNOWN,
   VAR,
   ARGUMENT,