react-native-css 0.0.0-nightly.7bc9102 → 0.0.0-nightly.8a01f75

package/dist/typescript/module/src/utilities/specificity.d.ts

@@ -0,0 +1,13 @@
+import type { SpecificityArray, StyleRule } from "../compiler";
+import type { InlineStyleRecord } from "../runtime.types";
+export declare const Specificity: {
+    Order: number;
+    ClassName: number;
+    Important: number;
+    Inline: number;
+    PseudoElements: number;
+    PseudoClass: number;
+};
+export declare const inlineSpecificity: SpecificityArray;
+export declare const specificityCompareFn: (a: StyleRule | InlineStyleRecord, b: StyleRule | InlineStyleRecord) => number;
+//# sourceMappingURL=specificity.d.ts.map

package/dist/typescript/module/src/utilities/specificity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"specificity.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/specificity.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,eAAO,MAAM,WAAW;;;;;;;CASvB,CAAC;AAQF,eAAO,MAAM,iBAAiB,EAAE,gBAAqB,CAAC;AAGtD,eAAO,MAAM,oBAAoB,GAC/B,GAAG,SAAS,GAAG,iBAAiB,EAChC,GAAG,SAAS,GAAG,iBAAiB,WAkBjC,CAAC"}

package/dist/typescript/module/src/utilities/style-descriptor.d.ts

@@ -0,0 +1,4 @@
+import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
+export declare function isStyleDescriptorArray(value: unknown): value is StyleDescriptor[];
+export declare function isStyleFunction(value: StyleDescriptor): value is StyleFunction;
+//# sourceMappingURL=style-descriptor.d.ts.map

package/dist/typescript/module/src/utilities/style-descriptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-descriptor.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/style-descriptor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEhF,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,OAAO,GACb,KAAK,IAAI,eAAe,EAAE,CAO5B;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,eAAe,GACrB,KAAK,IAAI,aAAa,CAQxB"}

package/dist/typescript/module/src/web/api.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentPropsWithRef, type PropsWithChildren } from "react";
+import type { ColorScheme, Props, StyledConfiguration, StyledOptions, StyledProps } from "react-native-css";
+import type { ReactComponent } from "../runtime.types";
+export declare const styled: <const C extends ReactComponent, const M extends StyledConfiguration<C>>(baseComponent: C, mapping?: M, _options?: StyledOptions) => (props: StyledProps<ComponentPropsWithRef<C>, M>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const useCssElement: <C extends ReactComponent>(component: C, incomingProps: Props, mapping: StyledConfiguration<C>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const colorScheme: ColorScheme;
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
+export declare function vars(variables: Record<string, string | number>): Record<string, string>;
+export declare function VariableContextProvider(props: PropsWithChildren<{
+    value: Record<`--${string}`, string | number>;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare const useNativeVariable: () => never;
+export declare const useUnstableNativeVariable: () => never;
+//# sourceMappingURL=api.d.ts.map

package/dist/typescript/module/src/web/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../src/web/api.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE1B,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,WAAW,EACX,KAAK,EACL,mBAAmB,EACnB,aAAa,EACb,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOvD,eAAO,MAAM,MAAM,GACjB,KAAK,CAAC,CAAC,SAAS,cAAc,EAC9B,KAAK,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAEtC,eAAe,CAAC,EAChB,UAAS,CAAuB,EAChC,WAAW,aAAa,MAEhB,OAAO,WAAW,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,2FAGxD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,cAAc,EACpD,WAAW,CAAC,EACZ,eAAe,KAAK,EACpB,SAAS,mBAAmB,CAAC,CAAC,CAAC,2FA4BhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAOzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,0BAW9D;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;CAAE,CAAC,2CAe5E;AAED,eAAO,MAAM,iBAAiB,aAE7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAErC,CAAC"}

package/dist/typescript/module/src/web/assign-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assign-style.d.ts","sourceRoot":"","sources":["../../../../../src/web/assign-style.ts"],"names":[],"mappings":"AACA,wBAAgB,WAAW,CACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EAAE,EACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAqB3B"}

package/dist/typescript/module/src/web/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/web/index.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,CAAC;AAEjB,mBAAmB,kBAAkB,CAAC;AACtC,cAAc,OAAO,CAAC"}

package/dist/typescript/module/src/web/metro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metro.d.ts","sourceRoot":"","sources":["../../../../../src/web/metro.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-css",
-  "version": "0.0.0-nightly.7bc9102",
+  "version": "0.0.0-nightly.8a01f75",
   "description": "A CSS polyfill for React Native",
   "exports": {
     ".": {
@@ -14,40 +14,49 @@
         "default": "./dist/commonjs/index.js"
       }
     },
-    "./types": {
-      "types": "./types.d.ts"
+    "./compiler": {
+      "source": "./src/compiler/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/compiler/index.d.ts",
+        "default": "./dist/module/compiler/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/compiler/index.d.ts",
+        "default": "./dist/commonjs/compiler/index.js"
+      }
     },
-    "./style-collection": {
-      "source": "./src/runtime/native/style-collection/index.ts",
+    "./babel": {
+      "source": "./src/babel/index.ts",
       "import": {
-        "types": "./dist/typescript/module/src/style-collection/index.d.ts",
-        "default": "./dist/module/style-collection/index.js"
+        "types": "./dist/typescript/module/src/babel/index.d.ts",
+        "default": "./dist/module/babel/index.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/style-collection/index.d.ts",
-        "default": "./dist/commonjs/style-collection/index.js"
+        "types": "./dist/typescript/commonjs/src/babel/index.d.ts",
+        "default": "./dist/commonjs/babel/index.js"
       }
     },
-    "./metro": {
-      "source": "./src/metro/index.ts",
+    "./components": {
+      "source": "./src/components/index.cts",
       "import": {
-        "types": "./dist/typescript/module/src/metro/index.d.ts",
-        "default": "./dist/module/metro/index.js"
+        "default": "./dist/module/components/index.cjs",
+        "types": "./dist/typescript/module/src/components/index.d.ts"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
-        "default": "./dist/commonjs/metro/index.js"
+        "default": "./dist/commonjs/components/index.cjs",
+        "types": "./dist/typescript/commonjs/src/components/index.d.ts"
       }
     },
-    "./compiler": {
-      "source": "./src/compiler/index.ts",
+    "./components/*": {
+      "source": "./src/components/*.tsx",
+      "react-native": "./src/components/*.tsx",
       "import": {
-        "types": "./dist/typescript/module/src/compiler/index.d.ts",
-        "default": "./dist/module/compiler/index.js"
+        "types": "./dist/typescript/module/src/components/*.d.ts",
+        "default": "./dist/module/components/*.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/compiler/index.d.ts",
-        "default": "./dist/commonjs/compiler/index.js"
+        "types": "./dist/typescript/commonjs/src/components/*.d.ts",
+        "default": "./dist/commonjs/components/*.js"
       }
     },
     "./jest": {
@@ -62,49 +71,73 @@
         "default": "./dist/commonjs/jest/index.js"
       }
     },
-    "./babel": {
-      "source": "./src/babel/index.ts",
+    "./metro": {
+      "source": "./src/metro/index.ts",
       "import": {
-        "types": "./dist/typescript/module/src/babel/index.d.ts",
-        "default": "./dist/module/babel/index.js"
+        "types": "./dist/typescript/module/src/metro/index.d.ts",
+        "default": "./dist/module/metro/index.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/babel/index.d.ts",
-        "default": "./dist/commonjs/babel/index.js"
+        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
+        "default": "./dist/commonjs/metro/index.js"
       }
     },
-    "./components": {
-      "source": "./src/components/index.ts",
-      "react-native": "./src/components/index.tsx",
+    "./native": {
+      "source": "./src/native/index.ts",
       "import": {
-        "types": "./dist/typescript/module/src/components/index.d.ts",
-        "default": "./dist/module/components/index.js"
+        "types": "./dist/typescript/module/src/native/index.d.ts",
+        "default": "./dist/module/native/index.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/components/index.d.ts",
-        "default": "./dist/commonjs/components/index.js"
+        "types": "./dist/typescript/commonjs/src/native/index.d.ts",
+        "default": "./dist/commonjs/native/index.js"
       }
     },
-    "./components/*": {
-      "source": "./src/components/*.ts",
-      "react-native": "./src/components/*.tsx",
+    "./native-internal": {
+      "source": "./src/native-internal/index.ts",
       "import": {
-        "types": "./dist/typescript/module/src/components/*.d.ts",
-        "default": "./dist/module/components/*.js"
+        "types": "./dist/typescript/module/src/native-internal/index.d.ts",
+        "default": "./dist/module/native-internal/index.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/components/*.d.ts",
-        "default": "./dist/commonjs/components/*.js"
+        "types": "./dist/typescript/commonjs/src/native-internal/index.d.ts",
+        "default": "./dist/commonjs/native-internal/index.js"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./types": {
+      "types": "./types.d.ts"
+    },
+    "./utilities": {
+      "source": "./src/utilities/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/utilities/index.d.ts",
+        "default": "./dist/module/utilities/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/utilities/index.d.ts",
+        "default": "./dist/commonjs/utilities/index.js"
+      }
+    },
+    "./web": {
+      "source": "./src/web/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/web/index.d.ts",
+        "default": "./dist/module/web/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/web/index.d.ts",
+        "default": "./dist/commonjs/web/index.js"
+      }
+    }
   },
   "main": "./dist/commonjs/index.js",
   "module": "./dist/module/index.js",
   "types": "./dist/typescript/commonjs/src/index.d.ts",
   "workspaces": [
     "example",
-    "configs"
+    "configs",
+    "."
   ],
   "scripts": {
     "build": "bob build",
@@ -152,56 +185,54 @@
     "!**/__mocks__"
   ],
   "dependencies": {
-    "@expo/metro-runtime": "~6.1.1",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "colorjs.io": "0.6.0-alpha.1",
     "comment-json": "^4.2.5",
     "debug": "^4.4.1"
   },
   "peerDependencies": {
-    "expo": "54.0.0-preview.6",
+    "@expo/metro-config": ">=54",
     "lightningcss": ">=1.27.0",
-    "react": "19.1.0",
-    "react-native": "0.81.0"
+    "react": ">=19",
+    "react-native": ">=0.81"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.30.1",
+    "@expo/metro-config": "~54.0.5",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
     "@tailwindcss/postcss": "^4.1.12",
     "@testing-library/react-native": "^13.3.3",
     "@tsconfig/react-native": "^3.0.6",
     "@types/babel__core": "^7",
-    "@types/connect": "^3.4.38",
     "@types/debug": "^4.1.12",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.1.10",
-    "@types/react-refresh": "^0",
     "@types/react-test-renderer": "^19",
     "babel-plugin-tester": "^12.0.0",
-    "babel-preset-expo": "14.0.2",
-    "commitlint": "^19.8.1",
+    "babel-preset-expo": "~54.0.3",
+    "commitlint": "^20.0.0",
     "eas-build-cache-provider": "^16.4.2",
     "eslint": "^9.30.1",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.1",
-    "expo": "54.0.0-preview.6",
+    "expo": "54.0.10",
     "jest": "^29.7.0",
-    "jest-expo": "54.0.2",
-    "lefthook": "^1.12.2",
+    "jest-expo": "~54.0.12",
+    "lefthook": "^1.12.3",
     "lightningcss": "^1.30.1",
     "metro-runtime": "^0.83.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "react": "19.1.0",
-    "react-native": "0.81.0",
+    "react-native": "0.81.4",
     "react-native-builder-bob": "^0.40.13",
-    "react-native-reanimated": "4.0.2",
+    "react-native-reanimated": "~4.1.0",
     "react-native-safe-area-context": "5.6.1",
-    "react-native-worklets": "0.4.1",
+    "react-native-worklets": "~0.5.0",
     "react-refresh": "^0.17.0",
-    "react-test-renderer": "^19.1.0",
+    "react-test-renderer": "19.1.0",
     "release-it": "^19.0.4",
     "tailwindcss": "^4.1.12",
     "tailwindcss-safe-area": "^1.1.0",

package/src/babel/index.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
-module.exports = function () {
+export default function () {
   return {
     plugins: [
       require("./import-plugin").default,
       "react-native-worklets/plugin",
     ],
   };
-};
+}

package/src/compiler/atRules.ts

@@ -37,45 +37,21 @@ export interface ReactNativeAtRule {
 
 export function maybeMutateReactNativeOptions(
   rule: Rule | ReactNativeAtRule,
-  builder: StylesheetBuilder,
+  _builder: StylesheetBuilder,
 ) {
   if (rule.type !== "custom" || rule.value?.name !== "react-native") {
     return;
   }
 
-  const { declarations } = rule.value.body.value;
-  if (!declarations) return;
-
-  for (const declaration of declarations) {
-    if (declaration.property !== "custom") continue;
-
-    switch (declaration.value.name) {
-      case "preserve-variables": {
-        declaration.value.value.forEach((token) => {
-          if (token.type !== "dashed-ident") {
-            return;
-          }
-
-          if (token.value !== "true" && token.value !== "false") {
-            return;
-          }
-
-          builder.setOptions("preserveVariables", token.value === "true");
-        });
-        break;
-      }
-      default:
-        break;
-    }
-  }
+  // TODO: Add inline options
 }
 
 /***********************************************
- * @prop                                       *
+ * @nativeMapping                                       *
  ***********************************************/
 
-function isPropAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
-  return rule.type === "unknown" && rule.value.name === "prop";
+function isNativeMappingAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
+  return rule.type === "unknown" && rule.value.name === "nativeMapping";
 }
 
 export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
@@ -88,19 +64,21 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
     "-webkit-line-clamp": ["numberOfLines"],
     "-rn-ripple-color": ["android_ripple", "color"],
     "-rn-ripple-style": ["android_ripple", "borderless"],
+    "-rn-ripple-radius": ["android_ripple", "radius"],
+    "-rn-ripple-layer": ["android_ripple", "foreground"],
   };
 
   if (!rules) return mapping;
 
   for (const rule of rules) {
-    if (!isPropAtRule(rule)) continue;
+    if (!isNativeMappingAtRule(rule)) continue;
 
     if (rule.value.prelude.length > 0) {
       const prelude = rule.value.prelude.filter((item) => {
         return item.value.type !== "white-space";
       });
 
-      propAtRuleBlock(prelude, mapping);
+      nativeMappingAtRuleBlock(prelude, mapping);
     } else if (rule.value.block) {
       // Remove all whitespace tokens
       const blocks = rule.value.block.filter((item) => {
@@ -113,7 +91,7 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
       });
 
       for (const block of blockRules) {
-        propAtRuleBlock(block, mapping);
+        nativeMappingAtRuleBlock(block, mapping);
       }
     }
   }
@@ -121,38 +99,51 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   return mapping;
 }
 
-function propAtRuleBlock(
+function nativeMappingAtRuleBlock(
   token: Extract<TokenOrValue, { type: "token" }>[],
   mapping: StyleRuleMapping = {},
 ): StyleRuleMapping {
-  const [from, to] = splitByDelimiter(token, (item) => {
+  let [from, to] = splitByDelimiter(token, (item) => {
     return item.value.type === "colon";
   });
 
-  if (!from || from.length !== 1) {
-    return mapping;
+  // @nativeMapping <to>; (has no from value)
+  if (!to) {
+    to = from;
+    from = [
+      {
+        type: "token",
+        value: { type: "ident", value: "*" },
+      },
+    ];
   }
 
-  const fromToken = from[0];
-  if (!fromToken || fromToken.value.type !== "ident") {
+  // We can only map from a single property
+  if (!from || from.length !== 1 || !to) {
     return mapping;
   }
 
-  if (!to) {
-    mapping["*"] = toRNProperty(fromToken.value.value);
+  const fromToken = from[0];
+  if (!fromToken || fromToken.value.type !== "ident") {
     return mapping;
   }
 
-  mapping[toRNProperty(fromToken.value.value)] = to.flatMap((item, index) => {
+  let value: string | string[] = to.flatMap((item, index) => {
     switch (item.value.type) {
       case "delim":
-        return index === 0 && item.value.value === "*" ? ["*"] : [];
+        return index === 0 && item.value.value === "&" ? ["&"] : [];
       case "ident":
-        return [toRNProperty(item.value.value)];
+        return item.value.value.split(".").map((part) => toRNProperty(part));
       default:
         return [];
     }
   });
 
+  if (value.length === 2 && value[0] === "&" && value[1]) {
+    value = value[1];
+  }
+
+  mapping[toRNProperty(fromToken.value.value)] = value;
+
   return mapping;
 }