From 1ad69d94bc00ebf2e1abede02dbbad575afdaaa2 Mon Sep 17 00:00:00 2001
From: Jorge Cabiedes Acosta <jorgecab@meta.com>
Date: Mon, 20 May 2024 03:09:02 -0700
Subject: [PATCH] Add <hash-token> consumption for CSSTokenizer (#44613)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44613

We are building a native CSS parser for Fabric, to allow broader support for CSS. One area not yet implemented are features required for color.

<hash-token> is a pre-requisite.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D57180293

fbshipit-source-id: 0932c44d881f205aed55bcdf4fa23ad04b336c11
---
 .../ReactCommon/react/renderer/css/CSSToken.h   |  1 +
 .../react/renderer/css/CSSTokenizer.h           | 14 ++++++++++++++
 .../renderer/css/tests/CSSTokenizerTest.cpp     | 17 +++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSToken.h b/packages/react-native/ReactCommon/react/renderer/css/CSSToken.h
index 090af4db296..e7e363365dd 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSToken.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSToken.h
@@ -31,6 +31,7 @@ enum class CSSTokenType {
   OpenSquare,
   Percentage,
   WhiteSpace,
+  Hash,
 };
 
 /*
diff --git a/packages/react-native/ReactCommon/react/renderer/css/CSSTokenizer.h b/packages/react-native/ReactCommon/react/renderer/css/CSSTokenizer.h
index b5466c5e779..c5e28c75e6e 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/CSSTokenizer.h
+++ b/packages/react-native/ReactCommon/react/renderer/css/CSSTokenizer.h
@@ -61,6 +61,12 @@ class CSSTokenizer {
         } else {
           return consumeDelim();
         }
+      case '#':
+        if (isIdent(peek(1))) {
+          return consumeHash();
+        } else {
+          return consumeDelim();
+        }
     }
 
     if (isDigit(nextChar)) {
@@ -225,6 +231,14 @@ class CSSTokenizer {
     return {CSSTokenType::Ident, consumeRunningValue()};
   }
 
+  constexpr CSSToken consumeHash() {
+    // https://www.w3.org/TR/css-syntax-3/#consume-token (U+0023 NUMBER SIGN)
+    advance();
+    consumeRunningValue();
+
+    return {CSSTokenType::Hash, consumeIdentSequence().stringValue()};
+  }
+
   constexpr std::string_view consumeRunningValue() {
     auto next = remainingCharacters_.substr(0, position_);
     remainingCharacters_ = remainingCharacters_.substr(next.size());
diff --git a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTokenizerTest.cpp b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTokenizerTest.cpp
index 7083a37da42..3d44b58f9f4 100644
--- a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTokenizerTest.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTokenizerTest.cpp
@@ -202,4 +202,21 @@ TEST(CSSTokenizer, invalid_values) {
       CSSToken{CSSTokenType::EndOfFile});
 }
 
+TEST(CSSTokenizer, hash_values) {
+  EXPECT_TOKENS(
+      "#Ff03BC",
+      CSSToken{CSSTokenType::Hash, "Ff03BC"},
+      CSSToken{CSSTokenType::EndOfFile});
+
+  EXPECT_TOKENS(
+      "#identifier",
+      CSSToken{CSSTokenType::Hash, "identifier"},
+      CSSToken{CSSTokenType::EndOfFile});
+
+  EXPECT_TOKENS(
+      "#*",
+      CSSToken{CSSTokenType::Delim, "#"},
+      CSSToken{CSSTokenType::Delim, "*"},
+      CSSToken{CSSTokenType::EndOfFile});
+}
 } // namespace facebook::react