[WIP] feat: add NativeWind plugin

.npmrc

@@ -1,4 +1,4 @@
 auto-install-peers=false
 link-workspace-packages=true
-package-manager-strict-version=true
+package-manager-strict-version=false
 update-notifier=false

apps/tester-app/.ruby-version

@@ -1 +1 @@
-2.7.6
+system

apps/tester-app/index.js

@@ -1,10 +1,12 @@
 import { Script, ScriptManager } from '@callstack/repack/client';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { AppRegistry } from 'react-native';
 import { name as appName } from './app.json';
 import App from './src/App';
 
-ScriptManager.shared.setStorage(AsyncStorage);
+// if (!__DEV__) {
+//   ScriptManager.shared.setStorage(AsyncStorage);
+// }
+
 ScriptManager.shared.addResolver((scriptId, _caller) => {
   if (__DEV__) {
     return {

apps/tester-app/ios/Podfile.lock

@@ -1,6 +1,6 @@
 PODS:
   - boost (1.84.0)
-  - callstack-repack (5.0.0-rc.4):
+  - callstack-repack (5.0.0-rc.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1266,6 +1266,72 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-safe-area-context (4.14.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - react-native-safe-area-context/common (= 4.14.0)
+    - react-native-safe-area-context/fabric (= 4.14.0)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-safe-area-context/common (4.14.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-safe-area-context/fabric (4.14.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - react-native-safe-area-context/common
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-nativeconfig (0.76.3)
   - React-NativeModulesApple (0.76.3):
     - glog
@@ -1756,6 +1822,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1871,6 +1938,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   React-microtasksnativemodule:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1942,7 +2011,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 1dca942403ed9342f98334bf4c3621f011aa7946
-  callstack-repack: 8972107231b7175b8340e84ca0370aa2c735dcc7
+  callstack-repack: dee6e27f84a4e1e153c9bd63744f02e19527ba5f
   DoubleConversion: f16ae600a246532c4020132d54af21d0ddb2a385
   FBLazyVector: be7314029d6ec6b90f0f75ce1195b8130ed9ac4f
   fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be
@@ -1978,6 +2047,7 @@ SPEC CHECKSUMS:
   React-logger: 26155dc23db5c9038794db915f80bd2044512c2e
   React-Mapbuffer: ad1ba0205205a16dbff11b8ade6d1b3959451658
   React-microtasksnativemodule: e771eb9eb6ace5884ee40a293a0e14a9d7a4343c
+  react-native-safe-area-context: 2500e4fe998caad50ad3bc51ec23ef951308569e
   React-nativeconfig: aeed6e2a8ac02b2df54476afcc7c663416c12bf7
   React-NativeModulesApple: c5b7813da94136f50ef084fa1ac077332dcfc658
   React-perflogger: 6afb7eebf7d9521cc70481688ccddf212970e9d3
@@ -2005,16 +2075,16 @@ SPEC CHECKSUMS:
   React-utils: 2bcaf4f4dfe361344bce2fae428603d518488630
   ReactCodegen: ae99a130606068ed40d1d9c0d5f25fda142a0647
   ReactCommon: 89c87b343deacc8610b099ac764848f0ce937e3e
-  ReactNativeHost: ac28612b0443705f9aa90563ffb9647f5608613c
+  ReactNativeHost: 40da1d9878e16dd3b647d4c31e5afeb0ed84683d
   ReactTestApp-DevSupport: 4aa6f6bc658a2577bcf896c63c411cb375b89d7d
   ReactTestApp-Resources: 8d72c3deef156833760694a288ff334af4d427d7
   RNCAsyncStorage: 3ad840f7b17b45ca7ebbbb0e80948564a9513315
   RNReanimated: 1f9ef2dc2001866fe8da3f3ac78d683252e8872f
   RNSVG: 536cd3c866c878faf72beaba166c8b02fe2b762b
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
-  Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d
+  Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37
 
-PODFILE CHECKSUM: 591811811bdab95f1675c6871b0554706bf77020
+PODFILE CHECKSUM: 6d7cbe03444d5e87210979fb32a0eca299d758fe
 
 COCOAPODS: 1.15.2

apps/tester-app/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

apps/tester-app/package.json

@@ -18,14 +18,19 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.23.1",
+    "nativewind": "^4.1.23",
+    "react-native-css-interop": "^0.1.22",
     "react": "18.3.1",
     "react-native": "0.76.3",
     "react-native-reanimated": "^3.16.3",
-    "react-native-svg": "15.8.0"
+    "react-native-safe-area-context": "^4.14.0",
+    "react-native-svg": "15.8.0",
+    "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@callstack/repack": "workspace:*",
+    "@callstack/repack-plugin-nativewind": "workspace:*",
     "@callstack/repack-plugin-reanimated": "workspace:*",
     "@react-native-community/cli": "15.0.1",
     "@react-native-community/cli-platform-android": "15.0.1",

apps/tester-app/rspack.config.mjs

@@ -2,6 +2,7 @@
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import * as Repack from '@callstack/repack';
+import { NativeWindPlugin } from '@callstack/repack-plugin-nativewind';
 import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 
@@ -73,6 +74,7 @@ export default (env) => {
                 transform: {
                   react: {
                     runtime: 'automatic',
+                    importSource: 'react-native-css-interop',
                   },
                 },
               },
@@ -197,6 +199,13 @@ export default (env) => {
       // }),
       process.env.RSDOCTOR && new RsdoctorRspackPlugin(),
       new ReanimatedPlugin(),
+      new NativeWindPlugin({
+        input: './src/nativewind/global.css',
+      }),
     ].filter(Boolean),
+
+    experiments: {
+      css: true,
+    },
   };
 };

apps/tester-app/src/App.tsx

@@ -1,14 +1,14 @@
 import { Appearance } from 'react-native';
 
-import { AppContainer } from './ui/AppContainer';
-import { Section } from './ui/Section';
-import { SectionContainer } from './ui/SectionContainer';
-
 import { AssetsTestContainer } from './assetsTest/AssetsTestContainer';
 import { AsyncContainer } from './asyncChunks/AsyncContainer';
 import { MiniAppsContainer } from './miniapp/MiniAppsContainer';
+import { NativeWindView } from './nativewind/NativeWindView';
 import { ReanimatedBox } from './reanimated/ReanimatedBox';
 import { RemoteContainer } from './remoteChunks/RemoteContainer';
+import { AppContainer } from './ui/AppContainer';
+import { Section } from './ui/Section';
+import { SectionContainer } from './ui/SectionContainer';
 
 Appearance.setColorScheme('light');
 
@@ -31,6 +31,9 @@ const App = () => {
         <Section title="Reanimated test">
           <ReanimatedBox />
         </Section>
+        <Section title="NativeWind test">
+          <NativeWindView />
+        </Section>
       </SectionContainer>
     </AppContainer>
   );

apps/tester-app/src/nativewind/NativeWindView.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import './global.css';
+
+export function NativeWindView() {
+  return (
+    <View style={styles.container}>
+      <View className="bg-red-500">
+        <Text className="text-white">Hello, World!</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginVertical: 16,
+  },
+});

apps/tester-app/src/nativewind/global.css

@@ -0,0 +1,12 @@
+/* @tailwind base;
+@tailwind components;
+@tailwind utilities; */
+
+
+.bg-red-500 {
+    background-color: #f56565;
+}
+
+.text-white {
+    color: #fff;
+}

apps/tester-app/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {},
+    fontFamily: {
+      mono: ['monospace'],
+    },
+  },
+  plugins: [],
+};

apps/tester-app/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@react-native/typescript-config/tsconfig.json",
   "compilerOptions": {
+    // "jsxImportSource": "nativewind",
     "module": "ES2022" // for dynamic imports & top-level await
   }
 }

apps/tester-federation-v2/ios/Podfile.lock

@@ -1964,7 +1964,7 @@ SPEC CHECKSUMS:
   RNScreens: e389d6a6a66a4f0d3662924ecae803073ccce8ec
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
-  Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d
+  Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37
 
 PODFILE CHECKSUM: a2fe66c9f356ead5b62cb5a645336db60f03a64d
 

packages/plugin-nativewind/CHANGELOG.md

@@ -0,0 +1 @@
+# @callstack/repack-plugin-nativewind