Add <hash-token> consumption for CSSTokenizer (#44613)

Summary: Pull Request resolved: #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
facebook · May 20, 2024 · 1ad69d9 · 1ad69d9
1 parent 93c079b
commit 1ad69d9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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