`@media (min-width: calc(50vw + 10px))` never matches: a math function in a condition is never resolved

Start with src/compiler/media-query.ts and the media and container evaluators named in the report; read how parseCalcFn produces descriptors and compare that with the existing bare vw handling from #426. Run the provided media-query-math.test.tsx reproducer, then check the full media and container condition coverage. Done means the reported math functions resolve correctly for media and container conditions, including negated conditions.

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

A calc(), min(), max() or clamp() in a media or container feature stands for its value (css-values-4 §10), so on a 750px-wide screen Chromium 156, Firefox 157 and WebKit 27.2 match (min-width: calc(50vw + 10px)). One over rem already compares, since the compiler inlines rem in its first pass and lightningcss folds the rest. One over a length lightningcss cannot fold, such as vw or em, reaches parseCalcFn (src/compiler/media-query.ts), which compiles it to a sum, min, max or clamp descriptor the media and container evaluators never resolve. On main a bare vw bound never compares either; #426 resolves one against the window, and the same bound inside a math function still never matches.

#494 resolves a bare em bound and lists the same gap for an em inside calc(); #426 lists this among its known limits.

Library version

main at 2421ea7 (0.0.0-nightly.2421ea7)

Environment info

System:
  OS: Windows 11 10.0.26300
  CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          "
  Memory: 155.26 GB / 255.67 GB
Binaries:
  Node:
    version: 26.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 4.9.2
    path: C:\Users\<user>\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 12.2.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "33"
      - "35"
      - "35"
      - "35"
      - "36"
      - "37"
    Build Tools:
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-26 | Google APIs Intel x86_64 Atom
      - android-28 | Google APIs Intel x86_64 Atom
      - android-29 | Google APIs Intel x86_64 Atom
      - android-30 | Google APIs Intel x86_64 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-32 | Google APIs Intel x86_64 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
      - android-36.1 | Google Play Intel x86_64 Atom
      - android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
      - android-37.0 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-262.9437.185.2621.16467767
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.20.1
    path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.86.3
    wanted: 0.86.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Clone the reproducer branch, which is main at 2421ea7 with one file added, src/__tests__/native/media-query-math.test.tsx, and install:

   git clone --branch repro/517-media-query-math-functions https://github.com/YevheniiKotyrlo/react-native-css
   cd react-native-css
   yarn install
   

2. Run yarn jest src/__tests__/native/media-query-math.test.tsx.

src/__tests__/native/media-query-math.test.tsx:

// A math function in a media or container feature is its value (css-values-4 §10); a vw is one lightningcss cannot fold, and #426 resolves a bare vw in a condition against the 750x1334 jest window
import { fireEvent, render, screen } from "@testing-library/react-native";
import { View } from "react-native-css/components/View";
import { registerCSS } from "react-native-css/jest";

test.each([
  ["(min-width: 50vw)", true],
  ["(min-width: calc(50vw + 10px))", true],
  ["(min-width: calc(100vw + 10px))", false],
  ["not (min-width: calc(100vw + 10px))", true],
  ["(min-width: min(50vw, 400px))", true],
  ["(width > clamp(100px, 50vw, 800px))", true],
])("@media %s on the 750px jest window matches: %s", (condition, expected) => {
  registerCSS(`
    .child { width: 10px; }
    @media ${condition} { .child { width: 37px; } }
  `);
  render(<View testID="child" className="child" />);
  expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
});

test.each([
  ["(width > calc(50vw - 100px))", true],
  ["not (width > calc(50vw - 100px))", false],
])("@container %s in a 400px container matches: %s", (condition, expected) => {
  registerCSS(`
    .parent { container-type: size; }
    .child { width: 10px; }
    @container ${condition} { .child { width: 37px; } }
  `);
  render(
    <View testID="parent" className="parent">
      <View testID="child" className="child" />
    </View>,
  );
  fireEvent(screen.getByTestId("parent"), "layout", {
    nativeEvent: { layout: { x: 0, y: 0, width: 400, height: 200 } },
  });
  expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
});

Expected: (min-width: calc(50vw + 10px)) matches on a screen wide enough for it, as in a browser.

Actual: the condition never matches.

FAIL src/__tests__/native/media-query-math.test.tsx
  × @media (min-width: 50vw) on the 750px jest window matches: true (18 ms)
  × @media (min-width: calc(50vw + 10px)) on the 750px jest window matches: true (6 ms)
  √ @media (min-width: calc(100vw + 10px)) on the 750px jest window matches: false (1 ms)
  × @media not (min-width: calc(100vw + 10px)) on the 750px jest window matches: true (2 ms)
  × @media (min-width: min(50vw, 400px)) on the 750px jest window matches: true (1 ms)
  × @media (width > clamp(100px, 50vw, 800px)) on the 750px jest window matches: true (1 ms)
  × @container (width > calc(50vw - 100px)) in a 400px container matches: true (6 ms)
  × @container not (width > calc(50vw - 100px)) in a 400px container matches: false (1 ms)
  ● @media (min-width: 50vw) on the 750px jest window matches: true
    expect(received).toBe(expected) // Object.is equality
    Expected: true
    Received: false
      17 |   `);
      18 |   render(<View testID="child" className="child" />);
    > 19 |   expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
         |                                                                ^
      20 | });
      21 |
      22 | test.each([
      at toBe (src/__tests__/native/media-query-math.test.tsx:19:64)
  ● @media (min-width: calc(50vw + 10px)) on the 750px jest window matches: true
    expect(received).toBe(expected) // Object.is equality
    Expected: true
    Received: false
      17 |   `);
      18 |   render(<View testID="child" className="child" />);
    > 19 |   expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
         |                                                                ^
      20 | });
      21 |
      22 | test.each([
      at toBe (src/__tests__/native/media-query-math.test.tsx:19:64)
  ● @media not (min-width: calc(100vw + 10px)) on the 750px jest window matches: true
    expect(received).toBe(expected) // Object.is equality
    Expected: true
    Received: false
      17 |   `);
      18 |   render(<View testID="child" className="child" />);
    > 19 |   expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
         |                                                                ^
      20 | });
      21 |
      22 | test.each([
      at toBe (src/__tests__/native/media-query-math.test.tsx:19:64)
  ● @media (min-width: min(50vw, 400px)) on the 750px jest window matches: true
    expect(received).toBe(expected) // Object.is equality
    Expected: true
    Received: false
      17 |   `);
      18 |   render(<View testID="child" className="child" />);
    > 19 |   expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
         |                                                                ^
      20 | });
      21 |
      22 | test.each([
      at toBe (src/__tests__/native/media-query-math.test.tsx:19:64)
  ● @media (width > clamp(100px, 50vw, 800px)) on the 750px jest window matches: true
    expect(received).toBe(expected) // Object.is equality
    Expected: true
    Received: false
      17 |   `);
      18 |   render(<View testID="child" className="child" />);
    > 19 |   expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
         |                                                                ^
      20 | });
      21 |
      22 | test.each([
      at toBe (src/__tests__/native/media-query-math.test.tsx:19:64)
  ● @container (width > calc(50vw - 100px)) in a 400px container matches: true
    expect(received).toBe(expected) // Object.is equality
    Expected: true
    Received: false
      37 |     nativeEvent: { layout: { x: 0, y: 0, width: 400, height: 200 } },
      38 |   });
    > 39 |   expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
         |                                                                ^
      40 | });
      41 |
      at toBe (src/__tests__/native/media-query-math.test.tsx:39:64)
  ● @container not (width > calc(50vw - 100px)) in a 400px container matches: false
    expect(received).toBe(expected) // Object.is equality
    Expected: false
    Received: true
      37 |     nativeEvent: { layout: { x: 0, y: 0, width: 400, height: 200 } },
      38 |   });
    > 39 |   expect(screen.getByTestId("child").props.style.width === 37).toBe(expected);
         |                                                                ^
      40 | });
      41 |
      at toBe (src/__tests__/native/media-query-math.test.tsx:39:64)
Test Suites: 1 failed, 1 total
Tests:       7 failed, 1 passed, 8 total
Snapshots:   0 total
Time:        1.062 s, estimated 2 s
Ran all test suites matching /src\\__tests__\\native\\media-query-math.test.tsx/i.

Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/517-media-query-math-functions