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

Co-authored-by: Tsubasa Sakai <[email protected]>

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

@@ -24,16 +24,13 @@ module.exports = function (api) {
   //api.cache(true);
 
   const platform = api.caller(getPlatform);
-  const isDev = api.caller(getIsDev);
+  const dev = api.caller(getIsDev);
 
   const presets = ['babel-preset-expo'];
   const plugins = [];
 
   if (platform === 'web') {
-    presets.push([
-      reactStrictPreset,
-      { debug: true, dev: isDev, rootDir: __dirname }
-    ]);
+    presets.push([reactStrictPreset, { debug: true, dev, rootDir: __dirname }]);
   }
 
   return {

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",
@@ -11,13 +11,15 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~4.0.0",
-    "expo": "^52.0.3",
+    "expo": "^52.0.6",
     "expo-build-properties": "~0.13.1",
     "expo-status-bar": "~2.0.0",
+    "postcss-react-strict-dom": "^0.0.5",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "react-native": "~0.76.1",
-    "react-native-web": "~0.19.13"
+    "react-native-web": "~0.19.13",
+    "react-strict-dom": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2"

apps/examples/postcss.config.js

@@ -0,0 +1,18 @@
+/**
+ * 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: [
+        require.resolve('react-strict-dom'),
+        'src/**/*.{js,jsx,mjs,ts,tsx}'
+      ]
+    },
+    autoprefixer: {}
+  }
+};

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

@@ -5,11 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LogBox } from 'react-native';
+// Required to apply extracted on Expo Web
+import './stylex.css';
+// Required for Fast Refresh to work on Expo Web
+import '@expo/metro-runtime';
 
+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;