chore: upgrade to SDK 54 (#184)

Author: marklawlor

example/package.json

@@ -13,17 +13,17 @@
   "dependencies": {
     "@expo/metro-runtime": "~6.1.1",
     "@tailwindcss/postcss": "^4.1.11",
-    "expo": "54.0.0-preview.16",
-    "expo-dev-client": "~6.0.10",
+    "expo": "54.0.0",
+    "expo-dev-client": "~6.0.11",
     "expo-status-bar": "~3.0.7",
-    "expo-system-ui": "6.0.6",
+    "expo-system-ui": "~6.0.7",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-native": "0.81.1",
+    "react-native": "0.81.4",
     "react-native-css": "link:../",
     "react-native-reanimated": "~4.1.0",
     "react-native-web": "~0.21.1",
-    "react-native-worklets": "~0.5.0",
+    "react-native-worklets": "0.5.0",
     "react-refresh": "^0.17.0"
   },
   "devDependencies": {

package.json

@@ -192,15 +192,13 @@
     "debug": "^4.4.1"
   },
   "peerDependencies": {
-    "@expo/metro-config": ">=0.21.8",
-    "react": "19.1.0",
-    "react-native": "0.81.1"
+    "@expo/metro-config": ">=0.21.8"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.30.1",
-    "@expo/metro-config": "~0.21.11",
+    "@expo/metro-config": "~54.0.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
     "@tailwindcss/postcss": "^4.1.12",
     "@testing-library/react-native": "^13.3.3",
@@ -211,26 +209,26 @@
     "@types/react": "^19.1.10",
     "@types/react-test-renderer": "^19",
     "babel-plugin-tester": "^12.0.0",
-    "babel-preset-expo": "~14.0.6",
+    "babel-preset-expo": "~54.0.0",
     "commitlint": "^19.8.1",
     "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.16",
+    "expo": "54.0.0",
     "jest": "^29.7.0",
-    "jest-expo": "~54.0.8",
+    "jest-expo": "~54.0.9",
     "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.1",
+    "react-native": "0.81.4",
     "react-native-builder-bob": "^0.40.13",
     "react-native-reanimated": "~4.1.0",
     "react-native-safe-area-context": "5.6.1",
-    "react-native-worklets": "~0.5.0",
+    "react-native-worklets": "0.5.0",
     "react-refresh": "^0.17.0",
     "react-test-renderer": "19.1.0",
     "release-it": "^19.0.4",

src/__tests__/compiler/@prop.test.tsx

@@ -25,7 +25,7 @@ test("@prop target (nested @media)", () => {
           {
             d: [["#00f", ["test"]]],
             v: [["__rn-css-color", "#00f"]],
-            s: [3, 1],
+            s: [2, 1],
           },
         ],
       ],

src/__tests__/compiler/compiler.test.tsx

@@ -359,7 +359,7 @@ test("media query nested in rules", () => {
               },
             ],
             m: [[">=", "width", 600]],
-            s: [3, 1],
+            s: [2, 1],
             v: [["__rn-css-color", "#00f"]],
           },
           {
@@ -368,12 +368,12 @@ test("media query nested in rules", () => {
               [">=", "width", 600],
               [">=", "width", 400],
             ],
-            s: [5, 1],
+            s: [3, 1],
           },
           {
             d: [{ backgroundColor: "#ff0" }],
             m: [[">=", "width", 100]],
-            s: [7, 1],
+            s: [4, 1],
           },
         ],
       ],

src/compiler/compiler.ts

@@ -236,7 +236,7 @@ function extractRule(
       mapping = { ...mapping, ...parsePropAtRule(value.rules) };
 
       // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
-      builder = builder.fork("style", value.selectors);
+      builder = builder.fork("style", value.selectors, mapping);
 
       if (declarationBlock) {
         if (declarationBlock.declarations?.length) {

src/compiler/stylesheet.ts

@@ -81,7 +81,11 @@ export class StylesheetBuilder {
     private selectors: SelectorList = [],
   ) {}
 
-  fork(mode = this.mode, selectors: SelectorList = []): StylesheetBuilder {
+  fork(
+    mode = this.mode,
+    selectors: SelectorList = [],
+    mapping: StyleRuleMapping = {},
+  ): StylesheetBuilder {
     this.shared.ruleOrder++;
 
     /**
@@ -101,7 +105,7 @@ export class StylesheetBuilder {
       this.options,
       mode,
       this.cloneRule(),
-      { ...this.mapping },
+      { ...this.mapping, ...mapping },
       this.descriptorProperty,
       this.shared,
       selectors,