poc

Author: intergalacticspacehighway

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -281,6 +281,10 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   resizeMode: true,
   tintColor: colorAttribute,
   objectFit: true,
+  /**
+   * Media Queries
+   */
+  __mediaQueries: true,
 };
 
 export default ReactNativeStyleAttributes;

packages/react-native/Libraries/StyleSheet/StyleSheetExports.js

@@ -16,6 +16,71 @@ import composeStyles from '../../src/private/styles/composeStyles';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
 import flatten from './flattenStyle';
 
+const MEDIA_PREFIX = '@media ';
+
+function _processStyleValue(key: string, value: mixed): mixed {
+  const config = ReactNativeStyleAttributes[key];
+  if (
+    config != null &&
+    typeof config === 'object' &&
+    typeof config.process === 'function'
+  ) {
+    return config.process(value);
+  }
+  return value;
+}
+
+/**
+ * Extract @media keys from a style object and convert them into a
+ * __mediaQueries array.
+ */
+function _processMediaQueries(style: {[string]: mixed}): {[string]: mixed} {
+  let hasMedia = false;
+  for (const key in style) {
+    if (typeof key === 'string' && key.startsWith(MEDIA_PREFIX)) {
+      hasMedia = true;
+      break;
+    }
+  }
+  if (!hasMedia) {
+    return style;
+  }
+
+  const result: {[string]: mixed} = {};
+  const queries: Array<{query: string, styles: {[string]: mixed}}> = [];
+  const baseStyles: {[string]: mixed} = {};
+
+  for (const key in style) {
+    if (typeof key === 'string' && key.startsWith(MEDIA_PREFIX)) {
+      const rawStyles = style[key];
+      const processed: {[string]: mixed} = {};
+      if (rawStyles != null && typeof rawStyles === 'object') {
+        for (const styleKey in rawStyles) {
+          processed[styleKey] = _processStyleValue(
+            styleKey,
+            rawStyles[styleKey],
+          );
+          // Capture base value for each MQ-touched key.
+          if (!(styleKey in baseStyles)) {
+            baseStyles[styleKey] = _processStyleValue(
+              styleKey,
+              style[styleKey],
+            );
+          }
+        }
+      }
+      queries.push({
+        query: key.slice(MEDIA_PREFIX.length),
+        styles: processed,
+      });
+    } else {
+      result[key] = style[key];
+    }
+  }
+  result.__mediaQueries = {baseStyles, queries};
+  return result;
+}
+
 let _hairlineWidth: ?number;
 
 const absoluteFill = {
@@ -183,9 +248,10 @@ export default {
     // TODO: This should return S as the return type. But first,
     // we need to codemod all the callsites that are typing this
     // return value as a number (even though it was opaque).
-    if (__DEV__) {
-      for (const key in obj) {
-        if (obj[key]) {
+    for (const key in obj) {
+      if (obj[key]) {
+        obj[key] = _processMediaQueries(obj[key]);
+        if (__DEV__) {
           Object.freeze(obj[key]);
         }
       }

packages/react-native/Libraries/StyleSheet/flattenStyle.js

@@ -16,6 +16,8 @@ import type {
   ____FlattenStyleProp_Internal,
 } from './StyleSheetTypes';
 
+import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
+
 type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
   ? empty
   : TStyleProp;
@@ -49,6 +51,23 @@ function flattenStyle<
       }
     }
   }
+
+  const mq: $FlowFixMe = result.__mediaQueries;
+  if (mq != null && typeof mq === 'object' && mq.baseStyles != null) {
+    const updatedBase: {[string]: $FlowFixMe} = {};
+    for (const key in mq.baseStyles) {
+      const val = result[key];
+      const config = ReactNativeStyleAttributes[key];
+      updatedBase[key] =
+        config != null &&
+        typeof config === 'object' &&
+        typeof config.process === 'function'
+          ? config.process(val)
+          : val;
+    }
+    result.__mediaQueries = {...mq, baseStyles: updatedBase};
+  }
+
   // $FlowFixMe[incompatible-type]
   return result;
 }

packages/react-native/ReactCommon/react/renderer/core/MediaQuery.h

@@ -0,0 +1,59 @@
+/*
+ * 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 <vector>
+
+#include <react/renderer/core/MediaQueryEnvironment.h>
+
+namespace facebook::react {
+
+enum class MediaFeature : uint8_t {
+  MinWidth,
+  MaxWidth,
+  MinHeight,
+  MaxHeight,
+  PrefersColorScheme,
+};
+
+struct MediaCondition {
+  MediaFeature feature{};
+  Float dimensionValue{0};
+  ColorScheme colorSchemeValue{ColorScheme::Light};
+
+  bool evaluate(const MediaQueryEnvironment& env) const {
+    switch (feature) {
+      case MediaFeature::MinWidth:
+        return env.viewportWidth >= dimensionValue;
+      case MediaFeature::MaxWidth:
+        return env.viewportWidth <= dimensionValue;
+      case MediaFeature::MinHeight:
+        return env.viewportHeight >= dimensionValue;
+      case MediaFeature::MaxHeight:
+        return env.viewportHeight <= dimensionValue;
+      case MediaFeature::PrefersColorScheme:
+        return env.colorScheme == colorSchemeValue;
+    }
+    return false;
+  }
+};
+
+struct MediaQuery {
+  std::vector<MediaCondition> conditions;
+
+  bool evaluate(const MediaQueryEnvironment& env) const {
+    for (const auto& condition : conditions) {
+      if (!condition.evaluate(env)) {
+        return false;
+      }
+    }
+    return true;
+  }
+};
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/core/MediaQueryEnvironment.h

@@ -0,0 +1,32 @@
+/*
+ * 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 <react/renderer/graphics/Float.h>
+
+namespace facebook::react {
+
+enum class ColorScheme : uint8_t {
+  Light = 0,
+  Dark = 1,
+};
+
+/**
+ * Captures the current environment state used to evaluate CSS media queries.
+ * Viewport dimensions are in React Native points (logical pixels).
+ */
+struct MediaQueryEnvironment {
+  Float viewportWidth{0};
+  Float viewportHeight{0};
+  ColorScheme colorScheme{ColorScheme::Light};
+
+  bool operator==(const MediaQueryEnvironment& other) const = default;
+  bool operator!=(const MediaQueryEnvironment& other) const = default;
+};
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/core/Props.cpp

@@ -8,13 +8,62 @@
 #include "Props.h"
 
 #include <react/renderer/core/propsConversions.h>
+#include <react/renderer/css/CSSMediaQuery.h>
 
 #include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/debug/debugStringConvertibleUtils.h>
 #include "DynamicPropsUtilities.h"
 
 namespace facebook::react {
 
+namespace {
+
+std::optional<MediaQueryData> parseMediaQueryData(
+    const folly::dynamic& dynamic) {
+  if (!dynamic.isObject()) {
+    return std::nullopt;
+  }
+
+  auto queriesIt = dynamic.find("queries");
+  auto baseIt = dynamic.find("baseStyles");
+  if (queriesIt == dynamic.items().end() ||
+      !queriesIt->second.isArray()) {
+    return std::nullopt;
+  }
+
+  MediaQueryData data;
+  if (baseIt != dynamic.items().end() && baseIt->second.isObject()) {
+    data.baseStyles = baseIt->second;
+  }
+
+  for (const auto& entry : queriesIt->second) {
+    if (!entry.isObject()) {
+      continue;
+    }
+    auto queryIt = entry.find("query");
+    auto stylesIt = entry.find("styles");
+    if (queryIt == entry.items().end() ||
+        stylesIt == entry.items().end() ||
+        !queryIt->second.isString() ||
+        !stylesIt->second.isObject()) {
+      continue;
+    }
+    auto parsed = parseMediaQuery(queryIt->second.getString());
+    if (parsed.has_value()) {
+      data.queries.push_back(
+          MediaQueryData::Query{std::move(parsed.value()), stylesIt->second});
+    }
+  }
+
+  if (data.queries.empty()) {
+    return std::nullopt;
+  }
+
+  return data;
+}
+
+} // namespace
+
 Props::Props(
     const PropsParserContext& context,
     const Props& sourceProps,
@@ -29,13 +78,16 @@ void Props::initialize(
     const RawProps& rawProps,
     [[maybe_unused]] const std::function<bool(const std::string&)>&
         filterObjectKeys) {
+  // Inherit from source so it survives cloneProps calls that don't
+  // include __mediaQueries in rawProps.
+  mediaQueryData_ = sourceProps.mediaQueryData_;
+
   nativeId = ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
       ? sourceProps.nativeId
       : convertRawProp(context, rawProps, "nativeID", sourceProps.nativeId, {});
 
   if (!ReactNativeFeatureFlags::enableCppPropsIteratorSetter()) {
     if (ReactNativeFeatureFlags::enableNativeViewPropTransformations()) {
-      // id -> nativeId
       auto* idValue = rawProps.at("id", nullptr, nullptr);
       if (idValue != nullptr) {
         if (idValue->hasValue()) {
@@ -45,6 +97,16 @@ void Props::initialize(
         }
       }
     }
+
+    auto* mqValue = rawProps.at("__mediaQueries", nullptr, nullptr);
+    if (mqValue != nullptr) {
+      if (mqValue->hasValue()) {
+        mediaQueryData_ = parseMediaQueryData((folly::dynamic)(*mqValue));
+      } else {
+        // Explicitly removed (sent as null from JS diff).
+        mediaQueryData_.reset();
+      }
+    }
   }
 #ifdef RN_SERIALIZABLE_STATE
   if (!ReactNativeFeatureFlags::enableExclusivePropsUpdateAndroid()) {
@@ -68,6 +130,14 @@ void Props::setProp(
       }
       fromRawValue(context, value, nativeId, {});
       return;
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("__mediaQueries"): {
+      if (!value.hasValue()) {
+        mediaQueryData_.reset();
+        return;
+      }
+      mediaQueryData_ = parseMediaQueryData((folly::dynamic)value);
+      return;
+    }
   }
 }
 

packages/react-native/ReactCommon/react/renderer/core/Props.h

@@ -7,20 +7,34 @@
 
 #pragma once
 
+#include <folly/dynamic.h>
 #include <react/renderer/core/PropsMacros.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/RawProps.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include <react/renderer/core/Sealable.h>
+#include <react/renderer/core/MediaQuery.h>
 #include <react/renderer/debug/DebugStringConvertible.h>
 
 #ifdef ANDROID
-#include <folly/dynamic.h>
 #include <react/renderer/mapbuffer/MapBufferBuilder.h>
 #endif
 
 namespace facebook::react {
 
+/**
+ * Parsed media query data for a node: ordered list of queries
+ * with their override styles.
+ */
+struct MediaQueryData {
+  struct Query {
+    MediaQuery condition;
+    folly::dynamic styles;
+  };
+  folly::dynamic baseStyles;             // base values for MQ-touched keys
+  std::vector<Query> queries;            // ordered, later wins
+};
+
 /*
  * Represents the most generic props object.
  */
@@ -59,6 +73,12 @@ class Props : public virtual Sealable, public virtual DebugStringConvertible {
 
   std::string nativeId;
 
+  std::optional<MediaQueryData> mediaQueryData_;
+
+  bool hasMediaQueries() const {
+    return mediaQueryData_.has_value();
+  }
+
 #ifdef RN_SERIALIZABLE_STATE
   folly::dynamic rawProps = folly::dynamic::object();