From 2b7705e336425345539526f5e973e43db81c6753 Mon Sep 17 00:00:00 2001 From: Teemu Taskula Date: Tue, 1 Nov 2022 10:39:48 +0200 Subject: [PATCH] Clean up code and fix example issues --- example/entry.js | 7 +++++++ example/package.json | 4 ++-- example/src/components/Heading.tsx | 11 ++++++----- example/webpack.config.js | 5 +++-- src/internals/index.js | 10 ++++++++-- src/internals/utils.js | 14 ++++---------- 6 files changed, 30 insertions(+), 21 deletions(-) diff --git a/example/entry.js b/example/entry.js index 4fe6e7c..c082aab 100644 --- a/example/entry.js +++ b/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(); } diff --git a/example/package.json b/example/package.json index f51ee61..7adb9a6 100644 --- a/example/package.json +++ b/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 + } } diff --git a/example/src/components/Heading.tsx b/example/src/components/Heading.tsx index 15e09ab..92fbcf8 100644 --- a/example/src/components/Heading.tsx +++ b/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', diff --git a/example/webpack.config.js b/example/webpack.config.js index 025389b..ae148c6 100644 --- a/example/webpack.config.js +++ b/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; }; diff --git a/src/internals/index.js b/src/internals/index.js index 32cc645..07cdc8f 100644 --- a/src/internals/index.js +++ b/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]; } diff --git a/src/internals/utils.js b/src/internals/utils.js index 65d4921..28826b5 100644 --- a/src/internals/utils.js +++ b/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; }