Improve native createTheme token normalization

Author: Yamin Yassin

packages/benchmarks/perf/tests/css-create-tests.js

@@ -11,8 +11,33 @@ const { createSuite } = require('../helpers');
 const { css } = require('../react-strict-dom');
 const { styles } = require('../fixtures');
 
+function cloneStyle(style) {
+  const result = {};
+  for (const propName in style) {
+    const value = style[propName];
+    result[propName] =
+      value != null && typeof value === 'object' && !Array.isArray(value)
+        ? { ...value }
+        : value;
+  }
+  return result;
+}
+
 function runSuite(options) {
   const { suite, test } = createSuite('css.create', options);
+  const dynamicStyles = css.create({
+    small: (width) => ({
+      ...styles.small,
+      width
+    }),
+    complex: (width) => ({
+      ...styles.complex,
+      width: {
+        ...styles.complex.width,
+        default: width
+      }
+    })
+  });
 
   test('small', () => {
     css.create({
@@ -63,6 +88,26 @@ function runSuite(options) {
     });
   });
 
+  test('fresh small with units', () => {
+    css.create({
+      smallWithUnits: cloneStyle(styles.smallWithUnits)
+    });
+  });
+
+  test('fresh complex', () => {
+    css.create({
+      complex: cloneStyle(styles.complex)
+    });
+  });
+
+  test('dynamic small', () => {
+    dynamicStyles.small(1000);
+  });
+
+  test('dynamic complex', () => {
+    dynamicStyles.complex(300);
+  });
+
   suite.run();
 }
 

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

@@ -50,15 +50,18 @@ function _create<S extends { +[string]: { +[string]: unknown } }>(styles: S): {
 }
 export const create: IStyleX['create'] = _create as $FlowFixMe;
 
-const RE_CAPTURE_VAR_NAME = /^var\(--(.*)\)$/;
+const VAR_FUNCTION_PREFIX = 'var(--';
 export const createTheme = (
   baseTokens: Tokens,
   overrides: CustomProperties
 ): CustomProperties => {
   const result: MutableCustomProperties = { $$theme: 'theme' };
   for (const key in baseTokens) {
     const varName: string = baseTokens[key];
-    const normalizedKey = varName.replace(RE_CAPTURE_VAR_NAME, '$1');
+    const normalizedKey =
+      varName.startsWith(VAR_FUNCTION_PREFIX) && varName.endsWith(')')
+        ? varName.slice(VAR_FUNCTION_PREFIX.length, -1)
+        : varName;
     result[normalizedKey] = overrides[key];
   }
   return result;