react-native-windows 0.81.0-preview.1 → 0.81.0-preview.6

package/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

@@ -814,6 +814,25 @@ void ScrollViewComponentView::updateProps(
     }
     m_scrollVisual.SetSnapPoints(newViewProps.snapToStart, newViewProps.snapToEnd, snapToOffsets.GetView());
   }
+
+  if (!oldProps || oldViewProps.pagingEnabled != newViewProps.pagingEnabled) {
+    m_scrollVisual.PagingEnabled(newViewProps.pagingEnabled);
+  }
+
+  if (!oldProps || oldViewProps.snapToInterval != newViewProps.snapToInterval) {
+    m_scrollVisual.SnapToInterval(static_cast<float>(newViewProps.snapToInterval));
+  }
+
+  if (!oldProps || oldViewProps.snapToAlignment != newViewProps.snapToAlignment) {
+    using SnapPointsAlignment = winrt::Microsoft::ReactNative::Composition::Experimental::SnapPointsAlignment;
+    SnapPointsAlignment alignment = SnapPointsAlignment::Near; // default is "start"
+    if (newViewProps.snapToAlignment == facebook::react::ScrollViewSnapToAlignment::Center) {
+      alignment = SnapPointsAlignment::Center;
+    } else if (newViewProps.snapToAlignment == facebook::react::ScrollViewSnapToAlignment::End) {
+      alignment = SnapPointsAlignment::Far;
+    }
+    m_scrollVisual.SnapToAlignment(alignment);
+  }
 }
 
 void ScrollViewComponentView::updateState(

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -697,10 +697,17 @@ void WindowsTextInputComponentView::OnPointerPressed(
   }
 
   if (m_textServices && msg) {
-    LRESULT lresult;
-    DrawBlock db(*this);
-    auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
-    args.Handled(hr != S_FALSE);
+    if (msg == WM_RBUTTONUP && !windowsTextInputProps().contextMenuHidden) {
+      ShowContextMenu(position);
+      args.Handled(true);
+    } else if (msg == WM_RBUTTONUP && windowsTextInputProps().contextMenuHidden) {
+      args.Handled(true);
+    } else {
+      LRESULT lresult;
+      DrawBlock db(*this);
+      auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
+      args.Handled(hr != S_FALSE);
+    }
   }
 
   // Emits the OnPressIn event
@@ -844,8 +851,8 @@ void WindowsTextInputComponentView::OnPointerWheelChanged(
 }
 void WindowsTextInputComponentView::OnKeyDown(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
-  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
-  // behavior We do forward Ctrl+Tab to the textinput.
+  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with
+  // WinUI behavior We do forward Ctrl+Tab to the textinput.
   if (args.Key() != winrt::Windows::System::VirtualKey::Tab ||
       (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down) {
@@ -872,8 +879,8 @@ void WindowsTextInputComponentView::OnKeyDown(
 
 void WindowsTextInputComponentView::OnKeyUp(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
-  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
-  // behavior We do forward Ctrl+Tab to the textinput.
+  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with
+  // WinUI behavior We do forward Ctrl+Tab to the textinput.
   if (args.Key() != winrt::Windows::System::VirtualKey::Tab ||
       (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
        winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down) {
@@ -943,8 +950,8 @@ bool WindowsTextInputComponentView::ShouldSubmit(
 
 void WindowsTextInputComponentView::OnCharacterReceived(
     const winrt::Microsoft::ReactNative::Composition::Input::CharacterReceivedRoutedEventArgs &args) noexcept {
-  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
-  // behavior We do forward Ctrl+Tab to the textinput.
+  // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with
+  // WinUI behavior We do forward Ctrl+Tab to the textinput.
   if ((args.KeyCode() == '\t') &&
       ((args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
         winrt::Microsoft::UI::Input::VirtualKeyStates::Down) != winrt::Microsoft::UI::Input::VirtualKeyStates::Down)) {
@@ -1547,25 +1554,59 @@ void WindowsTextInputComponentView::UpdateParaFormat() noexcept {
   m_pf.dwMask = PFM_ALL;
 
   auto &textAlign = windowsTextInputProps().textAlign;
+  auto &baseWritingDirection = windowsTextInputProps().textAttributes.baseWritingDirection;
+
+  // Handle writingDirection (baseWritingDirection)
+  // For WritingDirection::Natural, use the computed layout direction from the layout tree
+  // since direction can be overridden at any point in the tree
+  bool isRTL = false;
+  if (baseWritingDirection.has_value()) {
+    if (*baseWritingDirection == facebook::react::WritingDirection::RightToLeft) {
+      isRTL = true;
+      m_pf.dwMask |= PFM_RTLPARA;
+      m_pf.wEffects |= PFE_RTLPARA;
+    } else if (*baseWritingDirection == facebook::react::WritingDirection::LeftToRight) {
+      isRTL = false;
+      // Ensure RTL flag is not set
+      m_pf.wEffects &= ~PFE_RTLPARA;
+    } else if (*baseWritingDirection == facebook::react::WritingDirection::Natural) {
+      // Natural uses the layout direction computed from the tree
+      isRTL = (layoutMetrics().layoutDirection == facebook::react::LayoutDirection::RightToLeft);
+      if (isRTL) {
+        m_pf.dwMask |= PFM_RTLPARA;
+        m_pf.wEffects |= PFE_RTLPARA;
+      } else {
+        m_pf.wEffects &= ~PFE_RTLPARA;
+      }
+    }
+  } else {
+    // No explicit writing direction set - use layout direction from tree
+    isRTL = (layoutMetrics().layoutDirection == facebook::react::LayoutDirection::RightToLeft);
+    if (isRTL) {
+      m_pf.dwMask |= PFM_RTLPARA;
+      m_pf.wEffects |= PFE_RTLPARA;
+    } else {
+      m_pf.wEffects &= ~PFE_RTLPARA;
+    }
+  }
 
+  // Handle textAlign
   if (textAlign == facebook::react::TextAlignment::Center) {
     m_pf.wAlignment = PFA_CENTER;
   } else if (textAlign == facebook::react::TextAlignment::Right) {
     m_pf.wAlignment = PFA_RIGHT;
+  } else if (textAlign == facebook::react::TextAlignment::Justified) {
+    m_pf.wAlignment = PFA_JUSTIFY;
+  } else if (textAlign == facebook::react::TextAlignment::Natural) {
+    // Natural alignment respects writing direction
+    m_pf.wAlignment = isRTL ? PFA_RIGHT : PFA_LEFT;
   } else {
+    // Default to left alignment
     m_pf.wAlignment = PFA_LEFT;
   }
 
   m_pf.cTabCount = 1;
   m_pf.rgxTabs[0] = lDefaultTab;
-
-  /*
-        if (m_spcontroller->IsCurrentReadingOrderRTL())
-        {
-                m_pf.dwMask |= PFM_RTLPARA;
-                m_pf.wEffects |= PFE_RTLPARA;
-        }
-  */
 }
 
 void WindowsTextInputComponentView::OnRenderingDeviceLost() noexcept {
@@ -1826,4 +1867,47 @@ void WindowsTextInputComponentView::updateSpellCheck(bool enable) noexcept {
   winrt::check_hresult(
       m_textServices->TxSendMessage(EM_SETLANGOPTIONS, IMF_SPELLCHECKING, enable ? newLangOptions : 0, &lresult));
 }
+
+void WindowsTextInputComponentView::ShowContextMenu(const winrt::Windows::Foundation::Point &position) noexcept {
+  HMENU menu = CreatePopupMenu();
+  if (!menu)
+    return;
+
+  CHARRANGE selection;
+  LRESULT res;
+  m_textServices->TxSendMessage(EM_EXGETSEL, 0, reinterpret_cast<LPARAM>(&selection), &res);
+
+  bool hasSelection = selection.cpMin != selection.cpMax;
+  bool isEmpty = GetTextFromRichEdit().empty();
+  bool isReadOnly = windowsTextInputProps().editable == false;
+  bool canPaste = !isReadOnly && IsClipboardFormatAvailable(CF_UNICODETEXT);
+
+  AppendMenuW(menu, MF_STRING | (hasSelection && !isReadOnly ? 0 : MF_GRAYED), 1, L"Cut");
+  AppendMenuW(menu, MF_STRING | (hasSelection ? 0 : MF_GRAYED), 2, L"Copy");
+  AppendMenuW(menu, MF_STRING | (canPaste ? 0 : MF_GRAYED), 3, L"Paste");
+  AppendMenuW(menu, MF_STRING | (!isEmpty && !isReadOnly ? 0 : MF_GRAYED), 4, L"Select All");
+
+  POINT cursorPos;
+  GetCursorPos(&cursorPos);
+
+  HWND hwnd = GetActiveWindow();
+
+  int cmd = TrackPopupMenu(
+      menu, TPM_LEFTALIGN | TPM_TOPALIGN | TPM_RETURNCMD | TPM_NONOTIFY, cursorPos.x, cursorPos.y, 0, hwnd, NULL);
+
+  if (cmd == 1) { // Cut
+    m_textServices->TxSendMessage(WM_CUT, 0, 0, &res);
+    OnTextUpdated();
+  } else if (cmd == 2) { // Copy
+    m_textServices->TxSendMessage(WM_COPY, 0, 0, &res);
+  } else if (cmd == 3) { // Paste
+    m_textServices->TxSendMessage(WM_PASTE, 0, 0, &res);
+    OnTextUpdated();
+  } else if (cmd == 4) { // Select All
+    m_textServices->TxSendMessage(EM_SETSEL, 0, -1, &res);
+  }
+
+  DestroyMenu(menu);
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h

@@ -118,6 +118,7 @@ struct WindowsTextInputComponentView
   void updateLetterSpacing(float letterSpacing) noexcept;
   void updateAutoCorrect(bool value) noexcept;
   void updateSpellCheck(bool value) noexcept;
+  void ShowContextMenu(const winrt::Windows::Foundation::Point &position) noexcept;
 
   winrt::Windows::UI::Composition::CompositionSurfaceBrush m_brush{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::ICaretVisual m_caretVisual{nullptr};

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp

@@ -136,6 +136,25 @@ void WindowsTextLayoutManager::GetTextLayout(
         outerFragment.textAttributes.lineHeight * 0.8f));
   }
 
+  // Set reading direction (RTL/LTR) based on baseWritingDirection
+  // Only set reading direction if explicitly specified to avoid breaking existing layouts
+  bool isRTL = false;
+  if (outerFragment.textAttributes.baseWritingDirection.has_value()) {
+    DWRITE_READING_DIRECTION readingDirection = DWRITE_READING_DIRECTION_LEFT_TO_RIGHT;
+    if (*outerFragment.textAttributes.baseWritingDirection == facebook::react::WritingDirection::RightToLeft) {
+      readingDirection = DWRITE_READING_DIRECTION_RIGHT_TO_LEFT;
+      isRTL = true;
+    } else if (*outerFragment.textAttributes.baseWritingDirection == facebook::react::WritingDirection::LeftToRight) {
+      readingDirection = DWRITE_READING_DIRECTION_LEFT_TO_RIGHT;
+      isRTL = false;
+    } else if (*outerFragment.textAttributes.baseWritingDirection == facebook::react::WritingDirection::Natural) {
+      // Natural uses the layout direction from textAttributes
+      isRTL = (outerFragment.textAttributes.layoutDirection == facebook::react::LayoutDirection::RightToLeft);
+      readingDirection = isRTL ? DWRITE_READING_DIRECTION_RIGHT_TO_LEFT : DWRITE_READING_DIRECTION_LEFT_TO_RIGHT;
+    }
+    winrt::check_hresult(spTextFormat->SetReadingDirection(readingDirection));
+  }
+
   // Set text alignment
   DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
   if (outerFragment.textAttributes.alignment) {
@@ -152,9 +171,9 @@ void WindowsTextLayoutManager::GetTextLayout(
       case facebook::react::TextAlignment::Right:
         alignment = DWRITE_TEXT_ALIGNMENT_TRAILING;
         break;
-      // TODO use LTR values
       case facebook::react::TextAlignment::Natural:
-        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+        // Natural alignment respects reading direction if baseWritingDirection was set
+        alignment = isRTL ? DWRITE_TEXT_ALIGNMENT_TRAILING : DWRITE_TEXT_ALIGNMENT_LEADING;
         break;
       default:
         assert(false);

package/Microsoft.ReactNative/ReactHost/ReactHost.cpp

@@ -310,10 +310,6 @@ class ReactNativeWindowsFeatureFlags : public facebook::react::ReactNativeFeatur
   bool fuseboxEnabledRelease() override {
     return true; // Enable Fusebox (modern CDP backend) by default for React Native Windows
   }
-
-  bool fuseboxNetworkInspectionEnabled() override {
-    return true; // Enable network inspection support in Fusebox
-  }
 };
 
 //=============================================================================================
@@ -326,10 +322,32 @@ class ReactInspectorHostTargetDelegate : public jsinspector_modern::HostTargetDe
   ReactInspectorHostTargetDelegate(Mso::WeakPtr<ReactHost> &&reactHost) noexcept : m_reactHost(std::move(reactHost)) {}
 
   jsinspector_modern::HostTargetMetadata getMetadata() override {
-    // TODO: (vmoroz) provide more info
-    return {
-        .integrationName = "React Native Windows (Host)",
-    };
+    jsinspector_modern::HostTargetMetadata metadata{};
+    metadata.integrationName = "React Native Windows (Host)";
+    metadata.platform = "windows";
+
+    if (Mso::CntPtr<ReactHost> reactHost = m_reactHost.GetStrongPtr()) {
+      const ReactOptions &options = reactHost->Options();
+      if (!options.Identity.empty()) {
+        std::string identity = options.Identity;
+        // Replace illegal characters with underscore
+        for (char &c : identity) {
+          if (c == '\\' || c == '/' || c == ':' || c == '*' || c == '?' || c == '"' || c == '<' || c == '>' ||
+              c == '|') {
+            c = '_';
+          }
+        }
+        metadata.appDisplayName = identity;
+      }
+    }
+
+    wchar_t computerName[MAX_COMPUTERNAME_LENGTH + 1];
+    DWORD size = MAX_COMPUTERNAME_LENGTH + 1;
+    if (GetComputerNameW(computerName, &size)) {
+      metadata.deviceName = winrt::to_string(computerName);
+    }
+
+    return metadata;
   }
 
   void onReload(jsinspector_modern::HostTargetDelegate::PageReloadRequest const &request) override {
@@ -630,9 +648,20 @@ void ReactHost::AddInspectorPage() noexcept {
   jsinspector_modern::InspectorTargetCapabilities capabilities;
   capabilities.nativePageReloads = true;
   capabilities.prefersFuseboxFrontend = true;
-  // TODO: (vmoroz) improve the page name
+
+  auto metadata = m_inspectorHostTargetDelegate->getMetadata();
+  std::string pageName;
+  if (metadata.appDisplayName.has_value() && !metadata.appDisplayName.value().empty()) {
+    pageName = metadata.appDisplayName.value();
+  } else {
+    pageName = "React Native Windows (Experimental)";
+  }
+  if (metadata.deviceName.has_value() && !metadata.deviceName.value().empty()) {
+    pageName += " (" + metadata.deviceName.value() + ")";
+  }
+
   inspectorPageId = jsinspector_modern::getInspectorInstance().addPage(
-      "React Native Windows (Experimental)",
+      pageName,
       "Hermes",
       [weakInspectorHostTarget =
            std::weak_ptr(m_inspectorHostTarget)](std::unique_ptr<jsinspector_modern::IRemoteConnection> remote)

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,11 +10,11 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.81.0-preview.1</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.81.0-preview.6</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>81</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>
     <ReactNativeWindowsCanary>false</ReactNativeWindowsCanary>
-    <ReactNativeWindowsCommitId>c90943314678ce91d624ceba523e50f8d35a5ea5</ReactNativeWindowsCommitId>
+    <ReactNativeWindowsCommitId>15b72b3f2121e6f7d3d8aabff5e7f1f26e989829</ReactNativeWindowsCommitId>
   </PropertyGroup>
 </Project>

package/PropertySheets/React.Cpp.props

@@ -146,6 +146,7 @@
       <AdditionalIncludeDirectories>
         $(FollyDir);
         $(FmtDir)include;
+        $(FastFloatDir)include;
         $(ReactNativeDir)\ReactCommon;
         $(ReactNativeDir)\ReactCommon\callinvoker;
         $(ReactNativeDir)\ReactCommon\jsi;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.81.0-preview.1",
+  "version": "0.81.0-preview.6",
   "license": "MIT",
   "repository": {
     "type": "git",

package/template/metro.config.js

@@ -2,8 +2,6 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 
 const fs = require('fs');
 const path = require('path');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-
 const rnwPath = fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
@@ -25,7 +23,7 @@ const config = {
   watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages],
   // devMode]{{/devMode}}
   resolver: {
-    blockList: exclusionList([
+    blockList: [
       // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
@@ -34,7 +32,7 @@ const config = {
       new RegExp(`${rnwPath}/build/.*`),
       new RegExp(`${rnwPath}/target/.*`),
       /.*\.ProjectImports\.zip/,
-    ]),
+    ],
     //{{#devMode}} [devMode
     extraNodeModules: {
       'react-native-windows': rnwPath,

package/templates/cpp-app/metro.config.js

@@ -2,8 +2,6 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 
 const fs = require('fs');
 const path = require('path');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-
 const rnwPath = fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
@@ -25,7 +23,7 @@ const config = {
   watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages],
   // devMode]{{/devMode}}
   resolver: {
-    blockList: exclusionList([
+    blockList: [
       // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
@@ -34,7 +32,7 @@ const config = {
       new RegExp(`${rnwPath}/build/.*`),
       new RegExp(`${rnwPath}/target/.*`),
       /.*\.ProjectImports\.zip/,
-    ]),
+    ],
     //{{#devMode}} [devMode
     extraNodeModules: {
       'react-native-windows': rnwPath,

package/templates/cpp-lib/example/metro.config.js

@@ -2,7 +2,6 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const fs = require('fs');
 const path = require('path');
 const escape = require('escape-string-regexp');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
 const pack = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
@@ -33,7 +32,7 @@ const config = {
   // We need to make sure that only one version is loaded for peerDependencies
   // So we block them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blockList: exclusionList(
+    blockList: 
       modules.map(
         (m) =>
           new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
@@ -47,7 +46,7 @@ const config = {
         new RegExp(`${rnwPath}/target/.*`),
         /.*\.ProjectImports\.zip/,
       ])
-    ),
+    ,
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);

package/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/css/CSSTokenizer.h

@@ -1,232 +0,0 @@
-/*
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-#pragma once
-
-#include <cmath>
-#include <string_view>
-
-#include <folly/../../fast_float-6.1.4/include/fast_float/fast_float.h> // [Windows] - Full relative path needed to find file
-#include <react/renderer/css/CSSToken.h>
-
-namespace facebook::react {
-
-/**
- * A minimal tokenizer for a subset of CSS syntax.
- *
- * This is based on the W3C CSS Syntax specification, with simplifications made
- * for syntax which React Native does not attempt to support.
- * https://www.w3.org/TR/css-syntax-3/#tokenizing-and-parsing
- */
-class CSSTokenizer {
- public:
-  explicit constexpr CSSTokenizer(std::string_view characters)
-      : remainingCharacters_{characters} {}
-
-  /**
-   * Returns the next token according to the algorithm described in
-   * https://www.w3.org/TR/css-syntax-3/#consume-token
-   */
-  constexpr CSSToken next() {
-    char nextChar = peek();
-
-    if (isWhitespace(nextChar)) {
-      return consumeWhitespace();
-    }
-
-    switch (nextChar) {
-      case '(':
-        return consumeCharacter(CSSTokenType::OpenParen);
-      case ')':
-        return consumeCharacter(CSSTokenType::CloseParen);
-      case '[':
-        return consumeCharacter(CSSTokenType::OpenSquare);
-      case ']':
-        return consumeCharacter(CSSTokenType::CloseSquare);
-      case '{':
-        return consumeCharacter(CSSTokenType::OpenCurly);
-      case '}':
-        return consumeCharacter(CSSTokenType::CloseCurly);
-      case ',':
-        return consumeCharacter(CSSTokenType::Comma);
-      case '+':
-      case '-':
-      case '.':
-        if (wouldStartNumber()) {
-          return consumeNumeric();
-        } else {
-          return consumeDelim();
-        }
-      case '#':
-        if (isIdent(peek(1))) {
-          return consumeHash();
-        } else {
-          return consumeDelim();
-        }
-    }
-
-    if (isDigit(nextChar)) {
-      return consumeNumeric();
-    }
-
-    if (isIdentStart(nextChar)) {
-      return consumeIdentlikeToken();
-    }
-
-    if (nextChar == '\0') {
-      return CSSToken{CSSTokenType::EndOfFile};
-    }
-
-    return consumeDelim();
-  }
-
- private:
-  constexpr char peek(size_t i = 0) const {
-    auto index = position_ + i;
-    return index >= remainingCharacters_.size() ? '\0'
-                                                : remainingCharacters_[index];
-  }
-
-  constexpr void advance() {
-    position_ += 1;
-  }
-
-  constexpr CSSToken consumeDelim() {
-    advance();
-    return {CSSTokenType::Delim, consumeRunningValue()};
-  }
-
-  constexpr CSSToken consumeCharacter(CSSTokenType tokenType) {
-    advance();
-    consumeRunningValue();
-    return CSSToken{tokenType};
-  }
-
-  constexpr CSSToken consumeWhitespace() {
-    while (isWhitespace(peek())) {
-      advance();
-    }
-
-    consumeRunningValue();
-    return CSSToken{CSSTokenType::WhiteSpace};
-  }
-
-  constexpr bool wouldStartNumber() const {
-    // https://www.w3.org/TR/css-syntax-3/#starts-with-a-number
-    if (peek() == '+' || peek() == '-') {
-      if (isDigit(peek(1))) {
-        return true;
-      }
-      if (peek(1) == '.' && isDigit(peek(2))) {
-        return true;
-      }
-    } else if (peek() == '.' && isDigit(peek(1))) {
-      return true;
-    } else if (isDigit(peek())) {
-      return true;
-    }
-
-    return false;
-  }
-
-  constexpr CSSToken consumeNumber() {
-    // https://www.w3.org/TR/css-syntax-3/#consume-number
-    // https://www.w3.org/TR/css-syntax-3/#convert-a-string-to-a-number
-    auto* b = remainingCharacters_.data();
-    auto* e = b + remainingCharacters_.size();
-
-    float value;
-    fast_float::parse_options options{
-        fast_float::chars_format::general};
-    auto [ptr, ec] = fast_float::from_chars_advanced(b, e, value, options);
-
-    consumeRunningValue();
-    return {CSSTokenType::Number, value};
-  }
-
-  constexpr CSSToken consumeNumeric() {
-    // https://www.w3.org/TR/css-syntax-3/#consume-numeric-token
-    auto numberToken = consumeNumber();
-
-    if (isIdent(peek())) {
-      auto ident = consumeIdentSequence();
-      return {
-          CSSTokenType::Dimension,
-          numberToken.numericValue(),
-          ident.stringValue()};
-    } else if (peek() == '%') {
-      advance();
-      consumeRunningValue();
-      return {CSSTokenType::Percentage, numberToken.numericValue()};
-    } else {
-      return numberToken;
-    }
-  }
-
-  constexpr CSSToken consumeIdentlikeToken() {
-    // https://www.w3.org/TR/css-syntax-3/#consume-ident-like-token
-    auto ident = consumeIdentSequence();
-    if (peek() == '(') {
-      advance();
-      consumeRunningValue();
-      return {CSSTokenType::Function, ident.stringValue()};
-    }
-
-    return ident;
-  }
-
-  constexpr CSSToken consumeIdentSequence() {
-    // https://www.w3.org/TR/css-syntax-3/#consume-an-ident-sequence
-    while (isIdent(peek())) {
-      advance();
-    }
-
-    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());
-    position_ = 0;
-    return next;
-  }
-
-  static constexpr bool isDigit(char c) {
-    // https://www.w3.org/TR/css-syntax-3/#digit
-    return c >= '0' && c <= '9';
-  }
-
-  static constexpr bool isIdentStart(char c) {
-    // https://www.w3.org/TR/css-syntax-3/#ident-start-code-point
-    return (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || c == '_' ||
-        static_cast<unsigned char>(c) > 0x80;
-  }
-
-  static constexpr bool isIdent(char c) {
-    {
-      // https://www.w3.org/TR/css-syntax-3/#ident-code-point
-      return isIdentStart(c) || isDigit(c) || c == '-';
-    }
-  }
-
-  static constexpr bool isWhitespace(char c) {
-    // https://www.w3.org/TR/css-syntax-3/#whitespace
-    return c == ' ' || c == '\t' || c == '\r' || c == '\n';
-  }
-
-  std::string_view remainingCharacters_;
-  size_t position_{0};
-};
-} // namespace facebook::react