react-native-css 3.0.0-nightly.8dd703d → 3.0.0-nightly.9c84741

package/src/compiler/selector-builder.ts

@@ -1,4 +1,4 @@
-import type { Selector, SelectorList } from "lightningcss";
+import type { AttrOperation, Selector, SelectorList } from "lightningcss";
 
 import { Specificity } from "../runtime/utils";
 import type {
@@ -19,6 +19,7 @@ interface ReactNativeClassNameSelector {
   containerQuery?: ContainerQuery[];
   pseudoClassesQuery?: PseudoClassesQuery;
   attributeQuery?: AttributeQuery[];
+  pseudoElementQuery?: string[];
 }
 
 interface ReactNativeGlobalSelector {
@@ -32,10 +33,12 @@ type PartialSelector = Partial<ReactNativeClassNameSelector> & {
 
 const containerQueryMap = new WeakMap<WeakKey, ContainerQuery[]>();
 const attributeQueryMap = new WeakMap<WeakKey, AttributeQuery[]>();
+const mediaQueryMap = new WeakMap<WeakKey, MediaCondition[]>();
 const pseudoClassesQueryMap = new WeakMap<WeakKey, PseudoClassesQuery>();
 
 type ContainerQueryWithSpecificity = ContainerQuery & {
   specificity: SpecificityArray;
+  m?: MediaCondition;
 };
 
 export function getClassNameSelectors(
@@ -55,6 +58,8 @@ export function getClassNameSelectors(
     (selector): (ReactNativeGlobalSelector | PartialSelector)[] => {
       if (isRootVariableSelector(selector)) {
         return [{ type: "rootVariables" }];
+      } else if (isUniversalSelector(selector)) {
+        return [{ type: "universalVariables" }];
       } else {
         return (
           parseComponents(
@@ -121,8 +126,19 @@ function parseComponents(
       return [];
     }
     case "pseudo-element": {
-      // TODO: Support ::selection, ::placeholder, etc
-      return [];
+      switch (component.kind) {
+        case "selection":
+        case "placeholder": {
+          specificity[Specificity.PseudoElements] =
+            (specificity[Specificity.PseudoElements] ?? 0) + 1;
+          root.pseudoElementQuery ??= [];
+          root.pseudoElementQuery.push(component.kind);
+          return parseComponents(rest, options, root, ref, specificity);
+        }
+        default: {
+          return [];
+        }
+      }
     }
     case "pseudo-class": {
       switch (component.kind) {
@@ -183,12 +199,16 @@ function parseComponents(
           return parents.flatMap((parent) => {
             const originalParent = { ...parent };
 
-            return isWhereContainerQueries.map(({ specificity, ...query }) => {
+            return isWhereContainerQueries.map((containerQuery) => {
+              const { specificity, m, ...query } = containerQuery;
               parent = { ...originalParent };
               parent.specificity = [...originalParent.specificity];
-              parent.containerQuery = [
-                ...(originalParent.containerQuery ?? []),
-              ];
+
+              if (m && m.length > 1) {
+                parent.mediaQuery = originalParent.mediaQuery
+                  ? [["&", [...originalParent.mediaQuery, m]]]
+                  : [m];
+              }
 
               if (component.kind === "is") {
                 for (let i = 0; i < specificity.length; i++) {
@@ -200,7 +220,12 @@ function parseComponents(
                 }
               }
 
-              parent.containerQuery.push(query);
+              if (query.a || query.p || query.n !== undefined) {
+                parent.containerQuery = [
+                  ...(originalParent.containerQuery ?? []),
+                ];
+                parent.containerQuery.push(query);
+              }
 
               return parent;
             });
@@ -212,47 +237,63 @@ function parseComponents(
       }
     }
     case "attribute": {
-      // specificity[Specificity.ClassName] =
-      //   (specificity[Specificity.ClassName] ?? 0) + 1;
-      const attributeQuery: AttributeQuery = component.name.startsWith("data-")
-        ? // [data-*] are turned into `dataSet` queries
-          ["d", toRNProperty(component.name.replace("data-", ""))]
-        : // Everything else is turned into `attribute` queries
-          ["a", toRNProperty(component.name)];
-      if (component.operation) {
-        let operator: AttrSelectorOperator | undefined;
-        switch (component.operation.operator) {
-          case "equal":
-            operator = "=";
-            break;
-          case "includes":
-            operator = "~=";
-            break;
-          case "dash-match":
-            operator = "|=";
-            break;
-          case "prefix":
-            operator = "^=";
-            break;
-          case "substring":
-            operator = "*=";
-            break;
-          case "suffix":
-            operator = "$=";
-            break;
-          default:
-            component.operation.operator satisfies never;
-            break;
+      if (component.name === "dir") {
+        if (!component.operation) {
+          return [];
         }
-        if (operator) {
-          // Append the operator onto the attribute query
-          attributeQuery.push(operator, component.operation.value);
+        const operator = operatorMap[component.operation.operator];
+
+        if (operator !== "=") {
+          return [];
         }
+
+        getMediaQuery(ref).push([operator, "dir", component.operation.value]);
+        return parseComponents(rest, options, root, ref, specificity);
+      } else {
+        // specificity[Specificity.ClassName] =
+        //   (specificity[Specificity.ClassName] ?? 0) + 1;
+        const attributeQuery: AttributeQuery = component.name.startsWith(
+          "data-",
+        )
+          ? // [data-*] are turned into `dataSet` queries
+            ["d", toRNProperty(component.name.replace("data-", ""))]
+          : // Everything else is turned into `attribute` queries
+            ["a", toRNProperty(component.name)];
+        if (component.operation) {
+          let operator: AttrSelectorOperator | undefined;
+          switch (component.operation.operator) {
+            case "equal":
+              operator = "=";
+              break;
+            case "includes":
+              operator = "~=";
+              break;
+            case "dash-match":
+              operator = "|=";
+              break;
+            case "prefix":
+              operator = "^=";
+              break;
+            case "substring":
+              operator = "*=";
+              break;
+            case "suffix":
+              operator = "$=";
+              break;
+            default:
+              component.operation.operator satisfies never;
+              break;
+          }
+          if (operator) {
+            // Append the operator onto the attribute query
+            attributeQuery.push(operator, component.operation.value);
+          }
+        }
+        getAttributeQuery(ref).push(attributeQuery);
+        specificity[Specificity.ClassName] =
+          (specificity[Specificity.ClassName] ?? 0) + 1;
+        return parseComponents(rest, options, root, ref, specificity);
       }
-      getAttributeQuery(ref).push(attributeQuery);
-      specificity[Specificity.ClassName] =
-        (specificity[Specificity.ClassName] ?? 0) + 1;
-      return parseComponents(rest, options, root, ref, specificity);
     }
     case "class": {
       if (component.name === options.selectorPrefix) {
@@ -282,7 +323,7 @@ function parseComponents(
           containerQueries.unshift(ref);
         }
 
-        ref.n = ref.n ? `${ref.n}.${component.name}` : component.name;
+        ref.n = ref.n ? `${ref.n}.${component.name}` : `g:${component.name}`;
       }
 
       specificity[Specificity.ClassName] =
@@ -352,6 +393,13 @@ function parseIsWhereComponents(
       //   specificity[Specificity.ClassName] =
       //     (specificity[Specificity.ClassName] ?? 0) + 1;
       switch (component.kind) {
+        case "dir": {
+          queries ??= [{ specificity: [] }];
+          queries.forEach((query) => {
+            getMediaQuery(query).push(["=", "dir", component.direction]);
+          });
+          return parseIsWhereComponents(type, selector, index + 1, queries);
+        }
         case "hover": {
           queries ??= [{ specificity: [] }];
           queries.forEach((query) => {
@@ -389,11 +437,6 @@ function parseIsWhereComponents(
         }
         case "where":
         case "is": {
-          // :is() and :where() need to be at the start of the selector,
-          if (index !== 0) {
-            return null;
-          }
-
           // Now get the selectors inside the `is` or `where` pseudo-class
           queries = component.selectors.flatMap((selector) => {
             return parseIsWhereComponents(type, selector, 0, queries) ?? [];
@@ -407,6 +450,10 @@ function parseIsWhereComponents(
       }
     }
     case "attribute": {
+      if (component.name === "dir") {
+        return null;
+      }
+
       if (type !== "where") {
         // specificity[Specificity.ClassName] =
         //   (specificity[Specificity.ClassName] ?? 0) + 1;
@@ -417,34 +464,9 @@ function parseIsWhereComponents(
         : // Everything else is turned into `attribute` queries
           ["a", toRNProperty(component.name)];
       if (component.operation) {
-        let operator: AttrSelectorOperator | undefined;
-        switch (component.operation.operator) {
-          case "equal":
-            operator = "=";
-            break;
-          case "includes":
-            operator = "~=";
-            break;
-          case "dash-match":
-            operator = "|=";
-            break;
-          case "prefix":
-            operator = "^=";
-            break;
-          case "substring":
-            operator = "*=";
-            break;
-          case "suffix":
-            operator = "$=";
-            break;
-          default:
-            component.operation.operator satisfies never;
-            break;
-        }
-        if (operator) {
-          // Append the operator onto the attribute query
-          attributeQuery.push(operator, component.operation.value);
-        }
+        const operator = operatorMap[component.operation.operator];
+        // Append the operator onto the attribute query
+        attributeQuery.push(operator, component.operation.value);
       }
       queries ??= [{ specificity: [] }];
       for (const query of queries) {
@@ -465,7 +487,9 @@ function parseIsWhereComponents(
             (query.specificity[Specificity.ClassName] ?? 0) + 1;
         }
 
-        query.n = query.n ? `${query.n}.${component.name}` : component.name;
+        query.n = query.n
+          ? `${query.n}.${component.name}`
+          : `g:${component.name}`;
       }
 
       return parseIsWhereComponents(type, selector, index + 1, queries);
@@ -513,12 +537,34 @@ function getAttributeQuery(
   return attributeQuery;
 }
 
+function getMediaQuery(
+  key: PartialSelector | ContainerQuery,
+): MediaCondition[] {
+  let mediaQuery = mediaQueryMap.get(key);
+  if (!mediaQuery) {
+    if ("type" in key) {
+      mediaQuery = [];
+      key.mediaQuery = mediaQuery;
+    } else {
+      mediaQuery = [];
+      key.m ??= ["&", mediaQuery];
+    }
+    mediaQueryMap.set(key, mediaQuery);
+  }
+
+  return mediaQuery;
+}
+
 function isRootVariableSelector([first, second]: Selector) {
   return (
     first && !second && first.type === "pseudo-class" && first.kind === "root"
   );
 }
 
+function isUniversalSelector([first, second]: Selector) {
+  return first && first.type === "universal" && !second;
+}
+
 export function toRNProperty<T extends string>(str: T) {
   return str
     .replace(/^-rn-/, "")
@@ -529,3 +575,12 @@ type CamelCase<S extends string> =
   S extends `${infer P1}-${infer P2}${infer P3}`
     ? `${Lowercase<P1>}${Uppercase<P2>}${CamelCase<P3>}`
     : Lowercase<S>;
+
+const operatorMap: Record<AttrOperation["operator"], AttrSelectorOperator> = {
+  "equal": "=",
+  "includes": "~=",
+  "dash-match": "|=",
+  "prefix": "^=",
+  "substring": "*=",
+  "suffix": "$=",
+};

package/src/compiler/stylesheet.ts

@@ -6,7 +6,7 @@ import {
   specificityCompareFn,
 } from "../runtime/utils";
 import type {
-  AnimationKeyframes_V2,
+  AnimationKeyframes,
   AnimationRecord,
   CompilerOptions,
   ContainerQuery,
@@ -21,6 +21,10 @@ import type {
   VariableRecord,
   VariableValue,
 } from "./compiler.types";
+import {
+  modifyRuleForPlaceholder,
+  modifyRuleForSelection,
+} from "./pseudo-elements";
 import { getClassNameSelectors, toRNProperty } from "./selector-builder";
 
 type BuilderMode = "style" | "media" | "container" | "keyframes";
@@ -35,7 +39,7 @@ const extraRules = new WeakMap<StyleRule, Partial<StyleRule>[]>();
 const keywords = new Set(["unset"]);
 
 export class StylesheetBuilder {
-  animationFrames?: AnimationKeyframes_V2[];
+  animationFrames?: AnimationKeyframes[];
   animationDeclarations: StyleDeclaration[] = [];
 
   stylesheet: ReactNativeCssStyleSheet = {};
@@ -410,22 +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,
-        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 {
+    } else if (typeof propPath === "string") {
       let staticDeclarationRecord = staticDeclarations.get(declarations);
       if (!staticDeclarationRecord) {
         staticDeclarationRecord = {};
@@ -453,7 +456,19 @@ export class StylesheetBuilder {
 
     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 {
@@ -492,7 +507,7 @@ export class StylesheetBuilder {
               continue;
             }
 
-            const [first, ...rest] = name.split(".");
+            const [first, ...rest] = name.slice(2).split(".");
 
             if (typeof first !== "string") {
               continue;

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,8 +2,9 @@ import { Appearance, Dimensions } from "react-native";
 
 import { inspect } from "node:util";
 
-import { compile, type CompilerOptions } from "../compiler";
-import { StyleCollection } from "../runtime/native/injection";
+import { compile, type CompilerOptions } from "react-native-css/compiler";
+import { StyleCollection } from "react-native-css/style-collection";
+
 import { colorScheme, dimensions, rem } from "../runtime/native/reactivity";
 
 declare global {