From 3c72c6abc2980404fa45060c5270639bf834d500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B6=82=E7=B4=B3=E9=A8=B0=28Shen-Teng=20Tu=29?=
 <tusamten@gmail.com>
Date: Sat, 17 Apr 2021 20:47:36 +0800
Subject: [PATCH] parser: disable template variables in `<style>` (#9777)

---
 vlib/v/parser/tmpl.v                   | 4 ++++
 vlib/v/tests/inout/file.html           | 5 +++++
 vlib/v/tests/inout/tmpl_parse_html.out | 5 +++++
 3 files changed, 14 insertions(+)

diff --git a/vlib/v/parser/tmpl.v b/vlib/v/parser/tmpl.v
index a6992f4d20..1679e5b905 100644
--- a/vlib/v/parser/tmpl.v
+++ b/vlib/v/parser/tmpl.v
@@ -218,6 +218,10 @@ mut sb := strings.new_builder($lstartlength)\n
 			// replace `$` to `\$` at first to escape JavaScript template literal syntax
 			source.writeln(line.replace(r'$', r'\$').replace(r'$$', r'@').replace(r'.$',
 				r'.@').replace(r"'", r"\'"))
+		} else if state == .css {
+			// disable template variable declaration in inline stylesheet
+			// because of  some CSS rules prefixed with `@`.
+			source.writeln(line.replace(r'.$', r'.@').replace(r"'", r"\'"))
 		} else {
 			// HTML, may include `@var`
 			// escaped by cgen, unless it's a `vweb.RawHtml` string
diff --git a/vlib/v/tests/inout/file.html b/vlib/v/tests/inout/file.html
index 4e15416c55..e7eb9366ed 100644
--- a/vlib/v/tests/inout/file.html
+++ b/vlib/v/tests/inout/file.html
@@ -6,6 +6,11 @@
 h1 {
 color: green;
 }
+
+@keyframes mymove {
+  from {top: 0px;}
+  to {top: 200px;}
+}
 </style>
 <style media="print">
 h1 {
diff --git a/vlib/v/tests/inout/tmpl_parse_html.out b/vlib/v/tests/inout/tmpl_parse_html.out
index d8928fa999..132622d0e8 100644
--- a/vlib/v/tests/inout/tmpl_parse_html.out
+++ b/vlib/v/tests/inout/tmpl_parse_html.out
@@ -6,6 +6,11 @@
 h1 {
 color: green;
 }
+
+@keyframes mymove {
+from {top: 0px;}
+to {top: 200px;}
+}
 </style>
 <style media="print">
 h1 {