react-native-css 3.0.0-preview.2 → 3.0.0-preview.4

package/src/jest/index.ts

@@ -3,9 +3,9 @@ import { Appearance, Dimensions } from "react-native";
 import { inspect } from "node:util";
 
 import { compile, type CompilerOptions } from "react-native-css/compiler";
-import { StyleCollection } from "react-native-css/style-collection";
+import { StyleCollection } from "react-native-css/native";
 
-import { colorScheme, dimensions } from "../runtime/native/reactivity";
+import { colorScheme, dimensions } from "../native/reactivity";
 
 declare global {
   /* eslint-disable @typescript-eslint/no-namespace */
@@ -27,7 +27,8 @@ beforeEach(() => {
 
 const debugDefault = Boolean(
   process.env.REACT_NATIVE_CSS_TEST_DEBUG &&
-    process.env.NODE_OPTIONS?.includes("--inspect"),
+    typeof process.env.NODE_OPTIONS === "string" &&
+    process.env.NODE_OPTIONS.includes("--inspect"),
 );
 
 export function registerCSS(
@@ -59,12 +60,12 @@ export function compileWithAutoDebug(
   {
     debug = debugDefault,
     ...options
-  }: CompilerOptions & { debug?: boolean } = {},
+  }: CompilerOptions & { debug?: boolean | "verbose" } = {},
 ) {
   const logger = debug
     ? (text: string) => {
         // Just log the rules
-        if (text.startsWith("[")) {
+        if (text.startsWith("[") && debug === "verbose") {
           console.log(`Rules:\n---\n${text}`);
         }
       }

package/src/metro/index.ts

@@ -1,14 +1,9 @@
 /* eslint-disable */
-import { dirname, relative, sep } from "node:path";
 import { versions } from "node:process";
 
-import connect from "connect";
-import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
-import type { CompilerOptions, ReactNativeCssStyleSheet } from "../compiler";
-import { compile } from "../compiler/compiler";
-import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
+import { type CompilerOptions } from "../compiler";
 import { nativeResolver, webResolver } from "./resolver";
 import { setupTypeScript } from "./typescript";
 
@@ -22,7 +17,10 @@ export interface WithReactNativeCSSOptions extends CompilerOptions {
   hexColors?: boolean;
 }
 
-const defaultLogger = debug("react-native-css:metro");
+const metroOverrideResolution = {
+  type: "sourceFile",
+  filePath: require.resolve("./override"),
+};
 
 export function withReactNativeCSS<
   T extends MetroConfig | (() => Promise<MetroConfig>),
@@ -41,18 +39,12 @@ export function withReactNativeCSS<
     disableTypeScriptGeneration,
     typescriptEnvPath,
     globalClassNamePolyfill = false,
-    logger = defaultLogger,
   } = options || {};
 
-  const loggerEnabled = "enabled" in logger ? logger.enabled : true;
-
   if (disableTypeScriptGeneration !== true) {
     setupTypeScript(typescriptEnvPath);
   }
 
-  const originalMiddleware = config.server?.enhanceMiddleware;
-  const originalResolver = config.resolver?.resolveRequest;
-
   return {
     ...config,
     transformerPath: require.resolve("./metro-transformer"),
@@ -64,17 +56,18 @@ export function withReactNativeCSS<
       ...config.resolver,
       sourceExts: [...(config?.resolver?.sourceExts || []), "css"],
       resolveRequest: (context, moduleName, platform) => {
-        if (moduleName.includes("poison.pill")) {
-          return { type: "empty" };
+        if (moduleName.includes("react-native-css-metro-override")) {
+          return metroOverrideResolution;
         }
 
+        const parentResolver =
+          config.resolver?.resolveRequest ?? context.resolveRequest;
+
         // Don't hijack the resolution of react-native imports
         if (!globalClassNamePolyfill) {
-          const parentResolver = originalResolver ?? context.resolveRequest;
           return parentResolver(context, moduleName, platform);
         }
 
-        const parentResolver = originalResolver ?? context.resolveRequest;
         const resolver = platform === "web" ? webResolver : nativeResolver;
         const resolved = resolver(
           parentResolver,
@@ -86,154 +79,5 @@ export function withReactNativeCSS<
         return resolved;
       },
     },
-    server: {
-      ...config.server,
-      enhanceMiddleware(middleware, metroServer) {
-        const server = connect();
-        const bundler: any = metroServer.getBundler().getBundler();
-
-        if (!bundler.__react_native_css__patched) {
-          bundler.__react_native_css__patched = true;
-
-          const nativeCSSFiles = new Map<
-            string,
-            [string, ReactNativeCssStyleSheet]
-          >();
-          const webCSSFiles = new Set<string>();
-
-          const nativeInjectionPath = require.resolve(
-            "../runtime/native/metro",
-          );
-          const nativeInjectionFilepaths = [
-            // CommonJS
-            nativeInjectionPath,
-            // ES Module
-            nativeInjectionPath.replace(
-              `dist${sep}commonjs`,
-              `dist${sep}module`,
-            ),
-            // TypeScript
-            nativeInjectionPath
-              .replace(`dist${sep}commonjs`, `src`)
-              .replace(".js", ".ts"),
-          ];
-
-          const webInjectionPath = require.resolve("../runtime/web/metro");
-          const webInjectionFilepaths = [
-            // CommonJS
-            webInjectionPath,
-            // ES Module
-            webInjectionPath.replace(`dist${sep}commonjs`, `dist${sep}module`),
-            // TypeScript
-            webInjectionPath
-              .replace(`dist${sep}commonjs`, `src`)
-              .replace(".js", ".ts"),
-          ];
-
-          // Keep the original
-          const transformFile = bundler.transformFile.bind(bundler);
-
-          const watcher = bundler.getWatcher();
-
-          // Patch with our functionality
-          bundler.transformFile = async function (
-            filePath: string,
-            transformOptions: any,
-            fileBuffer?: Buffer,
-          ) {
-            const isCss = /\.(s?css|sass)$/.test(filePath);
-
-            if (transformOptions.platform === "web") {
-              if (isCss) {
-                webCSSFiles.add(filePath);
-              } else if (webInjectionFilepaths.includes(filePath)) {
-                fileBuffer = getWebInjectionCode(Array.from(webCSSFiles));
-              }
-
-              return transformFile(filePath, transformOptions, fileBuffer);
-            } else {
-              // Handle CSS files on native platforms
-              if (isCss) {
-                const webTransform = await transformFile(
-                  filePath,
-                  {
-                    ...transformOptions,
-                    // Force the platform to web for CSS files
-                    platform: "web",
-                    // Let the transformer know that we will handle compilation
-                    customTransformOptions: {
-                      ...transformOptions.customTransformOptions,
-                      reactNativeCSS: options,
-                    },
-                  },
-                  fileBuffer,
-                );
-
-                const lastTransform = nativeCSSFiles.get(filePath);
-                const last = lastTransform?.[0];
-                const next = webTransform.output[0].data.css.code.toString();
-
-                // The CSS file has changed, we need to recompile the injection file
-                if (next !== last) {
-                  nativeCSSFiles.set(filePath, [
-                    next,
-                    compile(next, {
-                      hexColors: options?.hexColors,
-                    }).stylesheet(),
-                  ]);
-
-                  watcher.emit("change", {
-                    eventsQueue: nativeInjectionFilepaths.map((filePath) => ({
-                      filePath,
-                      metadata: {
-                        modifiedTime: Date.now(),
-                        size: 1, // Can be anything
-                        type: "virtual", // Can be anything
-                      },
-                      type: "change",
-                    })),
-                  });
-                }
-
-                const nativeTransform = await transformFile(
-                  filePath,
-                  transformOptions,
-                  fileBuffer,
-                );
-
-                // Tell Expo to skip caching this file
-                nativeTransform.output[0].data.css = {
-                  skipCache: true,
-                  // Expo requires a `code` property
-                  code: "",
-                };
-
-                return nativeTransform;
-              } else if (nativeInjectionFilepaths.includes(filePath)) {
-                // If this is the injection file, we to swap its content with the
-                // compiled CSS files
-                fileBuffer = getNativeInjectionCode(
-                  Array.from(nativeCSSFiles.keys()).map((key) =>
-                    relative(dirname(filePath), key),
-                  ),
-                  Array.from(nativeCSSFiles.values()).map(([, value]) => value),
-                );
-
-                if (loggerEnabled && fileBuffer) {
-                  logger(`Transformed ${filePath}`);
-                  logger(fileBuffer?.toString());
-                }
-              }
-
-              return transformFile(filePath, transformOptions, fileBuffer);
-            }
-          };
-        }
-
-        return originalMiddleware
-          ? server.use(originalMiddleware(middleware, metroServer))
-          : server.use(middleware);
-      },
-    },
   };
 }

package/src/metro/injection-code.ts

@@ -29,6 +29,6 @@ export function getNativeInjectionCode(
     .join("\n");
 
   return Buffer.from(
-    `import { StyleCollection } from "react-native-css/style-collection";\n${importStatements}\n${contents};export {};`,
+    `import { StyleCollection } from "react-native-css/native-internal";\n${importStatements}\n${contents};export {};`,
   );
 }

package/src/metro/metro-transformer.ts

@@ -44,5 +44,19 @@ export async function transform(
 
   data = Buffer.from(getNativeInjectionCode([], [productionJS]));
 
-  return worker.transform(config, projectRoot, `${filePath}.js`, data, options);
+  const transform = await worker.transform(
+    config,
+    projectRoot,
+    `${filePath}.js`,
+    data,
+    options,
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+  (transform as any).output[0].data.css = {
+    skipCache: true,
+    code: "",
+  };
+
+  return transform;
 }

package/src/metro/override.ts

@@ -0,0 +1 @@
+export {};

package/src/metro/resolver.ts

@@ -24,45 +24,39 @@ export function nativeResolver(
   platform: string | null,
 ): Resolution {
   const resolution = resolver(context, moduleName, platform);
+  const isInternal = isFromThisModule(context.originModulePath);
+  const isReactNativeIndex = context.originModulePath.endsWith(
+    `react-native${sep}index.js`,
+  );
 
-  if (
-    // Don't include our internal files
-    isFromThisModule(context.originModulePath) ||
-    // Only operate on source files
-    resolution.type !== "sourceFile" ||
-    // Skip the React Native barrel file to prevent infinite recursion
-    context.originModulePath.endsWith("react-native/index.js") ||
-    // Skip anything that isn't importing a React Native component
-    !(
-      moduleName.startsWith("react-native") ||
-      moduleName.startsWith("react-native/")
-    )
-  ) {
+  if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
     return resolution;
   }
 
   if (moduleName === "react-native") {
     return resolver(context, `react-native-css/components`, platform);
-  }
-
-  if (moduleName === "react-native-safe-area-context") {
+  } else if (moduleName === "react-native-safe-area-context") {
     return resolver(
       context,
       `react-native-css/components/react-native-safe-area-context`,
       platform,
     );
+  } else if (
+    resolution.filePath.includes(`${sep}react-native${sep}Libraries${sep}`)
+  ) {
+    const filename = basename(resolution.filePath.split(sep).at(-1) ?? "");
+    const module = filename.split(".").at(0);
+
+    if (module && allowedModules.has(module)) {
+      return resolver(
+        context,
+        `react-native-css/components/${module}`,
+        platform,
+      );
+    }
   }
 
-  // We only care about `react-native/Library/Components/<module>.js` components
-  const segments = resolution.filePath.split(sep);
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const module = basename(segments.at(-1)!).split(".")[0];
-
-  if (!module || !allowedModules.has(module)) {
-    return resolution;
-  }
-
-  return resolver(context, `react-native-css/components/${module}`, platform);
+  return resolution;
 }
 
 export function webResolver(

package/src/native/api.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable  */
+import { useContext, useState } from "react";
+import { Appearance } from "react-native";
+
+import type { StyleDescriptor } from "react-native-css/compiler";
+import { VariableContext } from "react-native-css/native-internal";
+
+import type {
+  ColorScheme,
+  Props,
+  ReactComponent,
+  StyledConfiguration,
+  StyledOptions,
+} from "../runtime.types";
+import { mappingToConfig, useNativeCss } from "./react/useNativeCss";
+import { usePassthrough } from "./react/usePassthrough";
+import {
+  colorScheme as colorSchemeObs,
+  VAR_SYMBOL,
+  type Effect,
+  type Getter,
+} from "./reactivity";
+import { resolveValue } from "./styles/resolve";
+
+export {
+  StyleCollection,
+  VariableContext,
+  VariableContextProvider,
+} from "react-native-css/native-internal";
+
+export { useNativeCss };
+
+/**
+ * Generates a new Higher-Order component the wraps the base component and applies the styles.
+ * This is added to the `interopComponents` map so that it can be used in the `wrapJSX` function
+ * @param baseComponent
+ * @param mapping
+ */
+export const styled = <
+  const C extends ReactComponent<any>,
+  const M extends StyledConfiguration<C>,
+>(
+  baseComponent: C,
+  mapping: M,
+  options?: StyledOptions,
+) => {
+  let component: any;
+  // const type = getComponentType(baseComponent);
+
+  const configs = mappingToConfig(mapping);
+
+  if (options?.passThrough) {
+    component = (props: Record<string, any>) => {
+      return usePassthrough(baseComponent, props, configs);
+    };
+  } else {
+    component = (props: Record<string, any>) => {
+      return useNativeCss(baseComponent, props, configs);
+    };
+  }
+
+  const name = baseComponent.displayName ?? baseComponent.name ?? "unknown";
+  component.displayName = `CssInterop.${name}`;
+  return component;
+};
+
+export const colorScheme: ColorScheme = {
+  get() {
+    return colorSchemeObs.get() ?? Appearance.getColorScheme() ?? "light";
+  },
+  set(value) {
+    return colorSchemeObs.set(value);
+  },
+};
+
+export const useUnstableNativeVariable = useNativeVariable;
+
+export const useCssElement = <
+  const C extends ReactComponent<any>,
+  const M extends StyledConfiguration<C>,
+>(
+  component: C,
+  incomingProps: Props,
+  mapping: M,
+) => {
+  const [config] = useState(() => mappingToConfig(mapping));
+  return useNativeCss(component, incomingProps, config);
+};
+
+export function useNativeVariable(name: string) {
+  if (name.startsWith("--")) {
+    name = name.slice(2);
+  }
+
+  const inheritedVariables = useContext(VariableContext);
+  const [effect, setState] = useState(() => {
+    const effect: Effect = {
+      observers: new Set(),
+      run: () => setState((state) => ({ ...state })),
+    };
+
+    const get: Getter = (observable) => observable.get(effect);
+
+    return { ...effect, get };
+  });
+
+  return resolveValue([{}, "var", [name]], effect.get, { inheritedVariables });
+}
+
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
+export function vars(variables: Record<string, StyleDescriptor>) {
+  return Object.assign(
+    { [VAR_SYMBOL]: "inline" },
+    Object.fromEntries(
+      Object.entries(variables).map(([k, v]) => [k.replace(/^--/, ""), v]),
+    ),
+  );
+}

package/src/native/conditions/attributes.ts

@@ -0,0 +1,54 @@
+import type { AttributeQuery } from "react-native-css/compiler";
+
+import type { RenderGuard } from "./guards";
+
+export function testAttributes(
+  queries: AttributeQuery[],
+  props: Record<string, unknown> | undefined | null,
+  guards: RenderGuard[],
+) {
+  return queries.every((query) => testAttribute(query, props, guards));
+}
+
+function testAttribute(
+  [type, prop, operator, testValue]: AttributeQuery,
+  props: Record<string, unknown> | undefined | null,
+  guards: RenderGuard[],
+) {
+  let value: unknown = undefined;
+
+  if (props) {
+    if (type === "a") {
+      value = props[prop];
+    } else {
+      const dataSet = props.dataSet as Record<string, unknown> | undefined;
+      value = 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/native/conditions/container-query.ts

@@ -0,0 +1,162 @@
+/* eslint-disable */
+import type { MediaFeatureNameFor_ContainerSizeFeatureId } from "lightningcss";
+import type {
+  ContainerQuery,
+  MediaCondition,
+  PseudoClassesQuery,
+  StyleDescriptor,
+} from "react-native-css/compiler";
+
+import {
+  activeFamily,
+  containerHeightFamily,
+  containerWidthFamily,
+  focusFamily,
+  hoverFamily,
+  type ContainerContextValue,
+  type Getter,
+} from "../reactivity";
+// import { testAttributes } from "./attributes";
+import type { RenderGuard } from "./guards";
+
+export const DEFAULT_CONTAINER_NAME = "c:___default___";
+
+export function testContainerQueries(
+  queries: ContainerQuery[],
+  inheritedContainers: ContainerContextValue,
+  guards: RenderGuard[],
+  get: Getter,
+) {
+  return queries.every((query) => {
+    return testContainerQuery(query, inheritedContainers, guards, get);
+  });
+}
+
+export function testContainerQuery(
+  query: ContainerQuery,
+  inheritedContainers: ContainerContextValue,
+  guards: RenderGuard[],
+  get: Getter,
+): boolean {
+  const name = query.n ?? DEFAULT_CONTAINER_NAME;
+  const container = inheritedContainers[name]!;
+
+  guards.push(["c", name, container]);
+
+  if (!container) {
+    return false;
+  }
+
+  // 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, get)) {
+    return false;
+  }
+
+  return true;
+}
+
+function testContainerPseudoCondition(
+  query: PseudoClassesQuery,
+  containerKey: WeakKey,
+  get: Getter,
+): boolean {
+  if (query.h && !get(hoverFamily(containerKey))) {
+    return false;
+  }
+  if (query.a && !get(activeFamily(containerKey))) {
+    return false;
+  }
+  if (query.f && !get(focusFamily(containerKey))) {
+    return false;
+  }
+  return true;
+}
+
+function testContainerMediaCondition(
+  condition: MediaCondition,
+  containerKey: WeakKey,
+  get: Getter,
+): boolean {
+  switch (condition[0]) {
+    case "!":
+      return !testContainerMediaCondition(condition[1], containerKey, get);
+    case "&":
+      return condition[1].every((query) => {
+        return testContainerMediaCondition(query, containerKey, get);
+      });
+    case "|":
+      return condition[1].some((query) => {
+        return testContainerMediaCondition(query, containerKey, get);
+      });
+    case "!!":
+      return false;
+    case "[]":
+      return false;
+    case ">":
+    case ">=":
+    case "<":
+    case "<=":
+    case "=": {
+      const left = getContainerFeatureValue(condition[1], containerKey, get);
+      const right = condition[2];
+
+      if (condition[0] === "=") {
+        return left === right;
+      }
+
+      if (typeof left !== "number" || typeof right !== "number") {
+        return false;
+      }
+
+      switch (condition[0]) {
+        case ">":
+          return left > right;
+        case ">=":
+          return left > right;
+        case "<":
+          return left > right;
+        case "<=":
+          return left > right;
+        default:
+          condition[0] satisfies never;
+          return false;
+      }
+    }
+    default:
+      condition satisfies never;
+      return false;
+  }
+}
+
+function getContainerFeatureValue(
+  name: MediaFeatureNameFor_ContainerSizeFeatureId,
+  containerKey: WeakKey,
+  get: Getter,
+): StyleDescriptor {
+  switch (name) {
+    case "width":
+      return get(containerWidthFamily(containerKey));
+    case "height":
+      return get(containerHeightFamily(containerKey));
+    case "aspect-ratio": {
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
+      return width / height;
+    }
+    case "orientation":
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
+      return width > height ? "landscape" : "portrait";
+    case "inline-size":
+    case "block-size":
+    default:
+      return;
+  }
+}