react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/src/web/convert/index.js

@@ -0,0 +1,56 @@
+import { isPseudo } from './pseudo';
+import { getStyle } from './style';
+import { deepMergeObjects } from '../utils';
+import { getTransformStyle } from './transform';
+import { isBoxShadow, isTextShadow, isTransform } from './utils';
+import { getTextShadowStyle } from './textShadow';
+import { getBoxShadowStyle } from './boxShadow';
+export const convertUnistyles = (value) => {
+    // Flag to mark if textShadow is already created
+    let hasTextShadow = false;
+    // Flag to mark if boxShadow is already created
+    let hasBoxShadow = false;
+    const stylesArray = Object.entries({
+        ...value,
+        ...value._web
+    }).flatMap(([unistylesKey, unistylesValue]) => {
+        // Keys to omit
+        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
+            return [];
+        }
+        // Pseudo classes :hover, :before etc.
+        if (isPseudo(unistylesKey)) {
+            const flattenValues = convertUnistyles(unistylesValue);
+            return { [unistylesKey]: flattenValues };
+        }
+        // Text shadow
+        if (isTextShadow(unistylesKey)) {
+            if (hasTextShadow) {
+                return [];
+            }
+            hasTextShadow = true;
+            return getTextShadowStyle(value);
+        }
+        // Box shadow
+        if (isBoxShadow(unistylesKey)) {
+            if (hasBoxShadow) {
+                return [];
+            }
+            hasBoxShadow = true;
+            return getBoxShadowStyle(value);
+        }
+        // Transforms
+        if (isTransform(unistylesKey, unistylesValue)) {
+            return getTransformStyle(unistylesValue);
+        }
+        // Breakpoints
+        if (typeof unistylesValue === 'object' && unistylesValue !== null) {
+            return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
+                return { [breakpointKey]: getStyle(unistylesKey, breakpointValue) };
+            });
+        }
+        // Regular styles
+        return getStyle(unistylesKey, unistylesValue);
+    });
+    return deepMergeObjects(...stylesArray);
+};

package/{web → src/web}/convert/index.ts

@@ -1,8 +1,5 @@
-import type { NestedCSSProperties } from 'typestyle/lib/types'
-import type { UnistylesValues } from '../../src/types'
-import { media } from 'typestyle'
-import { isPseudo } from '../pseudo'
-import { convertBreakpoint } from './breakpoint'
+import type { UnistylesValues } from '../../types'
+import { isPseudo } from './pseudo'
 import { getStyle } from './style'
 import { deepMergeObjects } from '../utils'
 import { getTransformStyle } from './transform'
@@ -10,7 +7,7 @@ import { isBoxShadow, isTextShadow, isTransform } from './utils'
 import { getTextShadowStyle } from './textShadow'
 import { getBoxShadowStyle } from './boxShadow'
 
-export const convertToTypeStyle = (value: UnistylesValues) => {
+export const convertUnistyles = (value: UnistylesValues) => {
     // Flag to mark if textShadow is already created
     let hasTextShadow = false
     // Flag to mark if boxShadow is already created
@@ -21,19 +18,15 @@ export const convertToTypeStyle = (value: UnistylesValues) => {
         ...value._web
     }).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
-        if (['_css', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey)) {
+        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
             return []
         }
 
         // Pseudo classes :hover, :before etc.
         if (isPseudo(unistylesKey)) {
-            const typestyleValues = convertToTypeStyle(unistylesValue as UnistylesValues)
+            const flattenValues = convertUnistyles(unistylesValue as UnistylesValues)
 
-            return {
-                $nest: {
-                    [unistylesKey.replace('_', '&:')]: typestyleValues
-                }
-            }
+            return { [unistylesKey]: flattenValues }
         }
 
         // Text shadow
@@ -66,13 +59,13 @@ export const convertToTypeStyle = (value: UnistylesValues) => {
         // Breakpoints
         if (typeof unistylesValue === 'object' && unistylesValue !== null) {
             return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
-                return media(convertBreakpoint(breakpointKey), getStyle(unistylesKey, breakpointValue))
+                return { [breakpointKey]: getStyle(unistylesKey, breakpointValue) }
             })
         }
 
         // Regular styles
         return getStyle(unistylesKey, unistylesValue)
-    }) as Array<NestedCSSProperties>
+    }) as Array<Record<string, any>>
 
     return deepMergeObjects(...stylesArray)
 }

package/src/web/convert/pseudo.js

@@ -0,0 +1,131 @@
+export const pseudos = [
+    '_-moz-broken',
+    '_-moz-drag-over',
+    '_-moz-first-node',
+    '_-moz-handler-blocked',
+    '_-moz-handler-crashed',
+    '_-moz-handler-disabled',
+    '_-moz-last-node',
+    '_-moz-loading',
+    '_-moz-locale-dir(ltr)',
+    '_-moz-locale-dir(rtl)',
+    '_-moz-only-whitespace',
+    '_-moz-submit-invalid',
+    '_-moz-suppressed',
+    '_-moz-user-disabled',
+    '_-moz-window-inactive',
+    '_active',
+    '_any-link',
+    '_autofill',
+    '_blank',
+    '_buffering',
+    '_checked',
+    '_current',
+    '_default',
+    '_defined',
+    '_dir(',
+    '_disabled',
+    '_empty',
+    '_enabled',
+    '_first',
+    '_first-child',
+    '_first-of-type',
+    '_focus',
+    '_focus-visible',
+    '_focus-within',
+    '_fullscreen',
+    '_future',
+    '_has(',
+    '_host',
+    '_host-context(',
+    '_host(',
+    '_hover',
+    '_in-range',
+    '_indeterminate',
+    '_invalid',
+    '_is(',
+    '_lang(',
+    '_last-child',
+    '_last-of-type',
+    '_left',
+    '_link',
+    '_local-link',
+    '_modal',
+    '_muted',
+    '_not(',
+    '_nth-child(',
+    '_nth-last-child(',
+    '_nth-last-of-type(',
+    '_nth-of-type(',
+    '_only-child',
+    '_only-of-type',
+    '_optional',
+    '_out-of-range',
+    '_past',
+    '_paused',
+    '_picture-in-picture',
+    '_placeholder-shown',
+    '_playing',
+    '_popover-open',
+    '_read-only',
+    '_read-write',
+    '_required',
+    '_right',
+    '_scope',
+    '_seeking',
+    '_stalled',
+    '_state(',
+    '_target',
+    '_target-within',
+    '_user-invalid',
+    '_user-valid',
+    '_valid',
+    '_visited',
+    '_volume-locked',
+    '_where(',
+    '_-moz-color-swatch',
+    '_-moz-focus-inner',
+    '_-moz-list-bullet',
+    '_-moz-list-number',
+    '_-moz-meter-bar',
+    '_-moz-progress-bar',
+    '_-moz-range-progress',
+    '_-moz-range-thumb',
+    '_-moz-range-track',
+    '_-webkit-inner-spin-button',
+    '_-webkit-meter-barDeprecated',
+    '_-webkit-meter-even-less-good-value',
+    '_-webkit-meter-inner-element',
+    '_-webkit-meter-optimum-value',
+    '_-webkit-meter-suboptimum-value',
+    '_-webkit-progress-bar',
+    '_-webkit-progress-inner-element',
+    '_-webkit-progress-value',
+    '_-webkit-scrollbar',
+    '_-webkit-search-cancel-button',
+    '_-webkit-search-results-button',
+    '_-webkit-slider-runnable-track',
+    '_-webkit-slider-thumb',
+    '_after',
+    '_backdrop',
+    '_before',
+    '_cue',
+    '_file-selector-button',
+    '_first-letter',
+    '_first-line',
+    '_grammar-error',
+    '_highlight(',
+    '_marker',
+    '_part(',
+    '_placeholder',
+    '_selection',
+    '_slotted(',
+    '_spelling-error',
+    '_target-text',
+    '_view-transition',
+    '_view-transition-group',
+    '_view-transition-image-pair',
+    '_view-transition-new',
+    '_view-transition-old',
+];
+export const isPseudo = (selector) => pseudos.some(pseudo => selector.startsWith(pseudo));

package/src/web/convert/pseudo.ts

@@ -0,0 +1,137 @@
+export const pseudos = [
+    '_-moz-broken',
+    '_-moz-drag-over',
+    '_-moz-first-node',
+    '_-moz-handler-blocked',
+    '_-moz-handler-crashed',
+    '_-moz-handler-disabled',
+    '_-moz-last-node',
+    '_-moz-loading',
+    '_-moz-locale-dir(ltr)',
+    '_-moz-locale-dir(rtl)',
+    '_-moz-only-whitespace',
+    '_-moz-submit-invalid',
+    '_-moz-suppressed',
+    '_-moz-user-disabled',
+    '_-moz-window-inactive',
+    '_active',
+    '_any-link',
+    '_autofill',
+    '_blank',
+    '_buffering',
+    '_checked',
+    '_current',
+    '_default',
+    '_defined',
+    '_dir(',
+    '_disabled',
+    '_empty',
+    '_enabled',
+    '_first',
+    '_first-child',
+    '_first-of-type',
+    '_focus',
+    '_focus-visible',
+    '_focus-within',
+    '_fullscreen',
+    '_future',
+    '_has(',
+    '_host',
+    '_host-context(',
+    '_host(',
+    '_hover',
+    '_in-range',
+    '_indeterminate',
+    '_invalid',
+    '_is(',
+    '_lang(',
+    '_last-child',
+    '_last-of-type',
+    '_left',
+    '_link',
+    '_local-link',
+    '_modal',
+    '_muted',
+    '_not(',
+    '_nth-child(',
+    '_nth-last-child(',
+    '_nth-last-of-type(',
+    '_nth-of-type(',
+    '_only-child',
+    '_only-of-type',
+    '_optional',
+    '_out-of-range',
+    '_past',
+    '_paused',
+    '_picture-in-picture',
+    '_placeholder-shown',
+    '_playing',
+    '_popover-open',
+    '_read-only',
+    '_read-write',
+    '_required',
+    '_right',
+    '_scope',
+    '_seeking',
+    '_stalled',
+    '_state(',
+    '_target',
+    '_target-within',
+    '_user-invalid',
+    '_user-valid',
+    '_valid',
+    '_visited',
+    '_volume-locked',
+    '_where(',
+    '_-moz-color-swatch',
+    '_-moz-focus-inner',
+    '_-moz-list-bullet',
+    '_-moz-list-number',
+    '_-moz-meter-bar',
+    '_-moz-progress-bar',
+    '_-moz-range-progress',
+    '_-moz-range-thumb',
+    '_-moz-range-track',
+    '_-webkit-inner-spin-button',
+    '_-webkit-meter-barDeprecated',
+    '_-webkit-meter-even-less-good-value',
+    '_-webkit-meter-inner-element',
+    '_-webkit-meter-optimum-value',
+    '_-webkit-meter-suboptimum-value',
+    '_-webkit-progress-bar',
+    '_-webkit-progress-inner-element',
+    '_-webkit-progress-value',
+    '_-webkit-scrollbar',
+    '_-webkit-search-cancel-button',
+    '_-webkit-search-results-button',
+    '_-webkit-slider-runnable-track',
+    '_-webkit-slider-thumb',
+    '_after',
+    '_backdrop',
+    '_before',
+    '_cue',
+    '_file-selector-button',
+    '_first-letter',
+    '_first-line',
+    '_grammar-error',
+    '_highlight(',
+    '_marker',
+    '_part(',
+    '_placeholder',
+    '_selection',
+    '_slotted(',
+    '_spelling-error',
+    '_target-text',
+    '_view-transition',
+    '_view-transition-group',
+    '_view-transition-image-pair',
+    '_view-transition-new',
+    '_view-transition-old',
+] as const
+
+export const isPseudo = (selector: string) => pseudos.some(pseudo => selector.startsWith(pseudo))
+
+type AddDynamicSelector<T extends string> = T extends `${infer U}(` ? `${U}(${string})` : T
+
+export type Pseudo = AddDynamicSelector<typeof pseudos[number]>
+

package/src/web/convert/shadow.js

@@ -0,0 +1,50 @@
+export const validateShadow = (shadowProperties, styles, breakpoints) => {
+    // Collect breakpoints
+    shadowProperties.forEach(key => {
+        const value = styles[key];
+        if (typeof value !== 'object') {
+            return;
+        }
+        if (key === 'shadowOffset' || key === 'textShadowOffset') {
+            const { width, height } = value;
+            // If shadowOffset.width has breakpoints
+            if (typeof width === 'object') {
+                Object.keys(width).forEach(breakpoint => breakpoints.add(breakpoint));
+            }
+            // If shadowOffset.height has breakpoints
+            if (typeof height === 'object') {
+                Object.keys(height).forEach(breakpoint => breakpoints.add(breakpoint));
+            }
+            return;
+        }
+        // Collect regular breakpoints
+        Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint));
+    });
+    // Validate if all breakpoints are present
+    shadowProperties.forEach(key => {
+        const value = styles[key];
+        if (typeof value !== 'object') {
+            return;
+        }
+        if (key === 'shadowOffset' || key === 'textShadowOffset') {
+            const { width, height } = value;
+            if (typeof width === 'object') {
+                const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in width));
+                if (missingBreakpoints.length) {
+                    throw `missing breakpoints in ${key}.width: ${missingBreakpoints.join(', ')}`;
+                }
+            }
+            if (typeof height === 'object') {
+                const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in height));
+                if (missingBreakpoints.length) {
+                    throw `missing breakpoints in ${key}.height: ${missingBreakpoints.join(', ')}`;
+                }
+            }
+            return;
+        }
+        const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in value));
+        if (missingBreakpoints.length) {
+            throw `missing breakpoints in ${key}: ${missingBreakpoints.join(', ')}`;
+        }
+    });
+};

package/src/web/convert/style.js

@@ -0,0 +1,137 @@
+import { keyInObject } from '../utils';
+const SKIP_STYLES = [
+    'borderCurve',
+    'elevation',
+    'textAlignVertical',
+    'includeFontPadding',
+    'overlayColor',
+    'tintColor'
+];
+const CSS_NUMBER_KEYS = [
+    'animationIterationCount',
+    'borderImageOutset',
+    'borderImageSlice',
+    'borderImageWidth',
+    'boxFlex',
+    'boxFlexGroup',
+    'boxOrdinalGroup',
+    'columnCount',
+    'columns',
+    'counterIncrement',
+    'counterReset',
+    'flex',
+    'flexGrow',
+    'flexPositive',
+    'flexShrink',
+    'flexNegative',
+    'flexOrder',
+    'fontWeight',
+    'gridArea',
+    'gridColumn',
+    'gridColumnEnd',
+    'gridColumnSpan',
+    'gridColumnStart',
+    'gridRow',
+    'gridRowEnd',
+    'gridRowSpan',
+    'gridRowStart',
+    'line-clamp',
+    'line-height',
+    'opacity',
+    'order',
+    'orphans',
+    'tabSize',
+    'widows',
+    'zIndex',
+    'zoom',
+    'fillOpacity',
+    'floodOpacity',
+    'stopOpacity',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeMiterlimit',
+    'strokeOpacity',
+    'strokeWidth'
+];
+const convertMap = {
+    marginHorizontal: (value) => ({
+        marginInline: value
+    }),
+    marginVertical: (value) => ({
+        marginBlock: value
+    }),
+    paddingHorizontal: (value) => ({
+        paddingInline: value
+    }),
+    paddingVertical: (value) => ({
+        paddingBlock: value
+    }),
+    writingDirection: (value) => ({
+        direction: value
+    }),
+    borderBottomEndRadius: (value) => ({
+        borderBottomRightRadius: value
+    }),
+    borderBottomStartRadius: (value) => ({
+        borderBottomLeftRadius: value
+    }),
+    borderEndColor: (value) => ({
+        borderInlineEndColor: value
+    }),
+    borderStartColor: (value) => ({
+        borderInlineStartColor: value
+    }),
+    borderTopEndRadius: (value) => ({
+        borderTopRightRadius: value
+    }),
+    borderTopStartRadius: (value) => ({
+        borderTopLeftRadius: value
+    }),
+    borderEndWidth: (value) => ({
+        borderInlineEndWidth: value
+    }),
+    borderStartWidth: (value) => ({
+        borderInlineStartWidth: value
+    }),
+    end: (value) => ({
+        right: value
+    }),
+    start: (value) => ({
+        left: value
+    }),
+    marginEnd: (value) => ({
+        marginRight: value
+    }),
+    marginStart: (value) => ({
+        marginLeft: value
+    }),
+    paddingEnd: (value) => ({
+        paddingRight: value
+    }),
+    paddingStart: (value) => ({
+        paddingLeft: value
+    }),
+    transformMatrix: (value) => ({
+        transform: `matrix(${value.join(', ')})`
+    }),
+    resizeMode: (value) => ({
+        backgroundSize: value
+    })
+};
+const convertNumber = (key, value) => {
+    if (typeof value === 'number') {
+        return CSS_NUMBER_KEYS.includes(key, value) ? value : `${value}px`;
+    }
+    return value;
+};
+export const getStyle = (key, value) => {
+    if (SKIP_STYLES.includes(key)) {
+        return {};
+    }
+    if (keyInObject(convertMap, key)) {
+        return convertMap[key]?.(convertNumber(key, value)) ?? {};
+    }
+    return {
+        [key]: convertNumber(key, value)
+    };
+};

package/{web → src/web}/convert/style.ts

@@ -1,7 +1,6 @@
 import { keyInObject } from '../utils'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 
-const stylesToSkip = [
+const SKIP_STYLES = [
     'borderCurve',
     'elevation',
     'textAlignVertical',
@@ -10,6 +9,53 @@ const stylesToSkip = [
     'tintColor'
 ]
 
+const CSS_NUMBER_KEYS = [
+    'animationIterationCount',
+    'borderImageOutset',
+    'borderImageSlice',
+    'borderImageWidth',
+    'boxFlex',
+    'boxFlexGroup',
+    'boxOrdinalGroup',
+    'columnCount',
+    'columns',
+    'counterIncrement',
+    'counterReset',
+    'flex',
+    'flexGrow',
+    'flexPositive',
+    'flexShrink',
+    'flexNegative',
+    'flexOrder',
+    'fontWeight',
+    'gridArea',
+    'gridColumn',
+    'gridColumnEnd',
+    'gridColumnSpan',
+    'gridColumnStart',
+    'gridRow',
+    'gridRowEnd',
+    'gridRowSpan',
+    'gridRowStart',
+    'line-clamp',
+    'line-height',
+    'opacity',
+    'order',
+    'orphans',
+    'tabSize',
+    'widows',
+    'zIndex',
+    'zoom',
+    'fillOpacity',
+    'floodOpacity',
+    'stopOpacity',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeMiterlimit',
+    'strokeOpacity',
+    'strokeWidth'
+]
+
 const convertMap = {
     marginHorizontal: (value: number) => ({
         marginInline: value
@@ -73,22 +119,27 @@ const convertMap = {
     }),
     resizeMode: (value: string) => ({
         backgroundSize: value
-    }),
-    lineHeight: (value: number) => ({
-        lineHeight: `${value}px`
-    }),
-} as Record<PropertyKey, (value: any) => NestedCSSProperties>
+    })
+} as Record<PropertyKey, (value: any) => Record<string, any>>
+
+const convertNumber = (key: string, value: any) => {
+    if (typeof value === 'number') {
+        return CSS_NUMBER_KEYS.includes(key, value) ? value : `${value}px`
+    }
+
+    return value
+}
 
 export const getStyle = (key: string, value: any) => {
-    if (stylesToSkip.includes(key)) {
+    if (SKIP_STYLES.includes(key)) {
         return {}
     }
 
     if (keyInObject(convertMap, key)) {
-        return convertMap[key]?.(value) ?? {}
+        return convertMap[key]?.(convertNumber(key, value)) ?? {}
     }
 
     return {
-        [key]: value
+        [key]: convertNumber(key, value)
     }
 }