react-native-unistyles 3.0.0-alpha.26 → 3.0.0-alpha.28

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/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/src/web/convert/textShadow.js

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

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

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

package/src/web/convert/utils.js

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

@@ -0,0 +1,39 @@
+import { assignSecrets, reduceObject, getStyles } 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 = {
+                    ...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

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

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

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

@@ -0,0 +1,14 @@
+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);