react-native-css 3.0.0-nightly.61014be → 3.0.0-nightly.df0f885

package/src/compiler/inheritance.test.ts

@@ -6,7 +6,7 @@ test("nested classes", () => {
   color: red;
 }`);
 
-  expect(compiled).toStrictEqual({
+  expect(compiled.stylesheet()).toStrictEqual({
     s: [
       [
         "my-class",
@@ -38,7 +38,7 @@ test("multiple tiers classes", () => {
   color: red;
 }`);
 
-  expect(compiled).toStrictEqual({
+  expect(compiled.stylesheet()).toStrictEqual({
     s: [
       [
         "one",
@@ -79,7 +79,7 @@ test("tiers with multiple classes", () => {
   color: red;
 }`);
 
-  expect(compiled).toStrictEqual({
+  expect(compiled.stylesheet()).toStrictEqual({
     s: [
       [
         "one",

package/src/compiler/stylesheet.ts

@@ -17,6 +17,7 @@ import type {
   StyleRuleMapping,
   StyleRuleSet,
   VariableRecord,
+  VariableValue,
 } from "./compiler.types";
 import { toRNProperty, type NormalizeSelector } from "./selectors";
 
@@ -56,7 +57,17 @@ export class StylesheetBuilder {
       animations?: AnimationRecord;
       rem: number;
       ruleOrder: number;
-    } = { ruleSets: {}, rem: 14, ruleOrder: 0 },
+      warningProperties: string[];
+      warningValues: [string, unknown][];
+      warningFunctions: string[];
+    } = {
+      ruleSets: {},
+      rem: 14,
+      ruleOrder: 0,
+      warningProperties: [],
+      warningValues: [],
+      warningFunctions: [],
+    },
     private selectors?: NormalizeSelector[],
   ) {}
 
@@ -76,7 +87,7 @@ export class StylesheetBuilder {
     );
   }
 
-  cloneRule({ ...rule } = this.rule): StyleRule {
+  cloneRule({ ...rule } = this.ruleTemplate): StyleRule {
     rule.s = [...rule.s];
     rule.aq &&= [...rule.aq];
     rule.c &&= [...rule.c];
@@ -128,11 +139,17 @@ export class StylesheetBuilder {
     }
 
     if (this.shared.rootVariables) {
-      stylesheetOptions.vr = Object.entries(this.shared.rootVariables);
+      stylesheetOptions.vr = Object.entries(this.shared.rootVariables).map(
+        // Reverse these so the most specific variables are first
+        ([key, value]) => [key, value.reverse()] as const,
+      );
     }
 
     if (this.shared.universalVariables) {
-      stylesheetOptions.vu = Object.entries(this.shared.universalVariables);
+      stylesheetOptions.vu = Object.entries(this.shared.universalVariables).map(
+        // Reverse these so the most specific variables are first
+        ([key, value]) => [key, value.reverse()] as const,
+      );
     }
 
     if (this.shared.animations) {
@@ -156,10 +173,29 @@ export class StylesheetBuilder {
   }
 
   addWarning(
-    _type: "property" | "value" | "function",
-    _property: string | number,
+    type: "property" | "value" | "function",
+    property: string,
+    value?: unknown,
   ): void {
-    // TODO
+    switch (type) {
+      case "property":
+        this.shared.warningProperties.push(property);
+        break;
+      case "value":
+        this.shared.warningValues.push([property, value]);
+        break;
+      case "function":
+        this.shared.warningFunctions.push(property);
+        break;
+    }
+  }
+
+  getWarnings() {
+    return {
+      properties: this.shared.warningProperties,
+      values: this.shared.warningValues,
+      functions: this.shared.warningFunctions,
+    };
   }
 
   newRule(mapping = this.mapping, { important = false } = {}) {
@@ -171,14 +207,12 @@ export class StylesheetBuilder {
     }
   }
 
-  newRuleFork({ important = false } = {}) {
-    this.rule = this.cloneRule(this.rule);
-    this.rule.s[Specificity.Order] = this.shared.ruleOrder;
-    if (important) {
-      this.rule.s[Specificity.Important] = 1;
-    }
+  /** Used by nested declarations (for example @media inside a RuleSet) */
+  newNestedRule({ important = false } = {}) {
+    this.newRule(this.mapping, { important });
   }
 
+  /** Hack for light-dark, which requires adding a new rule without changing the current rule */
   addExtraRule(rule: Partial<StyleRule>) {
     let extraRuleArray = extraRules.get(this.rule);
     if (!extraRuleArray) {
@@ -197,8 +231,8 @@ export class StylesheetBuilder {
   }
 
   addMediaQuery(condition: MediaCondition) {
-    this.rule.m ??= [];
-    this.rule.m.push(condition);
+    this.ruleTemplate.m ??= [];
+    this.ruleTemplate.m.push(condition);
   }
 
   addContainer(value: string[] | false) {
@@ -355,7 +389,8 @@ export class StylesheetBuilder {
     }
 
     for (const selector of selectorList) {
-      const rule = this.cloneRule();
+      // We are going to be apply the current rule to n selectors, so we clone the rule
+      const rule = this.cloneRule(this.rule);
 
       if (selector.type === "className") {
         const {
@@ -431,16 +466,28 @@ export class StylesheetBuilder {
 
         for (const [name, value] of this.rule.v) {
           this.shared[type] ??= {};
-          this.shared[type][name] ??= [undefined];
-          this.shared[type][name][subtype === "light" ? 0 : 1] = value;
+          this.shared[type][name] ??= [];
+
+          const variableValue: VariableValue =
+            subtype === "light"
+              ? [value]
+              : [value, [["=", "prefers-color-scheme", "dark"]]];
+
+          // Append extra media queries if they exist
+          if (this.rule.m) {
+            variableValue[1] ??= [];
+            variableValue[1].push(...this.rule.m);
+          }
+
+          this.shared[type][name].push(variableValue);
         }
       }
     }
   }
 
   addContainerQuery(query: ContainerQuery) {
-    this.rule.cq ??= [];
-    this.rule.cq.push(query);
+    this.ruleTemplate.cq ??= [];
+    this.ruleTemplate.cq.push(query);
   }
 
   newAnimationFrames(name: string) {

package/src/jest/index.ts

@@ -1,5 +1,7 @@
 import { Appearance, Dimensions } from "react-native";
 
+import { inspect } from "node:util";
+
 import { compile, type CompilerOptions } from "../compiler";
 import { StyleCollection } from "../runtime/native/injection";
 import { colorScheme, dimensions, rem } from "../runtime/native/reactivity";
@@ -23,19 +25,41 @@ beforeEach(() => {
   colorScheme.set(null);
 });
 
+const debugDefault = Boolean(
+  process.env.REACT_NATIVE_CSS_TEST_DEBUG &&
+    process.env.NODE_OPTIONS?.includes("--inspect"),
+);
+
 export function registerCSS(
   css: string,
   {
-    debugCompiled = process.env.NODE_OPTIONS?.includes("--inspect"),
+    debug = debugDefault,
     ...options
-  }: CompilerOptions & { debugCompiled?: boolean } = {},
+  }: CompilerOptions & { debug?: boolean } = {},
 ) {
-  const compiled = compile(css, options);
-  if (debugCompiled) {
-    console.log(`Compiled styles:\n\n${JSON.stringify({ compiled }, null, 2)}`);
+  const logger = debug
+    ? (text: string) => {
+        // Just log the rules
+        if (text.startsWith("[")) {
+          console.log(`Rules:\n---\n${text}`);
+        }
+      }
+    : undefined;
+
+  const compiled = compile(css, { ...options, logger });
+  if (debug) {
+    console.log(
+      `Compiled:\n---\n${inspect(
+        {
+          stylesheet: compiled.stylesheet(),
+          warnings: compiled.warnings(),
+        },
+        { depth: null, colors: true, compact: false },
+      )}`,
+    );
   }
 
-  StyleCollection.inject(compiled);
+  StyleCollection.inject(compiled.stylesheet());
 
   return compiled;
 }

package/src/poison.pill.ts

@@ -1,4 +1,7 @@
-throw new Error(`react-native-css has encountered a setup error. 
+const canWarn = process.env.NODE_ENV !== "test";
+
+if (canWarn) {
+  throw new Error(`react-native-css has encountered a setup error. 
 
 ┌─────-─┐
 | Metro | 
@@ -28,5 +31,6 @@ If you are using NativeWind with the 'withNativeWind' function, follow the Metro
 
 If you are using another bundler (Vite, Webpack, etc), or non-Metro framework (Next.js, Remix, etc), please ensure you have included 'react-native-css/babel' as a babel preset.
 `);
+}
 
 export {};

package/src/runtime/native/conditions/container-query.ts

@@ -14,7 +14,7 @@ import {
   focusFamily,
   hoverFamily,
   type ContainerContextValue,
-  type Effect,
+  type Getter,
 } from "../reactivity";
 import type { RenderGuard } from "./guards";
 
@@ -24,10 +24,10 @@ export function testContainerQueries(
   queries: ContainerQuery[],
   inheritedContainers: ContainerContextValue,
   guards: RenderGuard[],
-  effect: Effect,
+  get: Getter,
 ) {
   return queries.every((query) => {
-    return testContainerQuery(query, inheritedContainers, guards, effect);
+    return testContainerQuery(query, inheritedContainers, guards, get);
   });
 }
 
@@ -35,7 +35,7 @@ export function testContainerQuery(
   query: ContainerQuery,
   inheritedContainers: ContainerContextValue,
   guards: RenderGuard[],
-  effect?: Effect,
+  get: Getter,
 ): boolean {
   const name = query.n ?? DEFAULT_CONTAINER_NAME;
   const container = inheritedContainers[name]!;
@@ -46,11 +46,11 @@ export function testContainerQuery(
     return false;
   }
 
-  if (query.m && !testContainerMediaCondition(query.m, container, effect)) {
+  if (query.m && !testContainerMediaCondition(query.m, container, get)) {
     return false;
   }
 
-  if (query.p && !testContainerPseudoCondition(query.p, container, effect)) {
+  if (query.p && !testContainerPseudoCondition(query.p, container, get)) {
     return false;
   }
 
@@ -60,15 +60,15 @@ export function testContainerQuery(
 function testContainerPseudoCondition(
   query: PseudoClassesQuery,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): boolean {
-  if (query.h && !hoverFamily(containerKey).get(effect)) {
+  if (query.h && !get(hoverFamily(containerKey))) {
     return false;
   }
-  if (query.a && !activeFamily(containerKey).get(effect)) {
+  if (query.a && !get(activeFamily(containerKey))) {
     return false;
   }
-  if (query.f && !focusFamily(containerKey).get(effect)) {
+  if (query.f && !get(focusFamily(containerKey))) {
     return false;
   }
   return true;
@@ -77,18 +77,18 @@ function testContainerPseudoCondition(
 function testContainerMediaCondition(
   condition: MediaCondition,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): boolean {
   switch (condition[0]) {
     case "!":
-      return !testContainerMediaCondition(condition[1], containerKey, effect);
+      return !testContainerMediaCondition(condition[1], containerKey, get);
     case "&":
       return condition[1].every((query) => {
-        return testContainerMediaCondition(query, containerKey, effect);
+        return testContainerMediaCondition(query, containerKey, get);
       });
     case "|":
       return condition[1].some((query) => {
-        return testContainerMediaCondition(query, containerKey, effect);
+        return testContainerMediaCondition(query, containerKey, get);
       });
     case "!!":
       return false;
@@ -99,7 +99,7 @@ function testContainerMediaCondition(
     case "<":
     case "<=":
     case "=": {
-      const left = getContainerFeatureValue(condition[1], containerKey, effect);
+      const left = getContainerFeatureValue(condition[1], containerKey, get);
       const right = condition[2];
 
       if (condition[0] === "=") {
@@ -133,21 +133,21 @@ function testContainerMediaCondition(
 function getContainerFeatureValue(
   name: MediaFeatureNameFor_ContainerSizeFeatureId,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): StyleDescriptor {
   switch (name) {
     case "width":
-      return containerWidthFamily(containerKey).get(effect);
+      return get(containerWidthFamily(containerKey));
     case "height":
-      return containerHeightFamily(containerKey).get(effect);
+      return get(containerHeightFamily(containerKey));
     case "aspect-ratio": {
-      const width = containerWidthFamily(containerKey).get(effect);
-      const height = containerWidthFamily(containerKey).get(effect);
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
       return width / height;
     }
     case "orientation":
-      const width = containerWidthFamily(containerKey).get(effect);
-      const height = containerWidthFamily(containerKey).get(effect);
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
       return width > height ? "landscape" : "portrait";
     case "inline-size":
     case "block-size":

package/src/runtime/native/conditions/guards.ts

@@ -2,7 +2,6 @@
 import type { ComponentState } from "../react/useNativeCss";
 import type {
   ContainerContextValue,
-  Effect,
   VariableContextValue,
 } from "../reactivity";
 
@@ -10,7 +9,7 @@ export type RenderGuard =
   | ["a", string, any]
   | ["d", string, any]
   | ["v", string, any]
-  | ["c", string, Effect];
+  | ["c", string, WeakKey];
 
 export function testGuards(
   state: ComponentState,

package/src/runtime/native/conditions/index.ts

@@ -10,7 +10,7 @@ import {
   focusFamily,
   hoverFamily,
   type ContainerContextValue,
-  type Effect,
+  type Getter,
 } from "../reactivity";
 import { testContainerQueries } from "./container-query";
 import type { RenderGuard } from "./guards";
@@ -18,15 +18,15 @@ import { testMediaQuery } from "./media-query";
 
 export function testRule(
   rule: StyleRule,
-  effect: Effect,
+  get: Getter,
   props: Props,
   guards: RenderGuard[],
   containerContext: ContainerContextValue,
 ) {
-  if (rule.p && !pseudoClasses(rule.p, effect)) {
+  if (rule.p && !pseudoClasses(rule.p, get)) {
     return false;
   }
-  if (rule.m && !testMediaQuery(rule.m, effect)) {
+  if (rule.m && !testMediaQuery(rule.m, get)) {
     return false;
   }
   if (rule.aq && !attributes(rule.aq, props, guards)) {
@@ -34,7 +34,7 @@ export function testRule(
   }
   if (
     rule.cq &&
-    !testContainerQueries(rule.cq, containerContext, guards, effect)
+    !testContainerQueries(rule.cq, containerContext, guards, get)
   ) {
     return false;
   }
@@ -42,14 +42,14 @@ export function testRule(
   return true;
 }
 
-function pseudoClasses(query: PseudoClassesQuery, effect: Effect) {
-  if (query.h && !hoverFamily(effect).get(effect)) {
+function pseudoClasses(query: PseudoClassesQuery, get: Getter) {
+  if (query.h && !get(hoverFamily(get))) {
     return false;
   }
-  if (query.a && !activeFamily(effect).get(effect)) {
+  if (query.a && !get(activeFamily(get))) {
     return false;
   }
-  if (query.f && !focusFamily(effect).get(effect)) {
+  if (query.f && !get(focusFamily(get))) {
     return false;
   }
   return true;

package/src/runtime/native/conditions/media-query.ts

@@ -2,38 +2,38 @@
 import { PixelRatio, Platform } from "react-native";
 
 import type { MediaCondition } from "../../../compiler";
-import { colorScheme, vh, vw, type Effect } from "../reactivity";
+import { colorScheme, vh, vw, type Getter } from "../reactivity";
 
-export function testMediaQuery(mediaQueries: MediaCondition[], effect: Effect) {
-  return mediaQueries.every((query) => test(query, effect));
+export function testMediaQuery(mediaQueries: MediaCondition[], get: Getter) {
+  return mediaQueries.every((query) => test(query, get));
 }
 
-function test(mediaQuery: MediaCondition, effect: Effect): Boolean {
+function test(mediaQuery: MediaCondition, get: Getter): Boolean {
   switch (mediaQuery[0]) {
     case "[]":
     case "!!":
       return false;
     case "!":
-      return !test(mediaQuery[1], effect);
+      return !test(mediaQuery[1], get);
     case "&":
       return mediaQuery[1].every((query) => {
-        return test(query, effect);
+        return test(query, get);
       });
     case "|":
       return mediaQuery[1].some((query) => {
-        return test(query, effect);
+        return test(query, get);
       });
     case ">":
     case ">=":
     case "<":
     case "<=":
     case "=": {
-      return testComparison(mediaQuery, effect);
+      return testComparison(mediaQuery, get);
     }
   }
 }
 
-function testComparison(mediaQuery: MediaCondition, effect: Effect): Boolean {
+function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
   let left: number | undefined;
   const right = mediaQuery[2];
 
@@ -41,22 +41,20 @@ function testComparison(mediaQuery: MediaCondition, effect: Effect): Boolean {
     case "platform":
       return right === Platform.OS;
     case "prefers-color-scheme": {
-      return right === colorScheme.get(effect);
+      return right === get(colorScheme);
     }
     case "display-mode":
       return right === "native" || Platform.OS === right;
     case "min-width":
-      return typeof right === "number" && vw.get(effect) >= right;
+      return typeof right === "number" && get(vw) >= right;
     case "max-width":
-      return typeof right === "number" && vw.get(effect) <= right;
+      return typeof right === "number" && get(vw) <= right;
     case "min-height":
-      return typeof right === "number" && vh.get(effect) >= right;
+      return typeof right === "number" && get(vh) >= right;
     case "max-height":
-      return typeof right === "number" && vh.get(effect) <= right;
+      return typeof right === "number" && get(vh) <= right;
     case "orientation":
-      return right === "landscape"
-        ? vh.get(effect) < vw.get(effect)
-        : vh.get(effect) >= vw.get(effect);
+      return right === "landscape" ? get(vh) < get(vw) : get(vh) >= get(vw);
   }
 
   if (typeof right !== "number") {
@@ -65,10 +63,10 @@ function testComparison(mediaQuery: MediaCondition, effect: Effect): Boolean {
 
   switch (mediaQuery[1]) {
     case "width":
-      left = vw.get(effect);
+      left = get(vw);
       break;
     case "height":
-      left = vh.get(effect);
+      left = get(vh);
       break;
     case "resolution":
       left = PixelRatio.get();

package/src/runtime/native/react/interaction.ts

@@ -6,11 +6,11 @@ import {
   containerLayoutFamily,
   focusFamily,
   hoverFamily,
-  type Effect,
+  type Getter as WeakKey,
 } from "../reactivity";
 
 const mainCache = new WeakMap<
-  Effect,
+  WeakKey,
   WeakMap<Function, (event: any) => void>
 >();
 
@@ -38,14 +38,14 @@ const defaultHandlers: Record<InteractionType, Handler> = {
 };
 
 export function getInteractionHandler(
-  effect: Effect,
+  weakKey: WeakKey,
   type: InteractionType,
   handler = defaultHandlers[type],
 ) {
-  let cache = mainCache.get(effect);
+  let cache = mainCache.get(weakKey);
   if (!cache) {
     cache = new WeakMap();
-    mainCache.set(effect, cache);
+    mainCache.set(weakKey, cache);
   }
 
   let cached = cache.get(handler);
@@ -57,29 +57,29 @@ export function getInteractionHandler(
 
       switch (type) {
         case "onLayout":
-          containerLayoutFamily(effect).set(
+          containerLayoutFamily(weakKey).set(
             (event as LayoutChangeEvent).nativeEvent.layout,
           );
           break;
         case "onHoverIn":
-          hoverFamily(effect).set(true);
+          hoverFamily(weakKey).set(true);
           break;
         case "onHoverOut":
-          hoverFamily(effect).set(false);
+          hoverFamily(weakKey).set(false);
           break;
         case "onPress":
           break;
         case "onPressIn":
-          activeFamily(effect).set(true);
+          activeFamily(weakKey).set(true);
           break;
         case "onPressOut":
-          activeFamily(effect).set(false);
+          activeFamily(weakKey).set(false);
           break;
         case "onFocus":
-          focusFamily(effect).set(true);
+          focusFamily(weakKey).set(true);
           break;
         case "onBlur":
-          focusFamily(effect).set(false);
+          focusFamily(weakKey).set(false);
           break;
       }
     };

package/src/runtime/native/react/rules.ts

@@ -104,7 +104,7 @@ export function updateRules(
       if (
         !testRule(
           rule,
-          state.ruleEffect,
+          state.ruleEffectGetter,
           currentProps,
           guards,
           inheritedContainers,
@@ -132,20 +132,20 @@ export function updateRules(
           containers = {
             ...inheritedContainers,
             // This container becomes the default container
-            [DEFAULT_CONTAINER_NAME]: state.ruleEffect,
+            [DEFAULT_CONTAINER_NAME]: state.ruleEffectGetter,
           };
         }
 
         // This this component as the named container
         for (const name of rule.c) {
-          containers![name] = state.ruleEffect;
+          containers![name] = state.ruleEffectGetter;
         }
 
         // Enable hover/active/focus/layout handlers
-        hoverFamily(state.ruleEffect);
-        activeFamily(state.ruleEffect);
-        focusFamily(state.ruleEffect);
-        containerLayoutFamily(state.ruleEffect);
+        hoverFamily(state.ruleEffectGetter);
+        activeFamily(state.ruleEffectGetter);
+        focusFamily(state.ruleEffectGetter);
+        containerLayoutFamily(state.ruleEffectGetter);
       }
 
       if (rule.a) {
@@ -163,7 +163,7 @@ export function updateRules(
 
     if (process.env.NODE_ENV !== "production") {
       if (isRerender) {
-        let pressable = activeFamily.has(state.ruleEffect);
+        let pressable = activeFamily.has(state.ruleEffectGetter);
 
         if (Boolean(variables) !== Boolean(state.variables)) {
           console.log(
@@ -190,7 +190,7 @@ export function updateRules(
   let pressable =
     process.env.NODE_ENV === "production"
       ? undefined
-      : activeFamily.has(state.ruleEffect);
+      : activeFamily.has(state.ruleEffectGetter);
 
   if (!rules.size && !state.stylesObs && !inlineVariables.size) {
     return {