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

packages/react-native/ReactCommon/react/renderer/css/CSSToken.h

@@ -31,6 +31,7 @@ enum class CSSTokenType {
   OpenSquare,
   Percentage,
   WhiteSpace,
+  Hash,
 };
 
 /*

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());

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