react-native-css 0.0.0-nightly.61d67fe → 0.0.0-nightly.7da12fa

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-css",
-  "version": "0.0.0-nightly.61d67fe",
-  "description": "A CSS polyfill for React Native",
+  "version": "0.0.0-nightly.7da12fa",
+  "description": "Use CSS stylesheets in React Native",
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -14,40 +14,61 @@
         "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/react-native-safe-area-context": {
+      "source": "./src/components/react-native-safe-area-context.native.tsx",
+      "react-native": "./src/components/react-native-safe-area-context.native.tsx",
       "import": {
-        "types": "./dist/typescript/module/src/compiler/index.d.ts",
-        "default": "./dist/module/compiler/index.js"
+        "types": "./dist/typescript/module/src/components/react-native-safe-area-context.d.ts",
+        "default": "./dist/module/components/react-native-safe-area-context.js"
       },
       "require": {
-        "types": "./dist/typescript/commonjs/src/compiler/index.d.ts",
-        "default": "./dist/commonjs/compiler/index.js"
+        "types": "./dist/typescript/commonjs/src/components/react-native-safe-area-context.d.ts",
+        "default": "./dist/commonjs/components/react-native-safe-area-context.js"
+      }
+    },
+    "./components/*": {
+      "source": "./src/components/*.tsx",
+      "react-native": "./src/components/*.tsx",
+      "import": {
+        "types": "./dist/typescript/module/src/components/*.d.ts",
+        "default": "./dist/module/components/*.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/components/*.d.ts",
+        "default": "./dist/commonjs/components/*.js"
       }
     },
     "./jest": {
@@ -62,49 +83,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 +197,55 @@
     "!**/__mocks__"
   ],
   "dependencies": {
-    "@expo/metro-runtime": "~6.1.1",
+    "@types/debug": "^4.1.12",
     "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",
+    "@release-it/conventional-changelog": "10.0.1",
     "@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;
 }