react-native-unistyles 3.0.0-alpha.33 → 3.0.0-alpha.34

package/src/specs/UnistylesRuntime/index.js

@@ -1,20 +0,0 @@
-import { processColor } from 'react-native';
-import { NitroModules } from 'react-native-nitro-modules';
-import { attachStatusBarJSMethods } from '../StatusBar';
-import { attachNavigationBarJSMethods } from '../NavigtionBar';
-import { isIOS } from '../../common';
-const HybridUnistylesRuntime = NitroModules
-    .createHybridObject('UnistylesRuntime');
-HybridUnistylesRuntime.statusBar = HybridUnistylesRuntime.createHybridStatusBar();
-HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNavigationBar();
-HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor;
-HybridUnistylesRuntime.setRootViewBackgroundColor = (color) => {
-    const parsedColor = processColor(color) ?? 0;
-    HybridUnistylesRuntime._setRootViewBackgroundColor(parsedColor);
-};
-if (isIOS) {
-    HybridUnistylesRuntime.setImmersiveMode = (isEnabled) => HybridUnistylesRuntime.statusBar.setHidden(isEnabled, 'fade');
-}
-attachStatusBarJSMethods(HybridUnistylesRuntime.statusBar);
-attachNavigationBarJSMethods(HybridUnistylesRuntime.navigationBar);
-export const Runtime = HybridUnistylesRuntime;

package/src/specs/index.js

@@ -1,8 +0,0 @@
-import './TurboUnistyles';
-import { Runtime } from './UnistylesRuntime';
-import { StyleSheet } from './StyleSheet';
-import { UnistylesShadowRegistry } from './ShadowRegistry';
-import { StatusBarStyle, ColorScheme, Orientation } from './types';
-import { UnistyleDependency } from './NativePlatform';
-export { StatusBarStyle, ColorScheme, Orientation, UnistyleDependency };
-export { UnistylesShadowRegistry, Runtime as UnistylesRuntime, StyleSheet, };

package/src/specs/index.web.js

@@ -1,2 +0,0 @@
-export const getSSRUnistyles = () => [];
-export * from '../web';

package/src/specs/types.js

@@ -1,17 +0,0 @@
-export var ColorScheme;
-(function (ColorScheme) {
-    ColorScheme["Light"] = "light";
-    ColorScheme["Dark"] = "dark";
-    ColorScheme["Unspecified"] = "unspecified";
-})(ColorScheme || (ColorScheme = {}));
-export var Orientation;
-(function (Orientation) {
-    Orientation["Portrait"] = "portrait";
-    Orientation["Landscape"] = "landscape";
-})(Orientation || (Orientation = {}));
-export var StatusBarStyle;
-(function (StatusBarStyle) {
-    StatusBarStyle["Default"] = "default";
-    StatusBarStyle["Light"] = "light";
-    StatusBarStyle["Dark"] = "dark";
-})(StatusBarStyle || (StatusBarStyle = {}));

package/src/types/accessibility.js

@@ -1,30 +0,0 @@
-export var IOSContentSizeCategory;
-(function (IOSContentSizeCategory) {
-    IOSContentSizeCategory["AccessibilityExtraExtraExtraLarge"] = "accessibilityExtraExtraExtraLarge";
-    IOSContentSizeCategory["AccessibilityExtraExtraLarge"] = "accessibilityExtraExtraLarge";
-    IOSContentSizeCategory["AccessibilityExtraLarge"] = "accessibilityExtraLarge";
-    IOSContentSizeCategory["AccessibilityLarge"] = "accessibilityLarge";
-    IOSContentSizeCategory["AccessibilityMedium"] = "accessibilityMedium";
-    IOSContentSizeCategory["ExtraExtraExtraLarge"] = "xxxLarge";
-    IOSContentSizeCategory["ExtraExtraLarge"] = "xxLarge";
-    IOSContentSizeCategory["ExtraLarge"] = "xLarge";
-    IOSContentSizeCategory["Large"] = "Large";
-    IOSContentSizeCategory["Medium"] = "Medium";
-    IOSContentSizeCategory["Small"] = "Small";
-    IOSContentSizeCategory["ExtraSmall"] = "xSmall";
-    IOSContentSizeCategory["Unspecified"] = "unspecified";
-})(IOSContentSizeCategory || (IOSContentSizeCategory = {}));
-export var AndroidContentSizeCategory;
-(function (AndroidContentSizeCategory) {
-    AndroidContentSizeCategory["Small"] = "Small";
-    AndroidContentSizeCategory["Default"] = "Default";
-    AndroidContentSizeCategory["Large"] = "Large";
-    AndroidContentSizeCategory["ExtraLarge"] = "ExtraLarge";
-    AndroidContentSizeCategory["Huge"] = "Huge";
-    AndroidContentSizeCategory["ExtraHuge"] = "ExtraHuge";
-    AndroidContentSizeCategory["ExtraExtraHuge"] = "ExtraExtraHuge";
-})(AndroidContentSizeCategory || (AndroidContentSizeCategory = {}));
-export var WebContentSizeCategory;
-(function (WebContentSizeCategory) {
-    WebContentSizeCategory["Unspecified"] = "web-unspecified";
-})(WebContentSizeCategory || (WebContentSizeCategory = {}));

package/src/types/breakpoints.js

@@ -1 +0,0 @@
-export {};

package/src/types/common.js

@@ -1 +0,0 @@
-export {};

package/src/types/core.js

@@ -1 +0,0 @@
-export {};

package/src/types/index.js

@@ -1 +0,0 @@
-export { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from './accessibility';

package/src/types/stylesheet.js

@@ -1,2 +0,0 @@
-const create = (stylesheet) => stylesheet;
-export {};

package/src/types/variants.js

@@ -1 +0,0 @@
-export {};

package/src/web/convert/boxShadow.js

@@ -1,59 +0,0 @@
-import { deepMergeObjects, warn } from '../utils';
-import { validateShadow } from './shadow';
-import { BOX_SHADOW_STYLES } from './types';
-import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
-const createBoxShadowValue = (style) => {
-    // at this point every prop is present
-    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
-    const offsetX = normalizeNumericValue(shadowOffset.width);
-    const offsetY = normalizeNumericValue(shadowOffset.height);
-    const radius = normalizeNumericValue(shadowRadius);
-    const color = normalizeColor(shadowColor, shadowOpacity);
-    return `${offsetX} ${offsetY} ${radius} ${color}`;
-};
-export const getBoxShadowStyle = (styles) => {
-    const missingStyles = BOX_SHADOW_STYLES.filter(key => !(key in styles));
-    if (missingStyles.length) {
-        warn(`can't apply box shadow as you miss these properties: ${missingStyles.join(', ')}`);
-        return {};
-    }
-    const breakpointsSet = new Set();
-    try {
-        validateShadow(BOX_SHADOW_STYLES, styles, breakpointsSet);
-    }
-    catch (error) {
-        if (typeof error === 'string') {
-            warn(error);
-        }
-        return {};
-    }
-    const breakpoints = Array.from(breakpointsSet);
-    // If no breakpoints were used return styles without media queries
-    if (breakpoints.length === 0) {
-        return {
-            boxShadow: createBoxShadowValue(styles)
-        };
-    }
-    // Create boxShadow for each breakpoint
-    const breakpointStyles = breakpoints.map(breakpoint => {
-        const color = extractShadowValue('shadowColor', breakpoint, styles);
-        const { width, height } = extractShadowValue('shadowOffset', breakpoint, styles);
-        const radius = extractShadowValue('shadowRadius', breakpoint, styles);
-        const opacity = extractShadowValue('shadowOpacity', breakpoint, styles);
-        return {
-            [breakpoint]: {
-                boxShadow: createBoxShadowValue({
-                    shadowColor: color,
-                    shadowOffset: {
-                        width,
-                        height
-                    },
-                    shadowRadius: radius,
-                    shadowOpacity: opacity
-                })
-            }
-        };
-    });
-    // Merge all breakpoints styles into one
-    return deepMergeObjects(...breakpointStyles);
-};

package/src/web/convert/index.js

@@ -1,56 +0,0 @@
-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/src/web/convert/pseudo.js

@@ -1,131 +0,0 @@
-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/shadow.js

@@ -1,50 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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/src/web/convert/textShadow.js

@@ -1,56 +0,0 @@
-import { deepMergeObjects, warn } from '../utils';
-import { validateShadow } from './shadow';
-import { TEXT_SHADOW_STYLES } from './types';
-import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
-const createTextShadowValue = (style) => {
-    const { textShadowColor, textShadowOffset, textShadowRadius } = style;
-    const offsetX = normalizeNumericValue(textShadowOffset.width);
-    const offsetY = normalizeNumericValue(textShadowOffset.height);
-    const radius = normalizeNumericValue(textShadowRadius);
-    const color = normalizeColor(textShadowColor);
-    return `${offsetX} ${offsetY} ${radius} ${color}`;
-};
-export const getTextShadowStyle = (styles) => {
-    const missingStyles = TEXT_SHADOW_STYLES.filter(key => !(key in styles));
-    if (missingStyles.length) {
-        warn(`can't apply text shadow as you miss these properties: ${missingStyles.join(', ')}`);
-        return {};
-    }
-    const breakpointsSet = new Set();
-    try {
-        validateShadow(TEXT_SHADOW_STYLES, styles, breakpointsSet);
-    }
-    catch (error) {
-        if (typeof error === 'string') {
-            warn(error);
-        }
-        return {};
-    }
-    const breakpoints = Array.from(breakpointsSet);
-    // If no breakpoints were used return styles without media queries
-    if (breakpoints.length === 0) {
-        return {
-            textShadow: createTextShadowValue(styles)
-        };
-    }
-    // Create textShadow for each breakpoint
-    const breakpointStyles = breakpoints.map(breakpoint => {
-        const color = extractShadowValue('textShadowColor', breakpoint, styles);
-        const { width, height } = extractShadowValue('textShadowOffset', breakpoint, styles);
-        const radius = extractShadowValue('textShadowRadius', breakpoint, styles);
-        return {
-            [breakpoint]: {
-                textShadow: createTextShadowValue({
-                    textShadowColor: color,
-                    textShadowOffset: {
-                        width,
-                        height
-                    },
-                    textShadowRadius: radius
-                })
-            }
-        };
-    });
-    // Merge all breakpoints styles into one
-    return deepMergeObjects(...breakpointStyles);
-};

package/src/web/convert/transform.js

@@ -1,65 +0,0 @@
-import { deepMergeObjects, keyInObject } from '../utils';
-import { normalizeNumericValue } from './utils';
-const normalizeTransform = (key, value) => {
-    if (key.includes('scale')) {
-        return value;
-    }
-    if (typeof value === 'number') {
-        return normalizeNumericValue(value);
-    }
-    return value;
-};
-const createTransformValue = (transforms) => transforms
-    .map(transform => {
-    const [key] = Object.keys(transform);
-    if (!key) {
-        return undefined;
-    }
-    const value = transform[key];
-    switch (key) {
-        case 'matrix':
-        case 'matrix3d':
-            return `${key}(${value.join(',')})`;
-        default:
-            return `${key}(${normalizeTransform(key, value)})`;
-    }
-})
-    .filter(Boolean)
-    .join(' ');
-export const getTransformStyle = (transforms) => {
-    const breakpoints = new Set();
-    const normalTransforms = [];
-    transforms.forEach(transform => {
-        const [property] = Object.keys(transform);
-        if (!property) {
-            return;
-        }
-        const value = transform[property];
-        if (typeof value === 'object' && !Array.isArray(value)) {
-            Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint));
-            return;
-        }
-        normalTransforms.push(transform);
-    });
-    const breakpointTransforms = Array.from(breakpoints).flatMap(breakpoint => {
-        const transformsPerBreakpoint = transforms.flatMap(transform => {
-            const [property] = Object.keys(transform);
-            if (!property) {
-                return [];
-            }
-            const value = transform[property];
-            if (typeof value === 'object' && !Array.isArray(value)) {
-                return keyInObject(value, breakpoint) ? [{ [property]: value[breakpoint] }] : [];
-            }
-            return [];
-        });
-        return [{
-                [breakpoint]: {
-                    transform: createTransformValue(transformsPerBreakpoint)
-                }
-            }];
-    });
-    return deepMergeObjects({
-        transform: createTransformValue(normalTransforms)
-    }, ...breakpointTransforms);
-};

package/src/web/convert/types.js

@@ -1,2 +0,0 @@
-export const TEXT_SHADOW_STYLES = ['textShadowColor', 'textShadowOffset', 'textShadowRadius'];
-export const BOX_SHADOW_STYLES = ['shadowColor', 'shadowRadius', 'shadowOpacity', 'shadowOffset'];