Clean up code and fix example issues

example/entry.js

@@ -5,10 +5,17 @@ import { createRoot } from 'react-dom/client';
 import { App } from './App';
 
 AppRegistry.registerComponent('main', () => withExpoRoot(App));
+
+// TODO: should we have separate `index.web.js`?
+// Also is should we use `registerRootComponent`?
+// https://docs.expo.dev/workflow/web/
+
 if (Platform.OS === 'web') {
   const rootTag = createRoot(
     document.getElementById('root') ?? document.getElementById('main')
   );
+
   const RootComponent = withExpoRoot(App);
+
   rootTag.render(<RootComponent />);
 }

example/package.json

@@ -2,6 +2,7 @@
   "name": "example",
   "version": "1.0.0",
   "main": "entry.js",
+  "private": true,
   "scripts": {
     "start": "expo start",
     "start:clean": "expo start --clear",
@@ -29,6 +30,5 @@
     "@types/react": "^18.0.24",
     "@types/react-native": "^0.70.6",
     "typescript": "4.7.3"
-  },
-  "private": true
+  }
 }

example/src/components/Heading.tsx

@@ -2,7 +2,7 @@ import { TextProps as RNTextProps } from 'react-native';
 import { styled, css } from '../styles';
 
 export const Typography = styled('Text', {
-  color: '$plainText',
+  color: '$text',
   fontSizeRem: 1,
 });
 
@@ -59,7 +59,7 @@ const underLinedStyle = css({
       heading: 'h1',
       underlined: false,
       css: {
-        marginBottom: '2px',
+        marginBottom: 2,
       },
     },
   ],
@@ -70,7 +70,6 @@ export const Heading = styled(
   {
     fontWeight: 'bold',
     color: '$plainText',
-    width: 'fit-content',
     variants: {
       heading: {
         h5: { fontSizeRem: 1.0, color: 'black' },
@@ -81,8 +80,8 @@ export const Heading = styled(
       },
       underlined: {
         true: {
-          paddingRight: '4px',
-          paddingLeft: '4px',
+          paddingRight: 4,
+          paddingLeft: 4,
         },
       },
     },
@@ -91,6 +90,8 @@ export const Heading = styled(
       underlined: false,
     },
   },
+  // TODO: fix this! Native `Text` cannot have a border bottom!
+  // The example needs to wrap the text with a `View` and apply the border bottom to that.
   underLinedStyle
 ).attrs(() => ({
   accessibilityRole: 'text',

example/webpack.config.js

@@ -1,14 +1,15 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const createExpoWebpackConfigAsync = require('@expo/webpack-config');
 const path = require('path');
-// Expo CLI will await this method so you can optionally return a promise.
+
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
-  // If you want to add a new alias to the config.
+
   Object.assign(config.resolve.alias, {
     react: path.join(__dirname, 'node_modules', 'react'),
     'react-native': path.join(__dirname, 'node_modules', 'react-native-web'),
     'react-native-web': path.join(__dirname, 'node_modules', 'react-native-web'), // prettier-ignore
   });
+
   return config;
 };

src/internals/index.js

@@ -123,11 +123,13 @@ export function createStitches(config = {}) {
             config.media,
             correctedWindowWidth
           );
+
           return {
             mediaKey: _mediaKey,
             breakpoint: _mediaKey && `@${_mediaKey}`,
           };
         }
+
         return {};
       }, [windowWidth]);
 
@@ -157,6 +159,7 @@ export function createStitches(config = {}) {
 
               if (breakpoint && propValue[breakpoint] !== undefined) {
                 const val = config.media[mediaKey];
+
                 if (val === true || typeof val === 'string') {
                   styleSheetKey = `${prop}_${propValue[breakpoint]}`;
                 }
@@ -168,7 +171,7 @@ export function createStitches(config = {}) {
               : undefined;
 
             if (extractedStyle && breakpoint in extractedStyle) {
-              // WARNING: lodash merge modify first argument reference or skip if freezed object.
+              // WARNING: lodash merge modifies the first argument reference or skips if object is frozen.
               return merge({}, extractedStyle, extractedStyle[breakpoint]);
             }
 
@@ -192,10 +195,12 @@ export function createStitches(config = {}) {
             ) {
               const key = utils.getCompoundKey(compoundEntries);
               const extractedStyle = styleSheet[key];
+
               if (extractedStyle && breakpoint in extractedStyle) {
-                // WARNING: lodash merge modify first argument reference or skip if freezed object.
+                // WARNING: lodash merge modifies the first argument reference or skips if object is frozen.
                 return merge({}, extractedStyle, extractedStyle[breakpoint]);
               }
+
               return extractedStyle;
             }
           })
@@ -233,6 +238,7 @@ export function createStitches(config = {}) {
       }
 
       const propsWithoutVariant = { ...props };
+
       for (const variantKey of Object.keys(variants)) {
         delete propsWithoutVariant[variantKey];
       }

src/internals/utils.js

@@ -118,15 +118,10 @@ export function processTheme(theme) {
   return { definition, values };
 }
 
-const THEME_KEYS = Object.keys(THEME_VALUES);
-
 function getThemeKey(theme, themeMap, key) {
-  for (let i = 0, len = THEME_KEYS.length; i < len; i++) {
-    const themeKey = THEME_KEYS[i];
-    if (key in (themeMap[themeKey] || {}) && theme?.[themeKey]) {
-      return themeKey;
-    }
-  }
+  return Object.keys(THEME_VALUES).find((themeKey) => {
+    return key in (themeMap[themeKey] || {}) && theme?.[themeKey];
+  });
 }
 
 export function processStyles({ styles, theme, config }) {
@@ -135,7 +130,7 @@ export function processStyles({ styles, theme, config }) {
 
   return Object.entries(styles).reduce((acc, [key, val]) => {
     if (utils && key in utils) {
-      // NOTE: Deepmerge for media properties.
+      // NOTE: Deep merge for media properties.
       acc = merge(
         acc,
         processStyles({ styles: utils[key](val), theme, config })
@@ -157,7 +152,6 @@ export function processStyles({ styles, theme, config }) {
           acc[key] = theme[themeKey][token];
         }
       }
-
       if (typeof acc[key] === 'number' && sign) {
         acc[key] *= sign;
       }