Babel preset with integrated StyleX

This patch changes RSD to export a babel preset (not plugin), which
integrates StyleX to simplify developer setup and ensure that the
correct configuration is used.

StyleX itself is also patched to fix theming on web and remove
deprecated or unrelated APIs for cross-platform React.

Author: necolas

apps/examples/babel.config.js

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const stylexPlugin = require('@stylexjs/babel-plugin');
-const reactStrictPlugin = require('react-strict-dom/babel');
+const reactStrictPreset = require('react-strict-dom/babel-preset');
 
 function getPlatform(caller) {
   return caller && caller.platform;
@@ -27,30 +26,18 @@ module.exports = function (api) {
   const platform = api.caller(getPlatform);
   const isDev = api.caller(getIsDev);
 
+  const presets = ['babel-preset-expo'];
   const plugins = [];
 
   if (platform === 'web') {
-    plugins.push([reactStrictPlugin, { debug: true }]);
-    plugins.push([
-      stylexPlugin,
-      {
-        dev: isDev,
-        importSources: [
-          '@stylexjs/stylex',
-          { from: 'react-strict-dom', as: 'css' }
-        ],
-        runtimeInjection: isDev,
-        styleResolution: 'property-specificity',
-        unstable_moduleResolution: {
-          rootDir: __dirname,
-          type: 'commonJS'
-        }
-      }
+    presets.push([
+      reactStrictPreset,
+      { debug: true, dev: isDev, rootDir: __dirname }
     ]);
   }
 
   return {
     plugins,
-    presets: ['babel-preset-expo']
+    presets
   };
 };

apps/examples/src/App.js

@@ -10,7 +10,7 @@
 import * as React from 'react';
 import { ScrollView } from 'react-native';
 import { css, html } from 'react-strict-dom';
-import { tokens } from './tokens.stylex';
+import { tokens, themeColors, systemColors } from './tokens.stylex';
 
 type ExampleBlockProps = $ReadOnly<{
   title: string,
@@ -38,6 +38,63 @@ function ExampleBlock(props: ExampleBlockProps) {
   );
 }
 
+const redBlueTheme = css.createTheme(themeColors, {
+  primary100: 'red',
+  primary200: 'blue'
+});
+const purpleYellowTheme = css.createTheme(themeColors, {
+  primary100: 'purple',
+  primary200: 'yellow'
+});
+const greenPinkTheme = css.createTheme(themeColors, {
+  primary100: 'green',
+  primary200: 'pink'
+});
+
+const themedStyles = css.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#bbb',
+    padding: 8
+  },
+  square: {
+    width: 100,
+    height: 100,
+    backgroundColor: systemColors.squareColor,
+    borderColor: systemColors.outlineColor,
+    borderStyle: 'solid',
+    borderWidth: 5
+  }
+});
+
+function ThemeExample() {
+  return (
+    <html.div style={themedStyles.container}>
+      {/* default theme */}
+      <html.div style={themedStyles.square} />
+      {/* redblue theme */}
+      <html.div style={redBlueTheme}>
+        <html.div style={themedStyles.square} />
+      </html.div>
+      {/* purpleyellow theme */}
+      <html.div style={purpleYellowTheme}>
+        <html.div style={themedStyles.square} />
+      </html.div>
+      {/* greenpink theme */}
+      <html.div style={greenPinkTheme}>
+        <html.div style={themedStyles.square} />
+      </html.div>
+      {/* nested theme */}
+      <html.div style={redBlueTheme}>
+        <html.div style={greenPinkTheme}>
+          <html.div style={themedStyles.square} />
+        </html.div>
+      </html.div>
+    </html.div>
+  );
+}
+
 const BGCOLOR_INACTIVE = 'red';
 const BGCOLOR_ACTIVE = 'blue';
 
@@ -457,6 +514,8 @@ function Shell(): React.MixedElement {
               />
             </html.div>
           </html.div>
+
+          <ThemeExample />
         </ExampleBlock>
 
         {/* hover */}

apps/examples/src/tokens.stylex.js

@@ -7,11 +7,11 @@
  * @flow strict-local
  */
 
-import type { VarGroup } from '@stylexjs/stylex';
+import type { StyleVars } from 'react-strict-dom';
 
 import { css } from 'react-strict-dom';
 
-export const tokens: VarGroup<
+export const tokens: StyleVars<
   $ReadOnly<{
     squareColor: string,
     textColor: string,
@@ -27,3 +27,23 @@ export const tokens: VarGroup<
   inputColor: 'red',
   inputPlaceholderColor: 'pink'
 });
+
+export const themeColors: StyleVars<
+  $ReadOnly<{
+    primary100: string,
+    primary200: string
+  }>
+> = css.defineVars({
+  primary100: 'black',
+  primary200: 'white'
+});
+
+export const systemColors: StyleVars<
+  $ReadOnly<{
+    squareColor: string,
+    outlineColor: string
+  }>
+> = css.defineVars({
+  squareColor: themeColors.primary100,
+  outlineColor: themeColors.primary200
+});

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

@@ -6,7 +6,8 @@
  */
 
 const path = require('path');
-const { addNamed, addNamespace } = require('@babel/helper-module-imports');
+const { addNamed } = require('@babel/helper-module-imports');
+const styleXPlugin = require('@stylexjs/babel-plugin');
 
 function createShortFilename(absolutePath, baseDir = process.cwd()) {
   if (!path.isAbsolute(baseDir)) {
@@ -18,7 +19,7 @@ function createShortFilename(absolutePath, baseDir = process.cwd()) {
   return shortPath;
 }
 
-module.exports = function ({ types: t }, options = {}) {
+function reactStrictPlugin({ types: t }, options = {}) {
   const packageName = 'react-strict-dom';
   const packageRuntime = 'react-strict-dom/runtime';
   const findImportDeclaration = (body, sourceValue) =>
@@ -31,12 +32,13 @@ module.exports = function ({ types: t }, options = {}) {
       ? specifiers.filter((specifier) => specifier.imported.name === 'html')
       : [];
   let defaultStylesImportIdentifier;
-  let stylexImportIdentifier;
+  let styleResolverImportIdentifier;
 
   return {
     visitor: {
       Program: {
         enter(path) {
+          // Add runtime imports
           const importDeclarations = findImportDeclaration(
             path.node.body,
             packageName
@@ -47,18 +49,24 @@ module.exports = function ({ types: t }, options = {}) {
               'defaultStyles',
               packageRuntime
             );
-            stylexImportIdentifier = addNamespace(path, '@stylexjs/stylex', {
-              nameHint: 'stylex'
-            });
+            styleResolverImportIdentifier = addNamed(
+              path,
+              'resolveStyle',
+              packageRuntime
+            );
             path.scope.rename(
               'defaultStyles',
               defaultStylesImportIdentifier.name
             );
-            path.scope.rename('stylex', stylexImportIdentifier.name);
+            path.scope.rename(
+              'resolveStyle',
+              styleResolverImportIdentifier.name
+            );
           }
         }
       },
       JSXMemberExpression(path, state) {
+        //
         const importDeclarations = findImportDeclaration(
           state.file.ast.program.body,
           packageName
@@ -96,16 +104,19 @@ module.exports = function ({ types: t }, options = {}) {
           let dirAttributeExists = false;
 
           path.node.attributes.forEach((attribute, index) => {
+            // React DOM compat: 'for' replaced by 'htmlFor'
             if (t.isJSXAttribute(attribute) && attribute.name.name === 'for') {
               attribute.name.name = 'htmlFor';
             }
+            // Browser compat: 'role=none' replaced by 'role=presentation'
             if (
               t.isJSXAttribute(attribute) &&
               attribute.name.name === 'role' &&
               attribute.value.value === 'none'
             ) {
               attribute.value.value = 'presentation';
             }
+            // React DOM compat: 'style' replaced by resolver that produces React DOM props
             if (
               t.isJSXAttribute(attribute) &&
               attribute.name.name === 'style'
@@ -119,10 +130,7 @@ module.exports = function ({ types: t }, options = {}) {
               );
               path.node.attributes[index] = t.jsxSpreadAttribute(
                 t.callExpression(
-                  t.memberExpression(
-                    t.identifier(stylexImportIdentifier.name),
-                    t.identifier('props')
-                  ),
+                  t.identifier(styleResolverImportIdentifier.name),
                   [defaultStyles].concat(
                     Array.isArray(styleValue.elements)
                       ? styleValue.elements
@@ -139,13 +147,15 @@ module.exports = function ({ types: t }, options = {}) {
             }
           });
 
+          // Set type=button on <button> by default
           const elementName = path.node.name.property.name;
           if (elementName === 'button' && !typeAttributeExists) {
             path.node.attributes.push(
               t.jsxAttribute(t.jsxIdentifier('type'), t.stringLiteral('button'))
             );
           }
 
+          // Set dir=auto by default on text inputs
           if (
             (elementName === 'input' || elementName === 'textarea') &&
             !dirAttributeExists
@@ -155,6 +165,7 @@ module.exports = function ({ types: t }, options = {}) {
             );
           }
 
+          // Inline the style resolving logic
           if (!styleAttributeExists) {
             const elementName = path.node.name.property.name;
             const defaultStyles = t.memberExpression(
@@ -164,10 +175,7 @@ module.exports = function ({ types: t }, options = {}) {
             path.node.attributes.push(
               t.jsxSpreadAttribute(
                 t.callExpression(
-                  t.memberExpression(
-                    t.identifier(stylexImportIdentifier.name),
-                    t.identifier('props')
-                  ),
+                  t.identifier(styleResolverImportIdentifier.name),
                   [defaultStyles]
                 )
               )
@@ -195,7 +203,7 @@ module.exports = function ({ types: t }, options = {}) {
             // displays filename and line number of the source element
             path.node.attributes.unshift(
               t.jsxAttribute(
-                t.jsxIdentifier('data-react-src'),
+                t.jsxIdentifier('data-element-src'),
                 t.stringLiteral(`${shortFilename}:${originalLineNumber}`)
               )
             );
@@ -204,4 +212,44 @@ module.exports = function ({ types: t }, options = {}) {
       }
     }
   };
+}
+
+const defaultOptions = {
+  dev: true,
+  debug: true,
+  rootDir: process.cwd()
 };
+
+function reactStrictPreset(_, options = {}) {
+  const opts = { ...defaultOptions, ...options };
+
+  return {
+    plugins: [
+      [
+        reactStrictPlugin,
+        {
+          debug: opts.debug
+        }
+      ],
+      [
+        styleXPlugin,
+        {
+          dev: opts.dev,
+          importSources: [{ from: 'react-strict-dom', as: 'css' }],
+          runtimeInjection: opts.dev, // temporary until Expo/Metro can support built-time
+          styleResolution: 'property-specificity',
+          unstable_moduleResolution: {
+            type: 'commonJS',
+            rootDir: opts.rootDir
+            //themeFileExtension: '.cssvars.js',
+          },
+          useRemForFontSize: false
+        }
+      ]
+    ]
+  };
+}
+
+reactStrictPreset.generateStyles = styleXPlugin.processStylexRules;
+
+module.exports = reactStrictPreset;

packages/react-strict-dom/package.json

@@ -7,7 +7,7 @@
       "react-native": "./dist/native/index.js",
       "default": "./dist/dom/index.js"
     },
-    "./babel": "./babel/index.js",
+    "./babel-preset": "./babel/index.js",
     "./runtime": "./dist/dom/runtime.js",
     "./package.json": "./package.json"
   },

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

@@ -7,7 +7,22 @@
  * @flow strict
  */
 
+import type {
+  StyleXStyles,
+  StyleXStylesWithout,
+  StaticStyles,
+  Theme,
+  VarGroup
+} from '@stylexjs/stylex';
+
 import * as html from './html';
 import * as css from '@stylexjs/stylex';
 
+type StyleTheme<V, T> = Theme<V, T>;
+type StyleVars<T> = VarGroup<T>;
+type Styles<T> = StyleXStyles<T>;
+type StylesWithout<T> = StyleXStylesWithout<T>;
+
+export type { StaticStyles, StyleTheme, StyleVars, Styles, StylesWithout };
+
 export { css, html };

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

@@ -176,3 +176,5 @@ export const defaultStyles = {
   u: u as typeof u,
   ul: ul as typeof ul
 };
+
+export const resolveStyle = stylex.props;