css: allow : as first cahr for identifier

This is a hack until #878 is fixed

Author: krichprollsch

src/browser/css/parser.zig

@@ -222,13 +222,14 @@ pub const Parser = struct {
         const sel = p.s;
         const sel_len = sel.len;
 
+        var first = true; // TODO remove when #878 is fixed
         var i = p.i;
         var ok = false;
 
         while (i < sel_len) {
             const c = sel[i];
 
-            if (nameChar(c)) {
+            if (nameChar(c) or (first and c == ':')) { // TODO remove the `or (...)` once #878 is fixed
                 const start = i;
                 while (i < sel_len and nameChar(sel[i])) i += 1;
                 w.writeAll(sel[start..i]) catch return ParseError.WriteError;
@@ -248,6 +249,8 @@ pub const Parser = struct {
                 // default:
                 break;
             }
+
+            if (first) first = false; // TODO remove when #878 is fixed
         }
 
         if (!ok) return ParseError.ExpectedName;
@@ -811,7 +814,8 @@ pub const Parser = struct {
 // nameStart returns whether c can be the first character of an identifier
 // (not counting an initial hyphen, or an escape sequence).
 fn nameStart(c: u8) bool {
-    return 'a' <= c and c <= 'z' or 'A' <= c and c <= 'Z' or c == '_' or c > 127;
+    return 'a' <= c and c <= 'z' or 'A' <= c and c <= 'Z' or c == '_' or c > 127 or
+        c == ':'; // TODO remove this case when #878 is fixed
 }
 
 // nameChar returns whether c can be a character within an identifier

src/browser/dom/document.zig

@@ -469,6 +469,23 @@ test "Browser.DOM.Document" {
             ,
             "1",
         },
+
+        // We have an escape bug somewhere: here we are lookig.
+        // This test should look for `class="bar:foo"` elements.
+        // But currently the css parser receive the exact string `bar:foo`
+        // which is invalid (the pseudo class `:foo` doesn't exist).
+        // The parser should receive `bar\:foo` instead. The `\` char is lost.
+        //
+        //.{ "document.querySelectorAll('.bar\\:foo').length", "0" },
+        //
+        // A simpler test to reproduce the issue:
+        // .{ "'foo\\:bar'", "foo\\:bar" },
+        //
+        // I add a hack to accept `:` as first char for identifier, it doesn't
+        // break other cases, but it's invalid in reality.
+        //
+        // see https://github.com/lightpanda-io/browser/issues/878
+        .{ "document.querySelectorAll('.\\:popover-open').length", "0" },
     }, .{});
 
     try runner.testCases(&.{