[WIP] feat: add NativeWind plugin

borisyankov · borisyankov · commit 1a312104de6f · 2024-12-28T20:19:30.000+02:00
diff --git a/.npmrc b/.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
diff --git a/apps/tester-app/.ruby-version b/apps/tester-app/.ruby-version
@@ -1 +1 @@
-2.7.6
+system
diff --git a/apps/tester-app/index.js b/apps/tester-app/index.js
@@ -4,7 +4,10 @@ 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 {
diff --git a/apps/tester-app/ios/Podfile.lock b/apps/tester-app/ios/Podfile.lock
@@ -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:
@@ -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
@@ -2013,8 +2083,8 @@ SPEC CHECKSUMS:
   RNSVG: 536cd3c866c878faf72beaba166c8b02fe2b762b
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
-  Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d
+  Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37
 
 PODFILE CHECKSUM: 591811811bdab95f1675c6871b0554706bf77020
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2
diff --git a/apps/tester-app/nativewind-env.d.ts b/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.
diff --git a/apps/tester-app/package.json b/apps/tester-app/package.json
@@ -18,14 +18,18 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.23.1",
+    "nativewind": "^4.1.23",
     "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",
diff --git a/apps/tester-app/rspack.config.mjs b/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,
+    },
   };
 };
diff --git a/apps/tester-app/src/App.tsx b/apps/tester-app/src/App.tsx
@@ -1,18 +1,20 @@
 import { Appearance } from 'react-native';
 
-import { AppContainer } from './ui/AppContainer';
-import { Section } from './ui/Section';
-import { SectionContainer } from './ui/SectionContainer';
-
+import { verifyInstallation } from 'nativewind';
 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');
 
 const App = () => {
+  verifyInstallation();
   return (
     <AppContainer>
       <SectionContainer>
@@ -31,6 +33,9 @@ const App = () => {
         <Section title="Reanimated test">
           <ReanimatedBox />
         </Section>
+        <Section title="NativeWind test">
+          <NativeWindView />
+        </Section>
       </SectionContainer>
     </AppContainer>
   );
diff --git a/apps/tester-app/src/nativewind/NativeWindView.tsx b/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,
+  },
+});
diff --git a/apps/tester-app/src/nativewind/global.css b/apps/tester-app/src/nativewind/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/tester-app/tailwind.config.js b/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: [],
+};
diff --git a/apps/tester-app/tsconfig.json b/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
   }
 }
diff --git a/apps/tester-federation-v2/ios/Podfile.lock b/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
 
diff --git a/packages/plugin-nativewind/CHANGELOG.md b/packages/plugin-nativewind/CHANGELOG.md
@@ -0,0 +1 @@
+# @callstack/repack-plugin-nativewind
diff --git a/packages/plugin-nativewind/README.md b/packages/plugin-nativewind/README.md
@@ -0,0 +1,102 @@
+<p align="center">
+    <img src="https://raw.githubusercontent.com/callstack/repack/HEAD/logo.png">
+</p>
+<p align="center">
+A toolkit to build your React Native application with Rspack or Webpack.
+</p>
+
+---
+
+[![Build Status][build-badge]][build]
+[![Version][version-badge]][version]
+[![MIT License][license-badge]][license]
+[![PRs Welcome][prs-welcome-badge]][prs-welcome]
+[![Code of Conduct][coc-badge]][coc]
+
+`@callstack/repack-plugin-nativewind` is a plugin for `@callstack/repack` that integrates [NativeWind](https://github.com/nativewind/nativewind) into your React Native projects.
+
+## About
+
+Use NativeWind in Re.Pack projects.
+
+## Installation
+
+```sh
+npm install -D @callstack/repack-plugin-nativewind
+```
+
+## Usage
+
+### Plugin
+
+To add the plugin to your Re.Pack configuration follow this guide: https://www.nativewind.dev/getting-started/react-native
+
+- Follow step 1, 2, and 5 (and optionally 7)
+- At step 3 and 4, instead of editing `babel.config.js` (which is not used) or changing Metro config (again, not used) update your `rspack.config.js` or `webpack.config.js` as follows:
+
+```js
+import { NativeWindPlugin } from "@callstack/repack-plugin-nativewind";
+
+export default (env) => {
+  // ...
+  return {
+    // ...
+    plugins: [
+      // ...
+      new NativeWindPlugin({
+        input: "./global.css",
+      }),
+    ],
+  };
+};
+```
+
+### Loader
+
+The plugin also comes with it's own loader, which you can use on it's own inside `rspack.config.js` or `webpack.config.js` like this:
+
+```js
+export default (env) => {
+  // ...
+  return {
+    // ...
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          use: {
+            loader: "@callstack/repack-plugin-nativewind/loader",
+            options: {
+              babelPlugins: [
+                [
+                  "@babel/plugin-syntax-typescript",
+                  { isTSX: false, allowNamespaces: true },
+                ],
+                "nativewind/babel",
+              ],
+            },
+          },
+        },
+      ],
+    },
+  };
+};
+```
+
+---
+
+Check out our website at https://re-pack.dev for more info and documentation or our GitHub: https://github.com/callstack/repack.
+
+<!-- badges -->
+
+[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=react-native-paper&utm_term=readme-with-love
+[build-badge]: https://img.shields.io/github/workflow/status/callstack/repack/CI/main?style=flat-square
+[build]: https://github.com/callstack/repack/actions/workflows/main.yml
+[version-badge]: https://img.shields.io/npm/v/@callstack/repack-plugin-nativewind?style=flat-square
+[version]: https://www.npmjs.com/package/@callstack/repack-plugin-nativewind
+[license-badge]: https://img.shields.io/npm/l/@callstack/repack-plugin-nativewind?style=flat-square
+[license]: https://github.com/callstack/repack/blob/master/LICENSE
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs-welcome]: ./CONTRIBUTING.md
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/callstack/repack/blob/master/CODE_OF_CONDUCT.md
diff --git a/packages/plugin-nativewind/loader/index.d.ts b/packages/plugin-nativewind/loader/index.d.ts
@@ -0,0 +1 @@
+export * from '../dist/loader.js';
diff --git a/packages/plugin-nativewind/loader/index.js b/packages/plugin-nativewind/loader/index.js
@@ -0,0 +1 @@
+module.exports = require('../dist/loader.js');
diff --git a/packages/plugin-nativewind/package.json b/packages/plugin-nativewind/package.json
diff --git a/packages/plugin-nativewind/src/index.ts b/packages/plugin-nativewind/src/index.ts
diff --git a/packages/plugin-nativewind/src/loader.ts b/packages/plugin-nativewind/src/loader.ts
diff --git a/packages/plugin-nativewind/src/plugin.ts b/packages/plugin-nativewind/src/plugin.ts
diff --git a/packages/plugin-nativewind/src/rules.ts b/packages/plugin-nativewind/src/rules.ts
diff --git a/packages/plugin-nativewind/tsconfig.build.json b/packages/plugin-nativewind/tsconfig.build.json
diff --git a/packages/plugin-nativewind/tsconfig.json b/packages/plugin-nativewind/tsconfig.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/// <reference types="nativewind/types" />`
	`2`	`+`
	`3`	`+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`