react-native-css 3.0.0-nightly.fa5e95b → 3.0.0-preview.1

package/src/compiler/stylesheet.ts

@@ -1,10 +1,12 @@
+import type { SelectorList } from "lightningcss";
+
 import {
   isStyleDescriptorArray,
   Specificity,
   specificityCompareFn,
 } from "../runtime/utils";
 import type {
-  AnimationKeyframes_V2,
+  AnimationKeyframes,
   AnimationRecord,
   CompilerOptions,
   ContainerQuery,
@@ -19,7 +21,11 @@ import type {
   VariableRecord,
   VariableValue,
 } from "./compiler.types";
-import { toRNProperty, type NormalizeSelector } from "./selectors";
+import {
+  modifyRuleForPlaceholder,
+  modifyRuleForSelection,
+} from "./pseudo-elements";
+import { getClassNameSelectors, toRNProperty } from "./selector-builder";
 
 type BuilderMode = "style" | "media" | "container" | "keyframes";
 
@@ -30,8 +36,10 @@ const staticDeclarations = new WeakMap<
 
 const extraRules = new WeakMap<StyleRule, Partial<StyleRule>[]>();
 
+const keywords = new Set(["unset"]);
+
 export class StylesheetBuilder {
-  animationFrames?: AnimationKeyframes_V2[];
+  animationFrames?: AnimationKeyframes[];
   animationDeclarations: StyleDeclaration[] = [];
 
   stylesheet: ReactNativeCssStyleSheet = {};
@@ -48,6 +56,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: {
@@ -69,14 +78,25 @@ export class StylesheetBuilder {
       warningValues: {},
       warningFunctions: [],
     },
-    private selectors?: NormalizeSelector[],
+    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,
@@ -326,7 +346,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;
       }
 
@@ -391,17 +414,21 @@ export class StylesheetBuilder {
       propPath = property;
     }
 
-    if (isStyleFunction(value)) {
+    if (forceTuple && !Array.isArray(propPath)) {
+      propPath = [propPath];
+    }
+
+    if (isStyleFunction(value) || Array.isArray(propPath)) {
       if (delayed) {
         declarations.push([value, propPath, 1]);
       } else {
         declarations.push([value, propPath]);
       }
-    } else if (forceTuple || Array.isArray(propPath)) {
-      declarations.push([value, propPath]);
     } else if (Array.isArray(value) && value.some(isStyleFunction)) {
       declarations.push([value, propPath]);
-    } else {
+    } else if (typeof value === "string" && keywords.has(value)) {
+      declarations.push([value, propPath]);
+    } else if (typeof propPath === "string") {
       let staticDeclarationRecord = staticDeclarations.get(declarations);
       if (!staticDeclarationRecord) {
         staticDeclarationRecord = {};
@@ -413,18 +440,35 @@ 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 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);
+      let rule: StyleRule | undefined = this.cloneRule(this.rule);
+
+      if (selector.type === "className" && selector.pseudoElementQuery) {
+        if (selector.pseudoElementQuery.includes("selection")) {
+          rule = modifyRuleForSelection(rule);
+        } else if (selector.pseudoElementQuery.includes("placeholder")) {
+          rule = modifyRuleForPlaceholder(rule);
+        }
+      }
+
+      if (!rule) {
+        continue;
+      }
 
       if (selector.type === "className") {
         const {
@@ -436,6 +480,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];
@@ -459,14 +507,29 @@ export class StylesheetBuilder {
               continue;
             }
 
+            const [first, ...rest] = name.slice(2).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);
           }
         }
 
@@ -495,25 +558,22 @@ 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] ??= [];
-
-          const variableValue: VariableValue =
-            subtype === "light"
-              ? [value]
-              : [value, [["=", "prefers-color-scheme", "dark"]]];
-
+          const mediaQueries = this.rule.m;
+          const variableValue: VariableValue = mediaQueries
+            ? [value, [...mediaQueries]]
+            : [value];
           // 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);
+
+          if (type === "rootVariables" && name === "__rn-css-em") {
+            const remName = "__rn-css-rem";
+            this.shared[type][remName] ??= [];
+            this.shared[type][remName].push(variableValue);
+          }
         }
       }
     }
@@ -583,7 +643,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/compiler/supports.ts

@@ -0,0 +1,26 @@
+import type { SupportsCondition } from "lightningcss";
+
+export function supportsConditionValid(condition: SupportsCondition): boolean {
+  if (condition.type === "and") {
+    return condition.value.every((condition) => {
+      return supportsConditionValid(condition);
+    });
+  } else if (condition.type === "or") {
+    return condition.value.some((condition) => {
+      return supportsConditionValid(condition);
+    });
+  } else if (condition.type === "not") {
+    return !supportsConditionValid(condition.value);
+  } else if (condition.type === "declaration") {
+    return Boolean(
+      declarations[condition.propertyId.property]?.includes(condition.value),
+    );
+  }
+
+  return false;
+}
+
+const declarations: Record<string, string[]> = {
+  // We don't actually support this, but its needed for Tailwind CSS
+  "-moz-orient": ["inline"],
+};

package/src/components/ActivityIndicator.tsx

@@ -0,0 +1,27 @@
+import {
+  ActivityIndicator as RNActivityIndicator,
+  type ActivityIndicatorProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      color: "color",
+    },
+  },
+} satisfies StyledConfiguration<typeof RNActivityIndicator>;
+
+export function ActivityIndicator(
+  props: StyledProps<ActivityIndicatorProps, typeof mapping>,
+) {
+  return useCssElement(RNActivityIndicator, props, mapping);
+}
+
+export default ActivityIndicator;

package/src/components/Button.tsx

@@ -0,0 +1,22 @@
+import { Button as RNButton, type ButtonProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: {
+    target: false,
+    nativeStyleMapping: {
+      color: "color",
+    },
+  },
+} satisfies StyledConfiguration<typeof RNButton>;
+
+export function Button(props: StyledProps<ButtonProps, typeof mapping>) {
+  return useCssElement(RNButton, props, mapping);
+}
+
+export default Button;

package/src/components/FlatList.tsx

@@ -0,0 +1,21 @@
+import { FlatList as RNFlatList, type FlatListProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  columnWrapperStyle: "columnWrapperStyle",
+  listFooterComponentClassName: "ListFooterComponentStyle",
+  listHeaderComponentClassName: "ListHeaderComponentStyle",
+} satisfies StyledConfiguration<typeof RNFlatList>;
+
+export function FlatList<ItemT>(
+  props: StyledProps<FlatListProps<ItemT>, typeof mapping>,
+) {
+  return useCssElement(RNFlatList, props, mapping);
+}
+
+export default FlatList;

package/src/components/Image.tsx

@@ -0,0 +1,17 @@
+import { Image as RNImage, type ImageProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNImage>;
+
+export function Image(props: StyledProps<ImageProps, typeof mapping>) {
+  return useCssElement(RNImage, props, mapping);
+}
+
+export default Image;

package/src/components/Switch.tsx

@@ -0,0 +1,17 @@
+import { Switch as RNSwitch, type SwitchProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNSwitch>;
+
+export function Switch(props: StyledProps<SwitchProps, typeof mapping>) {
+  return useCssElement(RNSwitch, props, mapping);
+}
+
+export default Switch;

package/src/components/TextInput.tsx

@@ -0,0 +1,17 @@
+import { TextInput as RNTextInput, type TextInputProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNTextInput>;
+
+export function TextInput(props: StyledProps<TextInputProps, typeof mapping>) {
+  return useCssElement(RNTextInput, props, mapping);
+}
+
+export default TextInput;

package/src/components/index.tsx

@@ -1,4 +1,10 @@
 export * from "react-native";
 
+export { ActivityIndicator } from "./ActivityIndicator";
+export { Button } from "./Button";
+export { FlatList } from "./FlatList";
+export { Image } from "./Image";
+export { Switch } from "./Switch";
 export { Text } from "./Text";
+export { TextInput } from "./TextInput";
 export { View } from "./View";

package/src/components/react-native-safe-area-context.native.tsx

@@ -0,0 +1,40 @@
+import { useContext, useMemo, type PropsWithChildren } from "react";
+
+import {
+  SafeAreaProvider as OriginalSafeAreaProvider,
+  useSafeAreaInsets,
+  type SafeAreaProviderProps,
+} from "react-native-safe-area-context";
+
+import { VariableContext } from "../runtime/native/reactivity";
+
+export * from "react-native-safe-area-context";
+
+export function SafeAreaProvider({
+  children,
+  ...props
+}: SafeAreaProviderProps) {
+  return (
+    <OriginalSafeAreaProvider {...props}>
+      <SafeAreaEnv>{children}</SafeAreaEnv>
+    </OriginalSafeAreaProvider>
+  );
+}
+
+function SafeAreaEnv({ children }: PropsWithChildren) {
+  const insets = useSafeAreaInsets();
+  const parentVars = useContext(VariableContext);
+
+  const value = useMemo(
+    () => ({
+      ...parentVars,
+      "--react-native-css-safe-area-inset-bottom": insets.bottom,
+      "--react-native-css-safe-area-inset-left": insets.left,
+      "--react-native-css-safe-area-inset-right": insets.right,
+      "--react-native-css-safe-area-inset-top": insets.top,
+    }),
+    [parentVars, insets],
+  );
+
+  return <VariableContext value={value}>{children}</VariableContext>;
+}

package/src/components/react-native-safe-area-context.tsx

@@ -0,0 +1 @@
+export * from "react-native-safe-area-context";

package/src/jest/index.ts

@@ -2,9 +2,10 @@ 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";
+import { compile, type CompilerOptions } from "react-native-css/compiler";
+import { StyleCollection } from "react-native-css/style-collection";
+
+import { colorScheme, dimensions } from "../runtime/native/reactivity";
 
 declare global {
   /* eslint-disable @typescript-eslint/no-namespace */
@@ -20,7 +21,6 @@ export const testID = "react-native-css";
 beforeEach(() => {
   StyleCollection.styles.clear();
   dimensions.set(Dimensions.get("window"));
-  rem.set(14);
   Appearance.setColorScheme(null);
   colorScheme.set(null);
 });
@@ -32,21 +32,11 @@ const debugDefault = Boolean(
 
 export function registerCSS(
   css: string,
-  {
-    debug = debugDefault,
-    ...options
-  }: CompilerOptions & { debug?: boolean } = {},
+  options: CompilerOptions & { debug?: boolean } = {},
 ) {
-  const logger = debug
-    ? (text: string) => {
-        // Just log the rules
-        if (text.startsWith("[")) {
-          console.log(`Rules:\n---\n${text}`);
-        }
-      }
-    : undefined;
+  const { debug = debugDefault } = options;
+  const compiled = compileWithAutoDebug(css, options);
 
-  const compiled = compile(css, { ...options, logger });
   if (debug) {
     console.log(
       `Compiled:\n---\n${inspect(
@@ -63,3 +53,22 @@ export function registerCSS(
 
   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 } from "../compiler";
 import { compile } from "../compiler/compiler";
 import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
 import { nativeResolver, webResolver } from "./resolver";
@@ -53,16 +53,18 @@ export function withReactNativeCSS<
   const originalMiddleware = config.server?.enhanceMiddleware;
   const originalResolver = config.resolver?.resolveRequest;
 
-  const poisonPillPath = "./poison.pill";
-
   return {
     ...config,
     transformerPath: require.resolve("./metro-transformer"),
+    transformer: {
+      ...config.transformer,
+      reactNativeCSS: options,
+    },
     resolver: {
       ...config.resolver,
       sourceExts: [...(config?.resolver?.sourceExts || []), "css"],
       resolveRequest: (context, moduleName, platform) => {
-        if (moduleName === poisonPillPath) {
+        if (moduleName.includes("poison.pill")) {
           return { type: "empty" };
         }
 
@@ -93,7 +95,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]
+          >();
           const webCSSFiles = new Set<string>();
 
           const nativeInjectionPath = require.resolve(
@@ -158,7 +163,7 @@ export function withReactNativeCSS<
                     // Let the transformer know that we will handle compilation
                     customTransformOptions: {
                       ...transformOptions.customTransformOptions,
-                      reactNativeCSSCompile: false,
+                      reactNativeCSS: options,
                     },
                   },
                   fileBuffer,
@@ -174,7 +179,7 @@ export function withReactNativeCSS<
                     next,
                     compile(next, {
                       hexColors: options?.hexColors,
-                    }),
+                    }).stylesheet(),
                   ]);
 
                   watcher.emit("change", {

package/src/metro/injection-code.ts

@@ -1,17 +1,13 @@
 /**
- * This is a hack around Expo's handling of CSS files.
+ * This is a hack around Metro's handling of bundles.
  * When a component is inside a lazy() barrier, it is inside a different JS bundle.
  * So when it updates, it only updates its local bundle, not the global one which contains the CSS files.
  *
- * To fix this, we force our code to always import the CSS files.
- * Now the CSS files are in every bundle.
+ * This means that the CSS file will not be re-evaluated when a component in a different bundle updates,
+ * breaking tools like Tailwind CSS
  *
- * We achieve this by collecting all CSS files and injecting them into a special file
- * which is included inside react-native-css's runtime.
- *
- * This is why both of these function add imports for the CSS files.
+ * To fix this, we force our code to always import the CSS files, so now the CSS files are in every bundle.
  */
-
 export function getWebInjectionCode(filePaths: string[]) {
   const importStatements = filePaths
     .map((filePath) => `import "${filePath}";`)
@@ -27,12 +23,12 @@ export function getNativeInjectionCode(
   const importStatements = cssFilePaths
     .map((filePath) => `import "${filePath}";`)
     .join("\n");
-  const importPath = `import { StyleCollection } from "./api";`;
+
   const contents = values
     .map((value) => `StyleCollection.inject(${JSON.stringify(value)});`)
     .join("\n");
 
   return Buffer.from(
-    `${importStatements}\n${importPath}\n${contents};export {};`,
+    `import { StyleCollection } from "react-native-css/style-collection";\n${importStatements}\n${contents};export {};`,
   );
 }

package/src/metro/metro-transformer.ts

@@ -1,31 +1,48 @@
+import { unstable_transformerPath } from "@expo/metro-config";
 import type {
   JsTransformerConfig,
   JsTransformOptions,
   TransformResponse,
 } from "metro-transform-worker";
 
+import { compile, type CompilerOptions } from "../compiler";
+import { getNativeInjectionCode } from "./injection-code";
+
 const worker =
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  require("@expo/metro-config/build/transform-worker/transform-worker.js") as typeof import("metro-transform-worker");
+  require(unstable_transformerPath) as typeof import("metro-transform-worker");
 
-export function transform(
+export async function transform(
   config: JsTransformerConfig,
   projectRoot: string,
   filePath: string,
   data: Buffer,
-  options: JsTransformOptions,
+  options: JsTransformOptions & {
+    reactNativeCSS?: CompilerOptions | undefined;
+  },
 ): Promise<TransformResponse> {
   const isCss = options.type !== "asset" && /\.(s?css|sass)$/.test(filePath);
-  const skipCompile =
-    options.customTransformOptions &&
-    "reactNativeCSSCompile" in options.customTransformOptions &&
-    options.customTransformOptions.reactNativeCSSCompile === false;
 
-  if (!isCss || skipCompile) {
+  if (options.platform === "web" || !isCss) {
     return worker.transform(config, projectRoot, filePath, data, options);
   }
 
-  // TODO - compile the CSS file inline
+  const cssFile = (await worker.transform(config, projectRoot, filePath, data, {
+    ...options,
+    platform: "web",
+  })) as TransformResponse & {
+    output: [{ data: { css: { code: Buffer } } }];
+  };
+
+  const css = cssFile.output[0].data.css.code.toString();
+
+  const productionJS = compile(css, {
+    ...options.reactNativeCSS,
+    filename: filePath,
+    projectRoot: projectRoot,
+  }).stylesheet();
+
+  data = Buffer.from(getNativeInjectionCode([], [productionJS]));
 
-  return worker.transform(config, projectRoot, filePath, data, options);
+  return worker.transform(config, projectRoot, `${filePath}.js`, data, options);
 }