upgrade to nativewind@4

.gitignore

@@ -117,3 +117,6 @@ artifacts/
 
 # Rubocop cache
 **/tmp/rubocop_cache
+
+# Compiled tailwind CSS for jest (tests/jest.globalSetup.js)
+tests/.cache/

babel.config.js

@@ -1,11 +1,10 @@
 module.exports = {
-  presets: ["module:@react-native/babel-preset"],
+  presets: ["module:@react-native/babel-preset", "nativewind/babel"],
   plugins: [
     "babel-plugin-react-compiler", // must run first!
     "@babel/plugin-transform-export-namespace-from",
     "react-native-worklets-core/plugin",
     "transform-inline-environment-variables",
-    "nativewind/babel",
     ["module-resolver", {
       alias: {
         // constants is a reserved word, so jest won't run if we name the alias constants

global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

jest.config.ts

@@ -8,12 +8,14 @@ const ignorePatterns = "node_modules/(?!(jest-)?@react-native|react-native|"
 const config: Config = {
   moduleNameMapper: {
     "\\.svg": "<rootDir>/tests/mocks/svgMock.js",
+    "\\.css$": "<rootDir>/tests/mocks/cssMock.js",
   },
   preset: "react-native",
   setupFiles: [
     "./node_modules/react-native-gesture-handler/jestSetup.js",
     "./node_modules/@react-native-google-signin/google-signin/jest/build/jest/setup.js",
     "<rootDir>/tests/jest.setup.js",
+    "<rootDir>/tests/nativewind.setup.js",
   ],
   globalSetup: "<rootDir>/tests/jest.globalSetup.js",
   setupFilesAfterEnv: [

metro.config.js

@@ -12,6 +12,7 @@ const { withRozenite } = require( "@rozenite/metro" );
 const {
   withRozeniteRequireProfiler,
 } = require( "@rozenite/require-profiler-plugin/metro" );
+const { withNativeWind } = require( "nativewind/metro" );
 
 const {
   resolver: { sourceExts, assetExts },
@@ -42,10 +43,22 @@ const config = {
   watchFolders: [...localPackagePaths],
 };
 
-module.exports = withRozenite(
+const configWithRozenite = withRozenite(
   mergeConfig( getDefaultConfig( __dirname ), config ),
   {
     enabled: process.env.WITH_ROZENITE === "true",
     enhanceMetroConfig: config => withRozeniteRequireProfiler( config ),
   },
 );
+
+const configWithRozeniteAndNativeWind = withNativeWind(
+  configWithRozenite,
+  {
+    input: "./global.css",
+    // nativewind 4 defaults to 14px per rem; nativewind 2 used 16px, and all
+    // of our rem-based spacing was designed against that
+    inlineRem: 16,
+  },
+);
+
+module.exports = configWithRozeniteAndNativeWind;