Merge pull request #213 from gluestack/fix/undefined-property-resolution

fix: undefined property resolution

package.json

@@ -12,7 +12,8 @@
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path .gitignore",
     "release": "changeset publish",
     "prepare": "husky install",
-    "lint": "eslint packages/**/**/src --ext .ts,.tsx --config .eslintrc"
+    "lint": "eslint packages/**/**/src --ext .ts,.tsx --config .eslintrc",
+    "storybook": "cd example/storybook && yarn storybook"
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.2",

packages/react/src/core/styled-system.ts

@@ -1,102 +1,102 @@
 export const CSSPropertiesMap = {
-  alignContent: true,
-  alignItems: true,
-  alignSelf: true,
-  aspectRatio: true,
-  borderBottomWidth: true,
-  borderLeftWidth: true,
-  borderRightWidth: true,
-  borderTopWidth: true,
-  borderEndWidth: true,
-  borderStartWidth: true,
-  borderWidth: true,
-  bottom: true,
-  direction: true,
-  display: true,
-  end: true,
-  start: true,
-  flex: true,
-  flexDirection: true,
-  flexBasis: true,
-  flexGrow: true,
-  flexShrink: true,
-  flexWrap: true,
-  height: true,
-  justifyContent: true,
-  left: true,
-  margin: true,
-  marginBottom: true,
-  marginHorizontal: true,
-  marginLeft: true,
-  marginRight: true,
-  marginTop: true,
-  marginVertical: true,
-  marginEnd: true,
-  marginStart: true,
-  maxHeight: true,
-  maxWidth: true,
-  minHeight: true,
-  minWidth: true,
-  padding: true,
-  paddingBottom: true,
-  paddingHorizontal: true,
-  paddingLeft: true,
-  paddingRight: true,
-  paddingTop: true,
-  paddingVertical: true,
-  paddingEnd: true,
-  paddingStart: true,
-  position: true,
-  right: true,
-  top: true,
-  width: true,
-  zIndex: true,
+  alignContent: 'unset',
+  alignItems: 'unset',
+  alignSelf: 'unset',
+  aspectRatio: 'auto',
+  borderBottomWidth: '0',
+  borderLeftWidth: '0',
+  borderRightWidth: '0',
+  borderTopWidth: '0',
+  borderEndWidth: '0',
+  borderStartWidth: '0',
+  borderWidth: '0',
+  bottom: 'unset',
+  direction: 'unset',
+  display: 'flex',
+  end: 'unset',
+  start: 'unset',
+  flex: 'unset',
+  flexDirection: 'unset',
+  flexBasis: 'unset',
+  flexGrow: 'unset',
+  flexShrink: 'unset',
+  flexWrap: 'unset',
+  height: 'unset',
+  justifyContent: 'unset',
+  left: 'unset',
+  margin: 'unset',
+  marginBottom: 'unset',
+  marginHorizontal: 'unset',
+  marginLeft: 'unset',
+  marginRight: 'unset',
+  marginTop: 'unset',
+  marginVertical: 'unset',
+  marginEnd: 'unset',
+  marginStart: 'unset',
+  maxHeight: 'unset',
+  maxWidth: 'unset',
+  minHeight: 'unset',
+  minWidth: 'unset',
+  padding: 'unset',
+  paddingBottom: 'unset',
+  paddingHorizontal: 'unset',
+  paddingLeft: 'unset',
+  paddingRight: 'unset',
+  paddingTop: 'unset',
+  paddingVertical: 'unset',
+  paddingEnd: 'unset',
+  paddingStart: 'unset',
+  position: 'unset',
+  right: 'unset',
+  top: 'unset',
+  width: 'unset',
+  zIndex: 'unset',
   shadowColor: true,
   shadowOffset: true,
   shadowOpacity: true,
   shadowRadius: true,
-  transform: true,
-  backfaceVisibility: true,
-  backgroundColor: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  borderColor: true,
-  borderRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  opacity: true,
-  overflow: true,
-  overflowX: true,
-  overflowY: true,
-  borderBottomColor: true,
-  borderLeftColor: true,
-  borderRightColor: true,
-  borderStyle: true,
-  borderTopColor: true,
+  transform: 'none',
+  backfaceVisibility: 'visible',
+  backgroundColor: 'unset',
+  borderBottomLeftRadius: '0',
+  borderBottomRightRadius: '0',
+  borderColor: 'unset',
+  borderRadius: '0',
+  borderTopLeftRadius: '0',
+  borderTopRightRadius: '0',
+  opacity: '1',
+  overflow: 'visible',
+  overflowX: 'visible',
+  overflowY: 'visible',
+  borderBottomColor: 'unset',
+  borderLeftColor: 'unset',
+  borderRightColor: 'unset',
+  borderStyle: 'none',
+  borderTopColor: 'unset',
   elevation: true,
-  color: true,
-  fontFamily: true,
-  fontSize: true,
-  fontStyle: true,
-  fontVariant: true,
-  textTransform: true,
-  fontWeight: true,
-  lineHeight: true,
-  textAlign: true,
+  color: 'unset',
+  fontFamily: 'unset',
+  fontSize: 'unset',
+  fontStyle: 'unset',
+  fontVariant: 'unset',
+  textTransform: 'unset',
+  fontWeight: 'unset',
+  lineHeight: 'unset',
+  textAlign: 'unset',
   textDecorationLine: true,
   textShadowColor: true,
   textShadowOffset: true,
   textShadowRadius: true,
   textAlignVertical: true,
-  letterSpacing: true,
-  textDecorationColor: true,
-  textDecorationStyle: true,
-  borderBottomEndRadius: true,
-  borderBottomStartRadius: true,
-  borderEndColor: true,
-  borderStartColor: true,
-  borderTopEndRadius: true,
-  borderTopStartRadius: true,
+  letterSpacing: 'unset',
+  textDecorationColor: 'unset',
+  textDecorationStyle: 'none',
+  borderBottomEndRadius: '0',
+  borderBottomStartRadius: '0',
+  borderEndColor: 'unset',
+  borderStartColor: 'unset',
+  borderTopEndRadius: '0',
+  borderTopStartRadius: '0',
 };
 
 export const reservedKeys = {

packages/react/src/styled.tsx

@@ -56,7 +56,7 @@ function getStateStyleCSSFromStyleIdsAndProps(
   const stateStyleCSSIds: Array<any> = [];
   let props = {};
 
-  if (states || colorMode) {
+  if (states || (colorMode && typeof states !== 'undefined')) {
     function isSubset(subset: any, set: any) {
       return subset.every((item: any) => set.includes(item));
     }
@@ -67,17 +67,21 @@ function getStateStyleCSSFromStyleIdsAndProps(
       // Recursive function to flatten the object
       function flatten(obj: any, path: any = []) {
         // Iterate over the object's keys
-        for (const key of Object.keys(obj)) {
-          // If the value is an object, recurse
-          if (key === 'ids' && path.length > 0) {
-            flat[`${path.join('.')}`] = obj[key];
-          } else if (key === 'props') {
-            flat[`${path.join('.')}.${key}`] = obj[key];
-          } else if (typeof obj[key] === 'object') {
-            flatten(obj[key], [...path, key]);
-          } else {
-            // Otherwise, add the key-value pair to the flat object
-            flat[`${path.join('.')}`] = obj[key];
+
+        if (Array.isArray(obj)) {
+          flat[`${path.join('.')}`] = obj;
+        } else {
+          for (const key of Object.keys(obj)) {
+            // If the value is an object, recurse
+            if (key === 'ids' && path.length > 0) {
+              flat[`${path.join('.')}`] = obj[key];
+            } else if (key === 'props') {
+              flat[`${path.join('.')}.${key}`] = obj[key];
+            } else if (typeof obj[key] === 'object') {
+              flatten(obj[key], [...path, key]);
+            } else {
+              flat[`${path.join('.')}`] = obj[key];
+            }
           }
         }
       }
@@ -333,6 +337,7 @@ function getMergedStateAndColorModeCSSIdsAndProps(
   } else {
     stateStyleCSSIds = [...stateBaseStyleCSSIds, ...stateVariantStyleCSSIds];
   }
+
   return { cssIds: stateStyleCSSIds, passingProps: props };
 }
 
@@ -549,8 +554,8 @@ export function verboseStyled<P, Variants, Sizes>(
     {
       as,
       ...properties
-    }: P &
-      Partial<ComponentProps<ReactNativeStyles, Variants>> &
+    }: Omit<P, keyof Variants> &
+      Partial<ComponentProps<ReactNativeStyles, Variants, P>> &
       Partial<UtilityProps<ReactNativeStyles>> & {
         as?: any;
       },

packages/react/src/types.ts

@@ -194,13 +194,15 @@ export type StyledThemeProps<Variants, Sizes, X> = {
   };
 };
 
-export type ComponentProps<X, Variants> =
+export type ComponentProps<X, Variants, P> =
   | (SxStyleProps<X, Variants> & {
       states?: {
         [K in IState]?: boolean;
       };
     }) & {
-      [Key in keyof Variants]?: keyof Variants[Key];
+      [Key in keyof Variants]?: Key extends keyof P
+        ? P[Key] | keyof Variants[Key]
+        : keyof Variants;
     };
 
 // //Config typings

packages/react/src/utils/cssify/utils/react-native-web/normalizeColor.ts

@@ -26,6 +26,8 @@ const isWebColor = (color: string): boolean =>
   color === 'currentcolor' ||
   color === 'currentColor' ||
   color === 'inherit' ||
+  color === 'initial' ||
+  color === 'unset' ||
   color.indexOf('var(') === 0;
 
 const normalizeColor = (

packages/react/src/utils/cssify/utils/react-native-web/preprocess.ts

@@ -1,6 +1,6 @@
 import normalizeColor from './normalizeColor';
 import normalizeValueWithProperty from './normalizeValueWithProperty';
-
+import { CSSPropertiesMap } from '../../../../core/styled-system';
 const defaultOffset = { height: 0, width: 0 };
 
 export const createBoxShadowValue = (style: any): void | string => {
@@ -39,14 +39,21 @@ export const createTextShadowValue = (style: any): void | string => {
     return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
   }
 };
+const getResetValue = (propName: string, propValue: string) => {
+  // @ts-ignore
+  return CSSPropertiesMap[propName] || propValue;
+};
 /**
  * Preprocess styles
  */
 export const preprocess = (originalStyle: any) => {
   const style = originalStyle || {};
   const nextStyle: any = {};
   for (const originalProp in style) {
-    const originalValue = style[originalProp];
+    const originalValue =
+      typeof style[originalProp] !== 'undefined'
+        ? style[originalProp]
+        : getResetValue(originalProp, style[originalProp]);
 
     let prop = originalProp;
     let value = originalValue;