fix: evaluate range pairs, and answer a condition the runtime cannot decide with unknown

src/__tests__/compiler/condition-semantics.test.ts

@@ -0,0 +1,106 @@
+import { compile, type StyleRule } from "react-native-css/compiler";
+
+function compileChildConditions(css: string): Pick<StyleRule, "m" | "cq">[] {
+  return (compile(css).stylesheet().s ?? []).flatMap(([className, rules]) =>
+    className === "child" ? rules.map(({ m, cq }) => ({ m, cq })) : [],
+  );
+}
+
+// CSS Conditional 5 §5.4: an unknown size feature or an unresolvable value selects no container
+test.each([
+  "@container (fictional-feature > 10px)",
+  "@container (fictional-feature > 10px) or (width > 400px)",
+  "@container not (fictional-feature > 10px)",
+  "@container (width > env(safe-area-inset-top))",
+  "@container (width > env(safe-area-inset-top)) or (width > 400px)",
+])("%s emits no block", (prelude) => {
+  expect(
+    compileChildConditions(`${prelude} { .child { color: red } }`),
+  ).toStrictEqual([]);
+});
+
+// An unknown keeps an `and` or a `not` unknown (MQ5 §3.2), so a condition no device can make true compiles to no rule
+test.each([
+  "@container style(--foo: bar)",
+  "@container not style(--foo: bar)",
+  "@container style(--foo: bar) and (width > 400px)",
+  "@media (width > env(safe-area-inset-top))",
+  "@media not (width: env(safe-area-inset-top))",
+  "@media (orientation: bogus)",
+  "@media not (orientation: bogus)",
+  "@media not ((width > 100px) or (orientation: bogus))",
+  "@media not (env(safe-area-inset-top) < width < env(safe-area-inset-bottom))",
+])("%s, which no device can make true, emits no block", (prelude) => {
+  expect(
+    compileChildConditions(`${prelude} { .child { color: red } }`),
+  ).toStrictEqual([]);
+});
+
+test.each<[string, Pick<StyleRule, "m" | "cq">]>([
+  [
+    "@container style(--foo: bar) or (width > 400px)",
+    { m: undefined, cq: [{ m: ["|", [["?"], [">", "width", 400]]] }] },
+  ],
+  [
+    "@media (width > env(safe-area-inset-top)) or (width > 400px)",
+    {
+      m: [
+        [
+          "|",
+          [
+            [">", "width", null],
+            [">", "width", 400],
+          ],
+        ],
+      ],
+      cq: undefined,
+    },
+  ],
+  [
+    "@container (width > 10in) or (width > 100px)",
+    {
+      m: undefined,
+      cq: [
+        {
+          m: [
+            "|",
+            [
+              [">", "width", null],
+              [">", "width", 100],
+            ],
+          ],
+        },
+      ],
+    },
+  ],
+  [
+    "@media not (400px < width < 800px)",
+    { m: [["!", ["[]", "width", 400, "<", 800, "<"]]], cq: undefined },
+  ],
+  [
+    "@media not (env(safe-area-inset-top) < width < 800px)",
+    { m: [["!", ["[]", "width", null, "<", 800, "<"]]], cq: undefined },
+  ],
+  [
+    "@container (width > 10em)",
+    { m: undefined, cq: [{ m: [">", "width", [{}, "em", 10, 1]] }] },
+  ],
+  [
+    "@media (constructor: x)",
+    { m: [["=", "constructor", "x"]], cq: undefined },
+  ],
+  ["@media (grid: 0)", { m: [["=", "grid", 0]], cq: undefined }],
+  ["@media (grid: 1)", { m: [["=", "grid", 1]], cq: undefined }],
+])("%s compiles to %j", (prelude, conditions) => {
+  expect(
+    compileChildConditions(`${prelude} { .child { color: red } }`),
+  ).toStrictEqual([conditions]);
+});
+
+test("a media query list keeps the branch a device can match beside one none can", () => {
+  expect(
+    compileChildConditions(
+      "@media (width > env(safe-area-inset-top)), (width > 400px) { .child { color: red } }",
+    ),
+  ).toStrictEqual([{ m: [[">", "width", 400]], cq: undefined }]);
+});

src/__tests__/native/compare.test.ts

@@ -0,0 +1,82 @@
+import type {
+  MediaFeatureComparison,
+  MediaFeatureOperand,
+} from "react-native-css/compiler";
+
+import {
+  compareMediaFeature,
+  isTruthyFeatureValue,
+  testMediaFeatureInterval,
+  type MeasuredFeatureValue,
+  type MediaInterval,
+} from "../../native/conditions/compare";
+import { UNKNOWN, type Truth } from "../../native/conditions/kleene";
+
+test.each([
+  [">", [false, false, true]],
+  [">=", [false, true, true]],
+  ["<", [true, false, false]],
+  ["<=", [true, true, false]],
+  ["=", [false, true, false]],
+] as const)("%s compares 39, 40 and 41 against 40", (operator, expected) => {
+  expect(
+    [39, 40, 41].map((value) => compareMediaFeature(operator, value, 40)),
+  ).toStrictEqual(expected);
+});
+
+const operands: [
+  label: string,
+  operator: MediaFeatureComparison,
+  left: MediaFeatureOperand | undefined,
+  right: MediaFeatureOperand,
+  truth: Truth,
+][] = [
+  ["an unmeasured feature", ">", undefined, 400, UNKNOWN],
+  ["an unresolved operand", ">", 400, null, UNKNOWN],
+  ["an operand only an element resolves", ">", 400, [{}, "em", 10, 1], UNKNOWN],
+  ["a keyword ordered against a number", ">", "landscape", 400, UNKNOWN],
+  ["an equal keyword", "=", "landscape", "landscape", true],
+  ["a different keyword", "=", "portrait", "landscape", false],
+];
+
+test.each(operands)("%s", (_label, operator, left, right, truth) => {
+  expect(compareMediaFeature(operator, left, right)).toBe(truth);
+});
+
+const intervals: [
+  label: string,
+  condition: MediaInterval,
+  value: MeasuredFeatureValue,
+  truth: Truth,
+][] = [
+  ["inside", ["[]", "width", 400, "<", 800, "<"], 600, true],
+  ["below", ["[]", "width", 400, "<", 800, "<"], 300, false],
+  ["above", ["[]", "width", 400, "<", 800, "<"], 900, false],
+  ["on an open bound", ["[]", "width", 400, "<", 800, "<"], 400, false],
+  ["on a closed bound", ["[]", "width", 400, "<=", 800, "<"], 400, true],
+  ["written descending", ["[]", "width", 800, ">", 400, ">"], 600, true],
+  ["unmeasured", ["[]", "width", 400, "<", 800, "<"], undefined, UNKNOWN],
+  [
+    "with an unresolved bound",
+    ["[]", "width", null, "<", 800, "<"],
+    600,
+    UNKNOWN,
+  ],
+  ["false on one bound", ["[]", "width", 700, "<", null, "<"], 600, false],
+];
+
+test.each(intervals)("an interval %s", (_label, condition, value, truth) => {
+  expect(testMediaFeatureInterval(condition, value)).toBe(truth);
+});
+
+test.each([
+  [400, true],
+  [0, false],
+  [Number.NaN, false],
+  ["hover", true],
+  ["none", false],
+  ["no-preference", false],
+  [undefined, UNKNOWN],
+] as const)("%p in a boolean context is %p", (value, truth) => {
+  expect(isTruthyFeatureValue(value)).toBe(truth);
+});