Skip to content

Commit 6c1b223

Browse files
committed
chore: upgrade to SDK 54 (2nd)
1 parent a50d7d1 commit 6c1b223

File tree

14 files changed

+226
-509
lines changed

14 files changed

+226
-509
lines changed

babel.config.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

example/app.config.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export default ({ config }: ConfigContext): ExpoConfig => {
55
...config,
66
name: "example",
77
slug: "example",
8-
plugins: ["expo-dev-client"],
98
userInterfaceStyle: "automatic",
109
android: {
1110
package: "dev.reactnativecss",

example/babel.config.js

Lines changed: 0 additions & 16 deletions
This file was deleted.

example/metro.config.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const path = require("path");
22
const { getDefaultConfig } = require("@expo/metro-config");
3-
const { withReactNativeCSS } = require("react-native-css/metro");
3+
// const { withReactNativeCSS } = require("react-native-css/metro");
44

55
/**
66
* Metro configuration
@@ -10,15 +10,15 @@ const { withReactNativeCSS } = require("react-native-css/metro");
1010
*/
1111
const config = getDefaultConfig(__dirname);
1212

13-
config.resolver.unstable_enablePackageExports = true;
14-
1513
config.resolver.nodeModulesPaths = [
1614
path.resolve(__dirname, "node_modules"),
1715
path.resolve(__dirname, "../node_modules"),
1816
];
1917

2018
config.watchFolders = [path.resolve(__dirname, "../")];
2119

22-
module.exports = withReactNativeCSS(config, {
23-
globalClassNamePolyfill: true,
24-
});
20+
module.exports = config;
21+
22+
// module.exports = withReactNativeCSS(config, {
23+
// globalClassNamePolyfill: false,
24+
// });

example/package.json

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,16 @@
1111
"web": "expo start --web"
1212
},
1313
"dependencies": {
14-
"@expo/metro-runtime": "~6.1.1",
1514
"@tailwindcss/postcss": "^4.1.11",
16-
"expo": "54.0.0-preview.16",
17-
"expo-dev-client": "~6.0.10",
15+
"expo": "54.0.1",
1816
"expo-status-bar": "~3.0.7",
19-
"expo-system-ui": "6.0.6",
2017
"react": "19.1.0",
2118
"react-dom": "19.1.0",
22-
"react-native": "0.81.1",
19+
"react-native": "0.81.4",
2320
"react-native-css": "link:../",
2421
"react-native-reanimated": "~4.1.0",
2522
"react-native-web": "~0.21.1",
26-
"react-native-worklets": "~0.5.0",
27-
"react-refresh": "^0.17.0"
28-
},
29-
"devDependencies": {
30-
"@babel/core": "^7.20.0",
31-
"react-native-builder-bob": "^0.40.13",
32-
"react-native-monorepo-config": "^0.1.9"
23+
"react-native-worklets": "~0.5.0"
3324
},
3425
"private": true
3526
}

example/src/App.tsx

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
import { View as RNView } from "react-native";
1+
import { StyleSheet, Text } from "react-native";
22

3-
import { styled, VariableContextProvider } from "react-native-css";
4-
import { View } from "react-native-css/components";
5-
6-
import "../global.css";
7-
8-
const CustomView = styled(RNView, { className: "style" });
3+
import { StatusBar } from "expo-status-bar";
4+
import { View } from "react-native-css/components/View";
95

106
export default function App() {
117
return (
12-
<View className="flex-1 items-center justify-center">
13-
<VariableContextProvider
14-
value={{
15-
"--custom": "pink",
16-
}}
17-
>
18-
<View className="bg-[var(--custom,green)] w-10 h-10" />
19-
20-
<CustomView className="bg-[var(--custom,purple)] w-10 h-10" />
21-
</VariableContextProvider>
8+
<View style={styles.container}>
9+
<Text>Hello world!!</Text>
10+
<StatusBar style="auto" />
2211
</View>
2312
);
2413
}
14+
15+
const styles = StyleSheet.create({
16+
container: {
17+
flex: 1,
18+
backgroundColor: "#fff",
19+
alignItems: "center",
20+
justifyContent: "center",
21+
},
22+
});

package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@
200200
"@babel/core": "^7.28.0",
201201
"@commitlint/config-conventional": "^19.8.1",
202202
"@eslint/js": "^9.30.1",
203-
"@expo/metro-config": "~0.21.11",
203+
"@expo/metro-config": "~54.0.0",
204204
"@ianvs/prettier-plugin-sort-imports": "^4.4.2",
205205
"@tailwindcss/postcss": "^4.1.12",
206206
"@testing-library/react-native": "^13.3.3",
@@ -211,22 +211,22 @@
211211
"@types/react": "^19.1.10",
212212
"@types/react-test-renderer": "^19",
213213
"babel-plugin-tester": "^12.0.0",
214-
"babel-preset-expo": "~14.0.6",
214+
"babel-preset-expo": "~54.0.0",
215215
"commitlint": "^19.8.1",
216216
"eas-build-cache-provider": "^16.4.2",
217217
"eslint": "^9.30.1",
218218
"eslint-config-prettier": "^10.1.5",
219219
"eslint-plugin-prettier": "^5.5.1",
220-
"expo": "54.0.0-preview.16",
220+
"expo": "54.0.1",
221221
"jest": "^29.7.0",
222-
"jest-expo": "~54.0.8",
222+
"jest-expo": "~54.0.10",
223223
"lefthook": "^1.12.3",
224224
"lightningcss": "^1.30.1",
225225
"metro-runtime": "^0.83.0",
226226
"postcss": "^8.5.6",
227227
"prettier": "^3.6.2",
228228
"react": "19.1.0",
229-
"react-native": "0.81.1",
229+
"react-native": "0.81.4",
230230
"react-native-builder-bob": "^0.40.13",
231231
"react-native-reanimated": "~4.1.0",
232232
"react-native-safe-area-context": "5.6.1",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ test("@prop target (nested @media)", () => {
2525
{
2626
d: [["#00f", ["test"]]],
2727
v: [["__rn-css-color", "#00f"]],
28-
s: [3, 1],
28+
s: [2, 1],
2929
},
3030
],
3131
],

src/__tests__/compiler/compiler.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,7 @@ test("media query nested in rules", () => {
359359
},
360360
],
361361
m: [[">=", "width", 600]],
362-
s: [3, 1],
362+
s: [2, 1],
363363
v: [["__rn-css-color", "#00f"]],
364364
},
365365
{
@@ -368,12 +368,12 @@ test("media query nested in rules", () => {
368368
[">=", "width", 600],
369369
[">=", "width", 400],
370370
],
371-
s: [5, 1],
371+
s: [3, 1],
372372
},
373373
{
374374
d: [{ backgroundColor: "#ff0" }],
375375
m: [[">=", "width", 100]],
376-
s: [7, 1],
376+
s: [4, 1],
377377
},
378378
],
379379
],

src/compiler/compiler.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,15 +212,15 @@ function extractRule(
212212
const declarationBlock = value.declarations;
213213
if (declarationBlock) {
214214
if (declarationBlock.declarations?.length) {
215-
builder.newNestedRule();
215+
builder.newNestedRule({ mapping });
216216
for (const declaration of declarationBlock.declarations) {
217217
parseDeclaration(declaration, builder);
218218
}
219219
builder.applyRuleToSelectors();
220220
}
221221

222222
if (declarationBlock.importantDeclarations?.length) {
223-
builder.newNestedRule({ important: true });
223+
builder.newNestedRule({ mapping, important: true });
224224
for (const declaration of declarationBlock.importantDeclarations) {
225225
parseDeclaration(declaration, builder);
226226
}

0 commit comments

Comments
 (0)