react · necolas · Jul 2, 2025 · Jun 11, 2025 · Jun 11, 2025 · Oct 14, 2024
diff --git a/apps/examples/metro.config.js b/apps/examples/metro.config.js
@@ -12,9 +12,5 @@ const { getDefaultConfig } = require('expo/metro-config');
 const projectRoot = __dirname;
 
 const config = getDefaultConfig(projectRoot);
-// 1. Enable Metro support for symlinks and package exports
-config.resolver.unstable_enablePackageExports = true;
-// 2. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
-config.resolver.disableHierarchicalLookup = true;
 
 module.exports = config;
diff --git a/apps/examples/package.json b/apps/examples/package.json
@@ -10,15 +10,15 @@
     "dev:web": "expo start --web --clear"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~4.0.0",
-    "expo": "^52.0.6",
-    "expo-build-properties": "~0.13.1",
-    "expo-status-bar": "~2.0.0",
+    "@expo/metro-runtime": "~5.0.4",
+    "expo": "^53.0.11",
+    "expo-build-properties": "~0.14.6",
+    "expo-status-bar": "~2.2.3",
     "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": "~19.0.0",
+    "react-dom": "~19.0.0",
+    "react-native": "~0.79.5",
+    "react-native-web": "~0.20.0",
     "react-strict-dom": "*"
   },
   "devDependencies": {

diff --git a/apps/examples/src/components/App.js b/apps/examples/src/components/App.js
@@ -145,7 +145,7 @@ function Shell(): React.MixedElement {
 
   return (
     <ScrollView>
-      <html.div style={egStyles.div}>
+      <html.div data-layoutconformance="strict" style={egStyles.div}>
         <ExampleBlock title="HTML elements">
           <html.div>Text inside div (kind of) works</html.div>
           <html.span>

diff --git a/apps/website/docs/api/02-css/03-defineConsts.md b/apps/website/docs/api/02-css/03-defineConsts.md
@@ -1,21 +1,41 @@
----
-draft: true
----
-
 # css.defineConsts
 
-<p className="text-xl">How to define constants.</p>
+<p className="text-xl">How to define constants for use in styles and themes.</p>
 
 :::warning
 
-`css.defineConsts()` is currently only supported on web.
-
-:::
+Constants must be defined as named exports in files with a `*.stylex.js` (or `*.stylex.ts`) extension. This limitation is currently imposed due to constraints on how styles are compiled on web.
 
 ## Overview
 
-...
+This API creates style variables that can be imported and used within `css.create()` and `css.createTheme()` calls anywhere within a codebase. These values are inlined at build time and do not generate variables.
+
+```js title="constants.stylex.js"
+import { css } from 'react-strict-dom';
+
+export const breakpoints = css.defineConsts({
+  small: '@media (max-width: 600px)',
+  medium: '@media (min-width: 601px) and (max-width: 1024px)',
+  large: '@media (min-width: 1025px)',
+});
+```
 
 ## API
 
-...
+### Named variables
+
+The `defineConsts` function accepts an object of named constants. These constants can be referenced elsewhere by their key name.
+
+```js title="component.js"
+import { breakpoints } from './constants.stylex.js';
+
+const styles = css.create({
+  box: {
+    padding: {
+      default: '10px',,
+      [breakpoints.medium]: '15px',
+      [breakpoints.large]: '20px',
+    },
+  },
+});
+```
diff --git a/apps/website/docs/api/02-css/index.md b/apps/website/docs/api/02-css/index.md
@@ -130,7 +130,7 @@ The following tables represent the compatibility status of the strict CSS API fo
 | color | ✅ | ✅ | |
 | columnGap | ✅ | ✅ | |
 | cursor | ❌ | ✅ Partial | |
-| direction | ❌ | ❌ | |
+| direction | ✅ | ✅ | |
 | display: block | 🟡 Partial | 🟡 Partial | [#2](https://github.com/facebook/react-strict-dom/issues/2) |
 | display: contents | ✅ | ✅ | |
 | display: flex | ✅ | ✅ | |
@@ -156,13 +156,13 @@ The following tables represent the compatibility status of the strict CSS API fo
 | gap | ✅ | ✅ | |
 | height | ✅ | ✅ | |
 | inlineSize | 🟡 | 🟡 | |
-| inset | 🟡 | 🟡 | |
-| insetBlock | 🟡 | 🟡 | |
-| insetBlockEnd | 🟡 | 🟡 | |
-| insetBlockStart | 🟡 | 🟡 | |
-| insetInline | 🟡 | 🟡 | |
-| insetInlineEnd | 🟡 | 🟡 | |
-| insetInlineStart | 🟡 | 🟡 | |
+| inset | ✅ | ✅ | |
+| insetBlock | ✅ | ✅ | |
+| insetBlockEnd | ✅ | ✅ | |
+| insetBlockStart | ✅ | ✅ | |
+| insetInline | ✅ | ✅ | |
+| insetInlineEnd | ✅ | ✅ | |
+| insetInlineStart | ✅ | ✅ | |
 | isolation | ✅ | ✅ | |
 | justifyContent | ✅ | ✅ | |
 | justifyItems | ❌ | ❌ | |
@@ -175,13 +175,13 @@ The following tables represent the compatibility status of the strict CSS API fo
 | listStylePosition | ❌ | ❌ | |
 | listStyleType | ❌ | ❌ | |
 | margin | ✅ | ✅ | |
-| marginBlock | 🟡 | 🟡 | |
-| marginBlockEnd | 🟡 | 🟡 | |
-| marginBlockStart | 🟡 | 🟡 | |
+| marginBlock | ✅ | ✅ | |
+| marginBlockEnd | ✅ | ✅ | |
+| marginBlockStart | ✅ | ✅ | |
 | marginBottom | ✅ | ✅ | |
-| marginInline | 🟡 | 🟡 | |
-| marginInlineEnd | 🟡 | 🟡 | |
-| marginInlineStart | 🟡 | 🟡 | |
+| marginInline | ✅ | ✅ | |
+| marginInlineEnd | ✅ | ✅ | |
+| marginInlineStart | ✅ | ✅ | |
 | marginLeft | ✅ | ✅ | |
 | marginRight | ✅ | ✅ | |
 | marginTop | ✅ | ✅ | |
@@ -208,13 +208,13 @@ The following tables represent the compatibility status of the strict CSS API fo
 | overflowX | ❌ | ❌ | |
 | overflowY | ❌ | ❌ | |
 | padding | ✅ | ✅ | |
-| paddingBlock | 🟡 | 🟡 | |
-| paddingBlockEnd | 🟡 | 🟡 | |
-| paddingBlockStart | 🟡 | 🟡 | |
+| paddingBlock | ✅ | ✅ | |
+| paddingBlockEnd | ✅ | ✅ | |
+| paddingBlockStart | ✅ | ✅ | |
 | paddingBottom | ✅ | ✅ | |
-| paddingInline | 🟡 | 🟡 | |
-| paddingInlineEnd | 🟡 | 🟡 | |
-| paddingInlineStart | 🟡 | 🟡 | |
+| paddingInline | ✅ | ✅ | |
+| paddingInlineEnd | ✅ | ✅ | |
+| paddingInlineStart | ✅ | ✅ | |
 | paddingLeft | ✅ | ✅ | |
 | paddingRight | ✅ | ✅ | |
 | paddingTop | ✅ | ✅ | |

diff --git a/apps/website/docs/api/index.md b/apps/website/docs/api/index.md
@@ -15,7 +15,7 @@ sidebar_position: -1
 * [**css**](/api/css/) - An overview of working with styles.
 * [css.create](/api/css/create) - How to create styles.
 * [css.createTheme](/api/css/createTheme) - How to create themes.
-<!-- * [css.defineConsts](/api/css/defineConsts) - How to define constants. -->
+* [css.defineConsts](/api/css/defineConsts) - How to define constants.
 * [css.defineVars](/api/css/defineVars) - How to define variables.
 * [css.firstThatWorks](/api/css/firstThatWorks) - How to declare fallback values.
 <!-- * [css.keyframes](/api/css/keyframes) - How to declare animation keyframes. -->

diff --git a/apps/website/docs/learn/01-installation.md b/apps/website/docs/learn/01-installation.md
@@ -30,7 +30,7 @@ npm install --save-dev postcss-react-strict-dom
 
 ### Native
 
-For native support, please make sure the following peer dependencies are installed (note that using the new React Native architecture is required):
+For native support, please make sure the following peer dependencies are installed.
 
 ```
 npm install react react-native

diff --git a/apps/website/docs/learn/02-environment-setup.md b/apps/website/docs/learn/02-environment-setup.md
@@ -10,7 +10,7 @@ slug: /learn/setup
 
 [Expo](https://expo.dev/) is a production-grade, cross-platform React framework that is the recommended solution for creating apps with React Strict DOM. The instructions in the rest of this guide are tailored to Expo, but can be adapted by readers to work with other frameworks.
 
-Follow the Expo instructions on how to [create a new project](https://docs.expo.dev/get-started/create-a-project/). React Strict DOM requires use of the New React Native Architecture. Then follow the steps in the [Installation](/learn/installation) guide to install React Strict DOM.
+Follow the Expo instructions on how to [create a new project](https://docs.expo.dev/get-started/create-a-project/). React Strict DOM requires use of the latest Expo SDK with the New React Native Architecture enabled. Then follow the steps in the [Installation](/learn/installation) guide to install React Strict DOM.
 
 A working example of an Expo setup with React Strict DOM can be found in this [examples app](https://github.com/facebook/react-strict-dom/tree/main/apps/examples).
 
@@ -77,9 +77,9 @@ module.exports = {
 };
 ```
 
-## Metro configuration
+## Bundler configuration
 
-[Metro](https://reactnative.dev/docs/metro) is the bundler used by Expo and React Native. It can bundle apps for native and web targets. Create or modify the `metro.config.js` file as follows to enable support for [package exports in React Native](https://reactnative.dev/blog/2023/06/21/package-exports-support). This step is not necessary for other packagers.
+[Metro](https://reactnative.dev/docs/metro) is the bundler used by Expo and React Native. It can bundle apps for native and web targets. Create the `metro.config.js` file as follows. Support for [package exports in React Native](https://reactnative.dev/blog/2023/06/21/package-exports-support) is now enabled by default. This step is not necessary for other packagers.
 
 ```js title="metro.config.js"
 // Learn more https://docs.expo.dev/guides/monorepos
@@ -89,22 +89,20 @@ const { getDefaultConfig } = require('expo/metro-config');
 const projectRoot = __dirname;
 
 const config = getDefaultConfig(projectRoot);
-// 1. Enable Metro support for symlinks and package exports
-config.resolver.unstable_enablePackageExports = true;
-// 2. Only for npm monorepos: force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
-// config.resolver.disableHierarchicalLookup = true;
 
 module.exports = config;
 ```
 
-TypeScript-based Expo projects should also set `moduleResolution` to `"bundler"`.
+TypeScript-based projects should set the following TypeScript compiler options:
 
 ```js title="tsconfig.json"
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true,
+    "customConditions": ["react-native"],
     "moduleResolution": "bundler",
+    "moduleSuffixes": [".ios", ".android", ".native", ""]
+    "strict": true,
   },
   ...
 }
@@ -130,11 +128,23 @@ import './stylex.css';
 import '@expo/metro-runtime';
 
 import { registerRootComponent } from 'expo';
-import App from './App';
+import { App } from './App';
 
 registerRootComponent(App);
 ```
 
+To enable React Native support for layout that better conforms to W3C standards, you must set `data-layoutconformance="strict"` on the root `html.*` element of your app.
+
+```js title="App.js"
+export function App() {
+  return (
+    <html.div data-layoutconformance="strict">
+      {/* The rest of your app component */}
+    </html.div>
+  );
+}
+```
+
 ## Platform-specific files
 
 Expo supports [platform-specific extensions](https://docs.expo.dev/router/advanced/platform-specific-modules/#platform-specific-extensions) by default. This allows you to create platform-specific implementations of components, hooks, etc.

diff --git a/apps/website/docs/learn/05-theming-components.md b/apps/website/docs/learn/05-theming-components.md
@@ -8,13 +8,13 @@ slug: /learn/themes
 
 :::info[Requirements]
 
-Variables must be defined in a file that matches the following file extension pattern: `.stylex.{js,jsx,mjs,ts,tsx}`. Only CSS variables can be defined in these files. And every `css.defineVars` call must be a named export.
+Variables and constants must be defined in a file that matches the following file extension pattern: `.stylex.{js,jsx,mjs,ts,tsx}`. Only CSS variables can be defined in these files. Every `css.defineConsts` and `css.defineVars` call must be a named export.
 
 :::
 
 ## Defining variables
 
-CSS variables are defined with a call to `css.defineVars`. This defines global variables which can then be imported as constants for use in any style rules. These variables and their values are essentially a "default theme".
+CSS variables are defined with a call to `css.defineVars`. This defines global variables which can then be imported for use in any style rules. These variables and their values are essentially a "default theme". If you don't need to override these values in themes, use `css.defineConsts` instead.
 
 ```js title="tokens.stylex.js"
 import { css } from 'react-strict-dom';
@@ -59,9 +59,9 @@ export const colors = css.defineVars({
 });
 ```
 
-## Using variables in styles
+## Using variables or constants in styles
 
-Once variables have been defined, they can be imported and used directly in style rules created with `css.create`.
+Once variables or constants have been defined, they can be imported and used directly in style rules created with `css.create`.
 
 ```js title="Component.js"
 import { css } from 'react-strict-dom';

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -9,17 +9,17 @@
     "serve": "docusaurus serve"
   },
   "dependencies": {
-    "@docusaurus/core": "3.5.2",
-    "@docusaurus/preset-classic": "3.5.2",
-    "@mdx-js/react": "^3.0.0",
+    "@docusaurus/core": "3.8.1",
+    "@docusaurus/preset-classic": "3.8.1",
+    "@mdx-js/react": "^3.1.0",
     "clsx": "^2.0.0",
-    "prism-react-renderer": "^2.3.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "prism-react-renderer": "^2.4.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.5.2",
-    "@docusaurus/types": "3.5.2"
+    "@docusaurus/module-type-aliases": "3.8.1",
+    "@docusaurus/types": "3.8.1"
   },
   "browserslist": {
     "production": [