react-native-unistyles 2.10.0 → 3.0.0-alpha.10

package/src/utils/cssMediaQuery.ts

@@ -1,268 +0,0 @@
-import { normalizeColor } from '../normalizer'
-import { isUnistylesMq, isValidMq, parseMq, type UnistylesParsedMq } from './mqParser'
-import type { RNStyle, RNValue } from '../types'
-import { generateReactNativeWebId } from './generateId'
-import type { UnistylesRuntime } from '../core'
-
-export const createMediaQueryForStyles = (styles: RNStyle, runtime: UnistylesRuntime): RNStyle => {
-    const withMediaQueries = Object
-        .entries(styles)
-        .filter(([, value]) => typeof value === 'object')
-        .reduce((acc, [prop, value]) => {
-            const objectKeys = Object.keys(value)
-            const mediaQueries = objectKeys.filter(key => isUnistylesMq(key))
-            const breakpoints = objectKeys.filter(key => runtime.breakpoints[key as keyof typeof runtime.breakpoints])
-
-            if (mediaQueries.length === 0 && breakpoints.length === 0) {
-                return acc
-            }
-
-            const className = generateReactNativeWebId(prop, '""')
-            const breakpointsStyles = getBreakpointsStyles(prop, value as Record<string, RNValue>, runtime, className)
-            const mediaQueriesStyles = getMediaQueriesFromMQ(prop, value as Record<string, RNValue>, className)
-
-            return {
-                ...acc,
-                [prop]: `
-                    ${breakpointsStyles} 
-                    ${mediaQueriesStyles}
-                `.trim()
-            }
-        }, {})
-
-    return {
-        ...styles,
-        ...withMediaQueries
-    }
-}
-
-const getMaxWidthMediaQuery = (width: UnistylesParsedMq['width']): string => {
-    if (!width) {
-        return ''
-    }
-
-    if (width.to === Infinity) {
-        return ''
-    }
-
-    return `and (max-width: ${width.to}px)`
-}
-
-const getMaxHeightMediaQuery = (height: UnistylesParsedMq['height']): string => {
-    if (!height) {
-        return ''
-    }
-
-    if (height.to === Infinity) {
-        return ''
-    }
-
-    return `and (max-height: ${height.to}px)`
-}
-
-const getMediaQueriesFromMQ = (prop: string, value: Record<string, RNValue>, className: string): string => Object
-    .entries(value)
-    .reduce((acc, [key, value]) => {
-        const result = parseMq(key)
-
-        if (!isValidMq(result)) {
-            return acc
-        }
-
-        if (result.width && result.height) {
-            return `${acc}
-
-                @media screen and (min-width: ${result.width.from}px) and (min-height: ${result.height.from}px) ${getMaxWidthMediaQuery(result.width)} ${getMaxHeightMediaQuery(result.height)} {
-                    .${className} {
-                        ${normalizePropName(prop)}: ${normalizeWebValue(prop, value)};
-                    }
-                }
-            `
-        }
-
-        if (result.width) {
-            return `${acc}
-
-                @media screen and (min-width: ${result.width.from}px) ${getMaxWidthMediaQuery(result.width)} {
-                    .${className} {
-                        ${normalizePropName(prop)}: ${normalizeWebValue(prop, value)};
-                    }
-                }
-            `
-        }
-
-        if (result.height) {
-            return `${acc}
-
-                @media screen and (min-height: ${result.height.from}px) ${getMaxHeightMediaQuery(result.height)} {
-                    .${className} {
-                        ${normalizePropName(prop)}: ${normalizeWebValue(prop, value)};
-                    }
-                }
-            `
-        }
-
-        return acc
-    }, '')
-
-const getBreakpointsStyles = (prop: string, value: Record<string, RNValue>, runtime: UnistylesRuntime, className: string): string => Object
-    .entries(value)
-    .reduce((acc, [key, value]) => {
-        const breakpoint = runtime.breakpoints[key as keyof typeof runtime.breakpoints]
-
-        if (breakpoint === undefined) {
-            return acc
-        }
-
-        return `${acc}
-
-            @media screen and (min-width: ${breakpoint}px) {
-                .${className} {
-                    ${normalizePropName(prop)}: ${normalizeWebValue(prop, value)};
-                }
-            }
-        `
-    }, '')
-
-const normalizePropName = (prop: string) => prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
-
-const normalizeWebValue = (prop: string, value: RNValue): string => {
-    if (value === undefined) {
-        return 'unset'
-    }
-
-    switch (prop) {
-        // colors
-        case 'color':
-        case 'backgroundColor':
-        case 'borderColor':
-        case 'borderBottomColor':
-        case 'borderLeftColor':
-        case 'borderRightColor':
-        case 'borderTopColor':
-        case 'borderBlockColor':
-        case 'borderBlockEndColor':
-        case 'borderBlockStartColor':
-        case 'textDecorationColor':
-            return normalizeColor(value as string)
-
-        // dimensions
-        case 'width':
-        case 'height':
-        case 'minWidth':
-        case 'minHeight':
-        case 'maxWidth':
-        case 'maxHeight':
-        case 'borderRadius':
-        case 'borderWidth':
-        case 'borderBottomLeftRadius':
-        case 'borderBottomRightRadius':
-        case 'borderEndEndRadius':
-        case 'borderEndStartRadius':
-        case 'borderStartEndRadius':
-        case 'borderStartStartRadius':
-        case 'borderTopLeftRadius':
-        case 'borderTopRightRadius':
-        case 'borderBottomWidth':
-        case 'borderLeftWidth':
-        case 'borderRightWidth':
-        case 'borderTopWidth':
-        case 'bottom':
-        case 'left':
-        case 'right':
-        case 'top':
-        case 'marginTop':
-        case 'marginBottom':
-        case 'marginLeft':
-        case 'marginRight':
-        case 'paddingTop':
-        case 'paddingBottom':
-        case 'paddingLeft':
-        case 'paddingRight':
-        case 'flexBasis':
-        case 'rowGap':
-        case 'columnGap':
-        case 'gap':
-        case 'margin':
-        case 'padding':
-        case 'fontSize':
-        case 'letterSpacing':
-            return `${value as string}px`
-
-        // without unit
-        case 'borderStyle':
-        case 'pointerEvents':
-        case 'backfaceVisibility':
-        case 'alignContent':
-        case 'alignItems':
-        case 'alignSelf':
-        case 'flexDirection':
-        case 'flexWrap':
-        case 'flex':
-        case 'aspectRatio':
-        case 'opacity':
-        case 'direction':
-        case 'zIndex':
-        case 'justifyContent':
-        case 'overflow':
-        case 'display':
-        case 'position':
-        case 'flexGrow':
-        case 'flexShrink':
-        case 'fontFamily':
-        case 'fontStyle':
-        case 'textDecorationLine':
-        case 'textAlign':
-        case 'textDecorationStyle':
-        case 'lineHeight':
-        case 'textTransform':
-        case 'fontVariant':
-        case 'verticalAlign':
-        case 'objectFit':
-            return value as string
-
-        // to be transformed for now
-        // not supported
-        case 'marginHorizontal':
-        case 'paddingHorizontal':
-        case 'marginVertical':
-        case 'paddingVertical':
-        case 'shadowColor':
-        case 'shadowOffset':
-        case 'shadowOpacity':
-        case 'shadowRadius':
-        case 'transform':
-        case 'transformMatrix':
-        case 'fontWeight':
-        case 'textShadowOffset':
-        case 'textShadowRadius':
-        case 'textShadowColor':
-            return ''
-
-        // unsupported
-        case 'borderStartColor':
-        case 'borderEndColor':
-        case 'borderEndWidth':
-        case 'borderBottomEndRadius':
-        case 'borderBottomStartRadius':
-        case 'borderCurve':
-        case 'elevation':
-        case 'borderTopEndRadius':
-        case 'borderTopStartRadius':
-        case 'borderStartWidth':
-        case 'start':
-        case 'end':
-        case 'margin-end':
-        case 'margin-start':
-        case 'padding-end':
-        case 'padding-start':
-        case 'writingDirection':
-        case 'textAlignVertical':
-        case 'includeFontPadding':
-        case 'resizeMode':
-        case 'overlayColor':
-        case 'tintColor':
-        default:
-            return ''
-    }
-}

package/src/utils/generateId.ts

@@ -1,10 +0,0 @@
-// eslint-disable-next-line camelcase
-import { murmurhash2_32_gc } from './hash32'
-
-export const generateReactNativeWebId = (key: string, value: string): string => {
-    const hashedString = murmurhash2_32_gc(key + value, 1).toString(36)
-
-    return process.env.NODE_ENV !== 'production'
-        ? `r-${key}-${hashedString}`
-        : `r-${hashedString}`
-}

package/src/utils/hash32.ts

@@ -1,53 +0,0 @@
-/*
-    Authors: Gary Court and Austin Appleby
-    Compatible with React Native Web
-    https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/compiler/hash.js#L65
-*/
-export const murmurhash2_32_gc = (str: string, seed: number) => {
-    let l = str.length
-    let h = seed ^ l
-    let i = 0
-    let k
-
-    while (l >= 4) {
-        k =
-        (str.charCodeAt(i) & 0xff) |
-        ((str.charCodeAt(++i) & 0xff) << 8) |
-        ((str.charCodeAt(++i) & 0xff) << 16) |
-        ((str.charCodeAt(++i) & 0xff) << 24)
-
-        k =
-        (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16)
-        k ^= k >>> 24
-        k =
-        (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16)
-
-        h =
-        ((h & 0xffff) * 0x5bd1e995 +
-          ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^
-        k
-
-        l -= 4
-        ++i
-    }
-
-    switch (l) {
-        // @ts-ignore
-        case 3:
-            h ^= (str.charCodeAt(i + 2) & 0xff) << 16
-        // @ts-ignore
-        case 2:
-            h ^= (str.charCodeAt(i + 1) & 0xff) << 8
-        case 1:
-            h ^= str.charCodeAt(i) & 0xff
-            h =
-          (h & 0xffff) * 0x5bd1e995 +
-          ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)
-    }
-
-    h ^= h >>> 13
-    h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)
-    h ^= h >>> 15
-
-    return h >>> 0
-}

package/src/utils/index.ts

@@ -1,8 +0,0 @@
-export { mq } from './mq'
-export type { UnistylesParsedMq } from './mqParser'
-export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq, isUnistylesMq } from './mqParser'
-export { getValueForBreakpoint } from './breakpoints'
-export { proxifyFunction, parseStyle, isPlatformColor } from './styles'
-export { withPlugins } from './withPlugins'
-export { generateReactNativeWebId } from './generateId'
-export { parseColor } from './parseColor'

package/src/utils/mqParser.ts

@@ -1,99 +0,0 @@
-import type { Optional, RNValue, ScreenSize } from '../types'
-
-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))?]/
-
-type ParsedMqDimension = {
-    from: number,
-    to: number
-}
-
-export type UnistylesParsedMq = {
-    width?: ParsedMqDimension,
-    height?: ParsedMqDimension
-}
-
-export const parseMq = (mq: string): UnistylesParsedMq => {
-    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
-    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
-
-    return {
-        width: width ? {
-            from: Number(fromW),
-            to: Number(toW)
-        } : undefined,
-        height: height ? {
-            from: Number(fromH),
-            to: Number(toH)
-        } : undefined
-    }
-}
-
-export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
-
-export const isValidMq = (parsedMq: UnistylesParsedMq) => {
-    const { width, height } = parsedMq
-
-    if (width && height) {
-        return width.from <= width.to && height.from <= height.to
-    }
-
-    if (width) {
-        return width.from <= width.to
-    }
-
-    if (height) {
-        return height.from <= height.to
-    }
-
-    return false
-}
-
-export const isWithinTheWidthAndHeight = (parsedMq: UnistylesParsedMq, screenSize: ScreenSize): boolean => {
-    const { width, height } = parsedMq
-
-    if (width && height) {
-        return isWithinTheWidth(width, screenSize.width) && isWithinTheHeight(height, screenSize.height)
-    }
-
-    if (width) {
-        return isWithinTheWidth(width, screenSize.width)
-    }
-
-    if (height) {
-        return isWithinTheHeight(height, screenSize.height)
-    }
-
-    return false
-}
-
-const isWithinTheWidth = (width: UnistylesParsedMq['width'], screenWidth: number): boolean => {
-    const { from, to } = width as ParsedMqDimension
-
-    return screenWidth >= from && screenWidth <= to
-}
-
-const isWithinTheHeight = (height: UnistylesParsedMq['height'], screenHeight: number): boolean => {
-    const { from, to } = height as ParsedMqDimension
-
-    return screenHeight >= from && screenHeight <= to
-}
-
-export const getKeyForUnistylesMediaQuery = (mediaQueries: Array<[string, RNValue]>, screenSize: ScreenSize): Optional<string> => {
-    const mq = mediaQueries.find(([key]) => {
-        if (!isUnistylesMq(key as string)) {
-            return false
-        }
-
-        const parsedMq = parseMq(key as string)
-
-        if (!isValidMq(parsedMq)) {
-            return false
-        }
-
-        return isWithinTheWidthAndHeight(parsedMq, screenSize)
-    })
-
-    return mq?.at(0) as Optional<string>
-}

package/src/utils/parseColor.ts

@@ -1,33 +0,0 @@
-import type { Color } from '../types'
-import { isIOS } from '../common'
-
-const parseAlpha = (alpha: number) => {
-    if (alpha > 1 || alpha < 0) {
-        return 1
-    }
-
-    return alpha
-}
-
-export const parseColor = (color?: Color, alpha: number = 1): [string, number] => {
-    if (!color) {
-        return ['', 1]
-    }
-
-    // ignore alpha for 8 digit hex colors
-    if (color.startsWith('#') && color.length === 9) {
-        return [color, 1]
-    }
-
-    if (color.startsWith('#') && color.length === 7) {
-        return [color, parseAlpha(alpha)]
-    }
-
-    if (isIOS && color === 'transparent') {
-        return ['#000000', 0]
-    }
-
-    // todo remove this with Unistyles 3.0
-    // named colors
-    return [color, 1]
-}

package/src/utils/styles.ts

@@ -1,90 +0,0 @@
-import type { Optional, RNStyle, RNValue } from '../types'
-import { getValueForBreakpoint } from './breakpoints'
-import { isAndroid, isIOS } from '../common'
-import { withPlugins } from './withPlugins'
-
-export const proxifyFunction = (
-    key: string,
-    fn: Function,
-    variant?: Record<string, Optional<string>>
-): Function => new Proxy(fn, {
-    apply: (target, thisArg, argumentsList) => withPlugins(key, parseStyle(target.apply(thisArg, argumentsList), variant))
-})
-
-export const isPlatformColor = <T extends {}>(value: T): boolean => {
-    if (isIOS) {
-        return 'semantic' in value && typeof value.semantic === 'object'
-    }
-
-    return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object'
-}
-
-export const parseStyle = <T extends RNStyle>(
-    style: T,
-    variant: Record<string, Optional<string>> = {},
-    parseMediaQueries = true
-): T => Object
-    .entries(style || {})
-    .reduce((acc, [key, value]) => {
-        // nested objects
-        if (key === 'shadowOffset' || key  === 'textShadowOffset') {
-            acc[key] = parseStyle(value, variant)
-
-            return acc
-        }
-
-        // transforms
-        if (key === 'transform' && Array.isArray(value)) {
-            acc[key] = value
-                .map(value => parseStyle(value, variant))
-                .filter(value => {
-                    // remove undefined values
-                    if (typeof value === 'object') {
-                        return Object.values(value).at(0) !== undefined
-                    }
-
-                    return true
-                })
-
-            return acc
-        }
-
-        if (key === 'fontVariant' && Array.isArray(value)) {
-            acc[key] = value
-
-            return acc
-        }
-
-        // values or platform colors
-        if (typeof value !== 'object' || isPlatformColor(value)) {
-            acc[key as keyof T] = value
-
-            return acc
-        }
-
-        if (key === 'variants') {
-            return {
-                ...acc,
-                ...(Object
-                    .keys(value) as Array<keyof typeof value>)
-                    .reduce((acc, key) => ({
-                        ...acc,
-                        // this will parse the styles of the selected variant (or default if it is undefined), if selected variant has no styles then it will fallback to default styles
-                        ...parseStyle((value)[key][variant[key as keyof typeof variant]?.toString() || 'default'] ?? (value)[key].default ?? {})
-                    }), {})
-            }
-        }
-
-        // don't parse media queries and breakpoints
-        if (!parseMediaQueries) {
-            return {
-                ...acc,
-                [key]: value
-            }
-        }
-
-        return {
-            ...acc,
-            [key]: getValueForBreakpoint(value as Record<string, RNValue>)
-        }
-    }, {} as T)

package/src/utils/withPlugins.ts

@@ -1,13 +0,0 @@
-import type { RNStyle } from '../types'
-import { unistyles } from '../core'
-
-export const withPlugins = (
-    key: string,
-    style: RNStyle
-) => unistyles.registry.plugins.reduce((acc, plugin) => {
-    if (plugin.onParsedStyle) {
-        return plugin.onParsedStyle(key, acc, unistyles.runtime)
-    }
-
-    return acc
-}, style)

package/windows/ExperimentalFeatures.props

@@ -1,40 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-
-  <!--
-    This file contains some important settings that will apply globally for
-    your app and *all* native modules your app consumes. These values were
-    set when you created the app project, and in some cases cannot be
-    simply changed here without recreating a new project.
-  -->
-
-  <PropertyGroup Label="Microsoft.ReactNative Experimental Features">
-    <!--
-      Enables default usage of Hermes.
-      
-      See https://microsoft.github.io/react-native-windows/docs/hermes
-    -->
-    <UseHermes>true</UseHermes>
-
-    <!--
-      Changes compilation to assume use of WinUI 3 instead of System XAML.
-      Requires creation of new project.
-
-      See https://microsoft.github.io/react-native-windows/docs/winui3
-    -->
-    <UseWinUI3>false</UseWinUI3>
-
-    <!--
-      Changes compilation to assume use of Microsoft.ReactNative NuGet packages
-      instead of building the framework from source.
-      Requires creation of new project.
-
-      See https://microsoft.github.io/react-native-windows/docs/nuget
-    -->
-    <UseExperimentalNuget>true</UseExperimentalNuget>
-
-    <ReactExperimentalFeaturesSet>true</ReactExperimentalFeaturesSet>
-  
-  </PropertyGroup>
-
-</Project>

package/windows/NuGet.Config

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<configuration>
-  <config>
-    <add key="repositoryPath" value="packages" />
-  </config>
-  <packageSources>
-    <clear />
-    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
-  </packageSources>
-  <disabledPackageSources>
-    <clear />
-  </disabledPackageSources>  
-</configuration>

package/windows/ReactNativeUnistyles/PropertySheet.props

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <ImportGroup Label="PropertySheets" />
-  <PropertyGroup Label="UserMacros" />
-  <!--
-    To customize common C++/WinRT project properties:
-    * right-click the project node
-    * expand the Common Properties item
-    * select the C++/WinRT property page
-
-    For more advanced scenarios, and complete documentation, please see:
-    https://github.com/Microsoft/xlang/tree/master/src/package/cppwinrt/nuget
-    -->
-  <PropertyGroup />
-  <ItemDefinitionGroup />
-</Project>

package/windows/ReactNativeUnistyles/ReactNativeUnistyles.def

@@ -1,3 +0,0 @@
-EXPORTS
-DllCanUnloadNow = WINRT_CanUnloadNow                    PRIVATE
-DllGetActivationFactory = WINRT_GetActivationFactory    PRIVATE