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

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'];

package/src/web/convert/utils.js

@@ -1,39 +0,0 @@
-// based on react-native-web normalizer
-// https://github.com/necolas/react-native-web
-import normalizeColors from '@react-native/normalize-colors';
-import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES } from './types';
-export const isTransform = (key, value) => key === 'transform' && Array.isArray(value);
-export const isTextShadow = (key) => TEXT_SHADOW_STYLES.includes(key);
-export const isBoxShadow = (key) => BOX_SHADOW_STYLES.includes(key);
-export const normalizeNumericValue = (value) => value ? `${value}px` : value;
-export const normalizeColor = (color, opacity = 1) => {
-    // If the opacity is 1 there's no need to normalize the color
-    if (opacity === 1) {
-        return color;
-    }
-    const integer = normalizeColors(color);
-    // If the color is an unknown format, the return value is null
-    if (integer === null) {
-        return color;
-    }
-    const hex = integer.toString(16).padStart(8, '0');
-    if (hex.length === 8) {
-        const [r = 0, g = 0, b = 0, a = 1] = hex
-            .split(/(?=(?:..)*$)/)
-            .map(x => parseInt(x, 16))
-            .filter(num => !isNaN(num));
-        return `rgba(${r},${g},${b},${(a / 255) * opacity})`;
-    }
-    return color;
-};
-export const extractShadowValue = (key, breakpoint, styles) => {
-    const value = styles[key];
-    if (key === 'textShadowOffset' || key === 'shadowOffset') {
-        const { width, height } = value;
-        return {
-            width: typeof width === 'object' ? width[breakpoint] : width,
-            height: typeof height === 'object' ? height[breakpoint] : height
-        };
-    }
-    return typeof value === 'object' ? value[breakpoint] : value;
-};

package/src/web/create.js

@@ -1,36 +0,0 @@
-import { assignSecrets, reduceObject, getStyles, deepMergeObjects } from './utils';
-import { UnistylesRuntime } from './runtime';
-import { createUseVariants, getVariants } from './variants';
-export const create = (stylesheet) => {
-    const computedStylesheet = typeof stylesheet === 'function'
-        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-        : stylesheet;
-    const selectedVariants = new Map();
-    const copyVariants = () => Object.fromEntries(selectedVariants.entries());
-    const addSecrets = (value, key, args) => assignSecrets(value, {
-        __uni__key: key,
-        __uni__refs: new Set(),
-        __uni__stylesheet: stylesheet,
-        __uni__args: args,
-        __uni__variants: copyVariants()
-    });
-    const styles = reduceObject(computedStylesheet, (value, _key) => {
-        const key = String(_key);
-        if (typeof value === 'function') {
-            const dynamicStyle = (...args) => {
-                const result = value(...args);
-                const variants = Object.fromEntries(getVariants({ [key]: result }, copyVariants()));
-                const resultWithVariants = deepMergeObjects(result, variants[key] ?? {});
-                // Add secrets to result of dynamic styles function
-                return addSecrets(getStyles(resultWithVariants), key, args);
-            };
-            // Add secrets to dynamic styles function
-            return addSecrets(dynamicStyle, key);
-        }
-        // Add secrets to static styles
-        return addSecrets(getStyles(value), key);
-    });
-    // Inject useVariants hook to styles
-    createUseVariants(styles, newVariants => Object.entries(newVariants).forEach(([key, value]) => selectedVariants.set(key, value)));
-    return styles;
-};

package/src/web/index.js

@@ -1,22 +0,0 @@
-import { create } from './create';
-import { UnistylesState } from './state';
-import { deepMergeObjects } from './utils';
-export const StyleSheet = {
-    configure: UnistylesState.init,
-    create,
-    absoluteFill: {
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-    },
-    compose: (a, b) => deepMergeObjects(a, b),
-    flatten: (...styles) => deepMergeObjects(...styles),
-    hairlineWidth: 1
-};
-export { UnistylesRuntime } from './runtime';
-export { UnistylesShadowRegistry } from './shadowRegistry';
-export * from './mock';
-// TODO: Work on SSR
-export const getSSRUnistyles = () => [];

package/src/web/listener.js

@@ -1,26 +0,0 @@
-import { UnistyleDependency } from '../specs/NativePlatform';
-import { UnistylesRuntime } from './runtime';
-class UnistylesListenerBuilder {
-    isInitialized = false;
-    listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set());
-    emitChange = (dependency) => {
-        this.listeners[dependency]?.forEach(listener => listener());
-    };
-    initListeners = () => {
-        if (this.isInitialized) {
-            return;
-        }
-        this.isInitialized = true;
-        UnistylesRuntime.darkMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme));
-        UnistylesRuntime.lightMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme));
-        window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation));
-        window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions));
-    };
-    addListeners = (dependencies, listener) => {
-        dependencies.forEach(dependency => this.listeners[dependency]?.add(listener));
-        return () => {
-            dependencies.forEach(dependency => this.listeners[dependency]?.delete(listener));
-        };
-    };
-}
-export const UnistylesListener = new UnistylesListenerBuilder();

package/src/web/mock.js

@@ -1,21 +0,0 @@
-export const StatusBar = {
-    width: 0,
-    height: 0,
-    setStyle: () => { },
-    setHidden: () => { },
-    setBackgroundColor: () => { },
-    equals: () => true,
-    toString: () => 'StatusBar',
-    __type: 'web',
-    name: 'StatusBar'
-};
-export const NavigationBar = {
-    width: 0,
-    height: 0,
-    setHidden: () => { },
-    setBackgroundColor: () => { },
-    equals: () => true,
-    toString: () => 'NavigationBar',
-    __type: 'web',
-    name: 'NavigationBar'
-};

package/src/web/mq.js

@@ -1,14 +0,0 @@
-const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/;
-const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/;
-const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/;
-export const parseMq = (mq) => {
-    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || [];
-    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || [];
-    return {
-        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
-        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
-        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
-        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
-    };
-};
-export const isUnistylesMq = (mq) => IS_UNISTYLES_REGEX.test(mq);

package/src/web/mq.ts

@@ -1,17 +0,0 @@
-const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-
-export const parseMq = (mq: string) => {
-    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
-    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
-
-    return {
-        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
-        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
-        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
-        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
-    }
-}
-
-export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)