Use postcss to extract styles in Expo example

Extract styles to static CSS using postcss, as there is no existing
Metro integration.

Fix #34
Ref #236

apps/examples/app.json

@@ -13,15 +13,15 @@
       "backgroundColor": "#ffffff"
     },
     "assetBundlePatterns": ["**/*"],
-    "ios": {
-      "supportsTablet": true
-    },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       }
     },
+    "ios": {
+      "supportsTablet": true
+    },
     "web": {
       "bundler": "metro",
       "favicon": "./assets/favicon.png"

apps/examples/babel.config.js

@@ -11,6 +11,7 @@ function getPlatform(caller) {
   return caller && caller.platform;
 }
 
+/*
 function getIsDev(caller) {
   if (caller?.isDev != null) return caller.isDev;
   // https://babeljs.io/docs/options#envname
@@ -19,20 +20,21 @@ function getIsDev(caller) {
     process.env.NODE_ENV === 'development'
   );
 }
+*/
 
 module.exports = function (api) {
   //api.cache(true);
 
   const platform = api.caller(getPlatform);
-  const isDev = api.caller(getIsDev);
+  // const isDev = api.caller(getIsDev);
 
   const presets = ['babel-preset-expo'];
   const plugins = [];
 
   if (platform === 'web') {
     presets.push([
       reactStrictPreset,
-      { debug: true, dev: isDev, rootDir: __dirname }
+      { debug: true, dev: false, rootDir: __dirname }
     ]);
   }
 

apps/examples/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "examples",
   "version": "0.0.0",
-  "main": "./src/index.js",
+  "main": "./src/app/index.js",
   "scripts": {
     "dev": "expo start --clear",
     "dev:android": "expo start --android --clear",
@@ -14,6 +14,7 @@
     "expo": "^52.0.3",
     "expo-build-properties": "~0.13.1",
     "expo-status-bar": "~2.0.0",
+    "postcss-react-strict-dom": "0.0.2",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "react-native": "~0.76.1",

apps/examples/postcss.config.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  plugins: {
+    'postcss-react-strict-dom': {
+      include: ['src/**/*.{js,jsx,mjs,ts,tsx}']
+    },
+    autoprefixer: {}
+  }
+};

apps/examples/src/index.js → apps/examples/src/app/index.js

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import './stylex.css';
 import { LogBox } from 'react-native';
-
 import { registerRootComponent } from 'expo';
-
-import App from './App';
+import App from '../components/App';
 
 if (LogBox != null) {
   LogBox.ignoreLogs([

apps/examples/src/app/stylex.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * The @stylex directive is used by the react-strict-dom postcss plugin.
+ * It is automatically replaced with generated CSS during builds.
+ */
+
+ @stylex;