react-native-css 3.0.0-nightly.61014be → 3.0.0-nightly.8dd703d

package/src/compiler/stylesheet.ts

@@ -1,3 +1,5 @@
+import type { SelectorList } from "lightningcss";
+
 import {
   isStyleDescriptorArray,
   Specificity,
@@ -17,8 +19,9 @@ import type {
   StyleRuleMapping,
   StyleRuleSet,
   VariableRecord,
+  VariableValue,
 } from "./compiler.types";
-import { toRNProperty, type NormalizeSelector } from "./selectors";
+import { getClassNameSelectors, toRNProperty } from "./selector-builder";
 
 type BuilderMode = "style" | "media" | "container" | "keyframes";
 
@@ -29,6 +32,8 @@ const staticDeclarations = new WeakMap<
 
 const extraRules = new WeakMap<StyleRule, Partial<StyleRule>[]>();
 
+const keywords = new Set(["unset"]);
+
 export class StylesheetBuilder {
   animationFrames?: AnimationKeyframes_V2[];
   animationDeclarations: StyleDeclaration[] = [];
@@ -47,6 +52,7 @@ export class StylesheetBuilder {
     private ruleTemplate: StyleRule = {
       s: [],
     },
+    // Any default mapping should be included in the @prop parsing
     private mapping: StyleRuleMapping = {},
     public descriptorProperty?: string,
     private shared: {
@@ -56,15 +62,37 @@ export class StylesheetBuilder {
       animations?: AnimationRecord;
       rem: number;
       ruleOrder: number;
-    } = { ruleSets: {}, rem: 14, ruleOrder: 0 },
-    private selectors?: NormalizeSelector[],
+      warningProperty?: string;
+      warningProperties: string[];
+      warningValues: Record<string, unknown[]>;
+      warningFunctions: string[];
+    } = {
+      ruleSets: {},
+      rem: 14,
+      ruleOrder: 0,
+      warningProperties: [],
+      warningValues: {},
+      warningFunctions: [],
+    },
+    private selectors: SelectorList = [],
   ) {}
 
-  fork(
-    mode = this.mode,
-    selectors: NormalizeSelector[] | undefined = this.selectors,
-  ): StylesheetBuilder {
+  fork(mode = this.mode, selectors: SelectorList = []): StylesheetBuilder {
     this.shared.ruleOrder++;
+
+    /**
+     * If we already have selectors and we are added more
+     * Then these must be nested selectors.
+     *
+     * We need to extrapolate out the selectors to their full values
+     */
+    selectors =
+      this.selectors.length && selectors.length
+        ? this.selectors.flatMap((selectorA) => {
+            return selectors.map((selectorB) => [...selectorA, ...selectorB]);
+          })
+        : [...this.selectors, ...selectors];
+
     return new StylesheetBuilder(
       this.options,
       mode,
@@ -76,7 +104,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 +156,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) {
@@ -155,11 +189,64 @@ export class StylesheetBuilder {
     );
   }
 
+  setWarningProperty(property: string) {
+    this.shared.warningProperty = property;
+  }
+
+  addWarning(type: "property" | "value", property: string): void;
+  addWarning(type: "style", property: string, value: unknown): void;
   addWarning(
-    _type: "property" | "value" | "function",
-    _property: string | number,
+    type: "property" | "style" | "value",
+    property: string,
+    value?: unknown,
   ): void {
-    // TODO
+    switch (type) {
+      case "property":
+        this.shared.warningProperties.push(property);
+        break;
+      case "value": {
+        value = property;
+        property = this.shared.warningProperty ?? "";
+
+        if (!property) {
+          return;
+        }
+
+        this.shared.warningValues[property] ??= [];
+        this.shared.warningValues[property]?.push(value);
+        break;
+      }
+      case "style":
+        this.shared.warningValues[property] ??= [];
+        this.shared.warningValues[property]?.push(value);
+        break;
+    }
+  }
+
+  getWarnings() {
+    const result: {
+      properties?: string[];
+      values?: Record<string, unknown[]>;
+      functions?: string[];
+    } = {};
+
+    if (this.shared.warningProperties.length) {
+      result.properties = this.shared.warningProperties;
+    }
+
+    if (Object.keys(this.shared.warningValues).length) {
+      result.values = this.shared.warningValues;
+    }
+
+    if (this.shared.warningFunctions.length) {
+      result.functions = this.shared.warningFunctions;
+    }
+
+    return result;
+  }
+
+  addMapping(mapping: StyleRuleMapping) {
+    this.mapping = { ...this.mapping, ...mapping };
   }
 
   newRule(mapping = this.mapping, { important = false } = {}) {
@@ -171,14 +258,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 +282,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) {
@@ -257,7 +342,10 @@ export class StylesheetBuilder {
       const [delayed, usesVariables] = postProcessStyleFunction(value);
 
       rule.d ??= [];
-      if (value[1] === "@animation") {
+      if (
+        value[1].startsWith("animation") ||
+        value[1].startsWith("transition")
+      ) {
         rule.a ??= true;
       }
 
@@ -297,30 +385,29 @@ export class StylesheetBuilder {
   }
 
   private pushDescriptor(
-    property: string,
+    rawProperty: string,
     value: StyleDescriptor,
     declarations: StyleDeclaration[],
     forceTuple = false,
     delayed = false,
   ) {
-    property = toRNProperty(property);
+    const property = toRNProperty(rawProperty);
 
-    let propPath: string | string[] =
-      this.mapping[property] ?? this.mapping["*"] ?? property;
+    let propPath: string | string[] | undefined =
+      this.mapping[rawProperty] ?? this.mapping[property] ?? this.mapping["*"];
 
     if (Array.isArray(propPath)) {
-      const first = propPath[0];
+      const [first, second] = propPath;
 
-      if (!first) {
-        // This should not happen, but if it does, we skip the property
-        return;
-      }
-
-      if (propPath.length === 1) {
-        propPath = first;
+      if (propPath.length === 2 && first === "*" && second) {
+        propPath = second;
       } else {
         forceTuple = true;
       }
+    } else if (propPath) {
+      forceTuple = true;
+    } else {
+      propPath = property;
     }
 
     if (isStyleFunction(value)) {
@@ -330,9 +417,14 @@ export class StylesheetBuilder {
         declarations.push([value, propPath]);
       }
     } else if (forceTuple || Array.isArray(propPath)) {
-      declarations.push([value, propPath]);
+      declarations.push([
+        value,
+        Array.isArray(propPath) ? propPath : [propPath],
+      ]);
     } else if (Array.isArray(value) && value.some(isStyleFunction)) {
       declarations.push([value, propPath]);
+    } else if (typeof value === "string" && keywords.has(value)) {
+      declarations.push([value, propPath]);
     } else {
       let staticDeclarationRecord = staticDeclarations.get(declarations);
       if (!staticDeclarationRecord) {
@@ -345,17 +437,23 @@ export class StylesheetBuilder {
   }
 
   applyRuleToSelectors(selectorList = this.selectors): void {
-    if (!selectorList?.length) {
+    if (!selectorList.length) {
       // If there are no selectors, we cannot apply the rule
       return;
     }
 
-    if (!this.rule.d && !this.rule.v) {
+    if (!this.rule.d && !this.rule.v && !this.rule.c) {
       return;
     }
 
-    for (const selector of selectorList) {
-      const rule = this.cloneRule();
+    const normalizedSelectors = getClassNameSelectors(
+      selectorList,
+      this.options,
+    );
+
+    for (const selector of normalizedSelectors) {
+      // 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 {
@@ -367,6 +465,10 @@ export class StylesheetBuilder {
           attributeQuery,
         } = selector;
 
+        if (!className) {
+          continue; // No className, nothing to do
+        }
+
         // Combine the specificity of the selector with the rule's specificity
         for (let i = 0; i < specificity.length; i++) {
           const spec = specificity[i];
@@ -390,14 +492,29 @@ export class StylesheetBuilder {
               continue;
             }
 
+            const [first, ...rest] = name.split(".");
+
+            if (typeof first !== "string") {
+              continue;
+            }
+
             const containerRule: StyleRule = {
               // These are not "real" rules, so they use the lowest specificity
               s: [0],
               c: [name],
             };
 
+            if (rest.length) {
+              containerRule.aq = rest.map((attr) => [
+                "a",
+                "className",
+                "*=",
+                attr,
+              ]);
+            }
+
             // Create rules for the parent classes
-            this.addRuleToRuleSet(name, containerRule);
+            this.addRuleToRuleSet(first, containerRule);
           }
         }
 
@@ -426,21 +543,24 @@ export class StylesheetBuilder {
         if (!this.rule.v) {
           continue;
         }
-
-        const { type, subtype } = selector;
-
+        const { type } = selector;
         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 mediaQueries = this.rule.m;
+          const variableValue: VariableValue = mediaQueries
+            ? [value, [...mediaQueries]]
+            : [value];
+          // Append extra media queries if they exist
+          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) {
@@ -502,7 +622,7 @@ function postProcessStyleFunction(value: StyleDescriptor): [
   let [shouldDelay, usesVariables] = postProcessStyleFunction(value[2]);
 
   usesVariables ||= value[1] === "var";
-  shouldDelay ||= value[3] === 1;
+  shouldDelay ||= value[3] === 1 || usesVariables;
 
   if (shouldDelay) {
     return [true, usesVariables];

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,50 @@ 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"),
-    ...options
-  }: CompilerOptions & { debugCompiled?: boolean } = {},
+  options: CompilerOptions & { debug?: boolean } = {},
 ) {
-  const compiled = compile(css, options);
-  if (debugCompiled) {
-    console.log(`Compiled styles:\n\n${JSON.stringify({ compiled }, null, 2)}`);
+  const { debug = debugDefault } = options;
+  const compiled = compileWithAutoDebug(css, options);
+
+  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;
 }
+
+export function compileWithAutoDebug(
+  css: string,
+  {
+    debug = debugDefault,
+    ...options
+  }: CompilerOptions & { debug?: boolean } = {},
+) {
+  const logger = debug
+    ? (text: string) => {
+        // Just log the rules
+        if (text.startsWith("[")) {
+          console.log(`Rules:\n---\n${text}`);
+        }
+      }
+    : undefined;
+
+  return compile(css, { ...options, logger });
+}

package/src/metro/index.ts

@@ -6,7 +6,7 @@ import connect from "connect";
 import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
-import type { CompilerOptions } from "../compiler";
+import type { CompilerOptions, ReactNativeCssStyleSheet_V2 } from "../compiler";
 import { compile } from "../compiler/compiler";
 import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
 import { nativeResolver, webResolver } from "./resolver";
@@ -93,7 +93,10 @@ export function withReactNativeCSS<
         if (!bundler.__react_native_css__patched) {
           bundler.__react_native_css__patched = true;
 
-          const nativeCSSFiles = new Map();
+          const nativeCSSFiles = new Map<
+            string,
+            [string, ReactNativeCssStyleSheet_V2]
+          >();
           const webCSSFiles = new Set<string>();
 
           const nativeInjectionPath = require.resolve(
@@ -174,7 +177,7 @@ export function withReactNativeCSS<
                     next,
                     compile(next, {
                       hexColors: options?.hexColors,
-                    }),
+                    }).stylesheet(),
                   ]);
 
                   watcher.emit("change", {

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/attributes.ts

@@ -0,0 +1,52 @@
+import type { AttributeQuery } from "../../../compiler";
+import type { Props } from "../../runtime.types";
+import type { RenderGuard } from "./guards";
+
+export function testAttributes(
+  queries: AttributeQuery[],
+  props: Props,
+  guards: RenderGuard[],
+) {
+  return queries.every((query) => testAttribute(query, props, guards));
+}
+
+function testAttribute(
+  [type, prop, operator, testValue]: AttributeQuery,
+  props: Props,
+  guards: RenderGuard[],
+) {
+  let value: unknown;
+
+  if (type === "a") {
+    value = props?.[prop];
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    value = props?.dataSet?.[prop];
+  }
+
+  guards.push([type, prop, value]);
+
+  if (!operator) {
+    return value !== undefined && value !== null && value !== false;
+  }
+
+  switch (operator) {
+    case "!":
+      return !value;
+    case "=":
+      return value == testValue;
+    case "~=":
+      return testValue && value?.toString().split(" ").includes(testValue);
+    case "|=":
+      return testValue && value?.toString().startsWith(testValue + "-");
+    case "^=":
+      return testValue && value?.toString().startsWith(testValue);
+    case "$=":
+      return testValue && value?.toString().endsWith(testValue);
+    case "*=":
+      return testValue && value?.toString().includes(testValue);
+    default:
+      operator satisfies never;
+      return false;
+  }
+}

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

@@ -14,8 +14,9 @@ import {
   focusFamily,
   hoverFamily,
   type ContainerContextValue,
-  type Effect,
+  type Getter,
 } from "../reactivity";
+// import { testAttributes } from "./attributes";
 import type { RenderGuard } from "./guards";
 
 export const DEFAULT_CONTAINER_NAME = "c:___default___";
@@ -24,10 +25,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 +36,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 +47,15 @@ export function testContainerQuery(
     return false;
   }
 
-  if (query.m && !testContainerMediaCondition(query.m, container, effect)) {
+  // if (query.a && !testAttributes(query.a, container.props, guards)) {
+  //   return false;
+  // }
+
+  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 +65,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 +82,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 +104,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 +138,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,