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",
@@ -14,10 +14,12 @@
     "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",
-    "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;

packages/react-strict-dom/babel/index.js

@@ -236,7 +236,7 @@ function reactStrictPreset(_, options = {}) {
         {
           dev: opts.dev,
           importSources: [{ from: 'react-strict-dom', as: 'css' }],
-          runtimeInjection: opts.dev, // temporary until Expo/Metro can support built-time
+          runtimeInjection: false,
           styleResolution: 'property-specificity',
           unstable_moduleResolution: {
             type: 'commonJS',

packages/react-strict-dom/package.json

@@ -12,10 +12,6 @@
     "./package.json": "./package.json"
   },
   "sideEffects": false,
-  "files": [
-    "*",
-    "!**/__tests__"
-  ],
   "scripts": {
     "build": "rollup --config ./tools/rollup.config.mjs",
     "clean": "del-cli \"./build/*\" \"./dist/*\"",

packages/react-strict-dom/src/dom/runtime.js

@@ -42,7 +42,7 @@ const styles = stylex.create({
     borderWidth: 1
   },
   codePre: {
-    fontFamily: 'monospace, monospace',
+    fontFamily: 'monospace, "monospace"',
     fontSize: '1em',
     overflow: 'auto'
   },

packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom

@@ -1176,7 +1176,7 @@ exports[`html "button" supports inline event handlers 1`] = `
 
 exports[`html "code" ignores and warns about unsupported attributes 1`] = `
 <code
-  className="html-code x1ghz6dp x1717udv x1hl2dhg x16tdsg8 x1vvkbs xelszwe xrv4cvt xysyzu8"
+  className="html-code x1ghz6dp x1717udv x1hl2dhg x16tdsg8 x1vvkbs x1lxnp44 xrv4cvt xysyzu8"
 />
 `;
 
@@ -1231,7 +1231,7 @@ exports[`html "code" supports global attributes 1`] = `
   aria-valuetext="Five"
   autoCapitalize={true}
   autoFocus={true}
-  className="html-code x1ghz6dp x1717udv x1hl2dhg x16tdsg8 x1vvkbs xelszwe xrv4cvt xysyzu8"
+  className="html-code x1ghz6dp x1717udv x1hl2dhg x16tdsg8 x1vvkbs x1lxnp44 xrv4cvt xysyzu8"
   data-testid="some-test-id"
   dir="ltr"
   enterKeyHint="go"
@@ -1255,7 +1255,7 @@ exports[`html "code" supports global attributes 1`] = `
 
 exports[`html "code" supports inline event handlers 1`] = `
 <code
-  className="html-code x1ghz6dp x1717udv x1hl2dhg x16tdsg8 x1vvkbs xelszwe xrv4cvt xysyzu8"
+  className="html-code x1ghz6dp x1717udv x1hl2dhg x16tdsg8 x1vvkbs x1lxnp44 xrv4cvt xysyzu8"
   onAuxClick={[Function]}
   onBeforeInput={[Function]}
   onBlur={[Function]}
@@ -4825,7 +4825,7 @@ exports[`html "p" supports inline event handlers 1`] = `
 
 exports[`html "pre" ignores and warns about unsupported attributes 1`] = `
 <pre
-  className="html-pre x1ghz6dp x1717udv xelszwe xrv4cvt xysyzu8"
+  className="html-pre x1ghz6dp x1717udv x1lxnp44 xrv4cvt xysyzu8"
 />
 `;
 
@@ -4880,7 +4880,7 @@ exports[`html "pre" supports global attributes 1`] = `
   aria-valuetext="Five"
   autoCapitalize={true}
   autoFocus={true}
-  className="html-pre x1ghz6dp x1717udv xelszwe xrv4cvt xysyzu8"
+  className="html-pre x1ghz6dp x1717udv x1lxnp44 xrv4cvt xysyzu8"
   data-testid="some-test-id"
   dir="ltr"
   enterKeyHint="go"
@@ -4904,7 +4904,7 @@ exports[`html "pre" supports global attributes 1`] = `
 
 exports[`html "pre" supports inline event handlers 1`] = `
 <pre
-  className="html-pre x1ghz6dp x1717udv xelszwe xrv4cvt xysyzu8"
+  className="html-pre x1ghz6dp x1717udv x1lxnp44 xrv4cvt xysyzu8"
   onAuxClick={[Function]}
   onBeforeInput={[Function]}
   onBlur={[Function]}