react-native-unistyles/src/core/parseBoxShadow.ts

Level up your React Native StyleSheet

import { processColor } from 'react-native'

type BoxShadow = {
    inset?: boolean
    offsetX?: number
    offsetY?: number
    blurRadius?: number
    spreadDistance?: number
    color?: string
}

const isValue = (str: string | undefined) => str && (str === '0' || str.endsWith('px'))

const parseBoxShadow = (str: string): BoxShadow | undefined => {
    if (str === 'none') {
        return undefined
    }

    // split by space, but not if it's inside of ()
    const parts = str.split(/\s+(?![^(]*\))/)
    const lastIndex = parts.length - 1
    const insetIndex = parts.findIndex((part) => part === 'inset')

    // inset can only be at the start or end
    if (![-1, 0, lastIndex].includes(insetIndex)) {
        return undefined
    }

    // if there is no inset, color can only be at the start or end
    const maybeColorsIndexes =
        insetIndex === -1 ? [0, lastIndex] : insetIndex === lastIndex ? [0, lastIndex - 1] : [1, lastIndex]

    const colorIndex = maybeColorsIndexes.find((index) => !isValue(parts[index])) ?? -1
    const maybeColor = colorIndex !== -1 ? parts[colorIndex] : undefined
    const color = maybeColor && processColor(maybeColor) ? parts[colorIndex] : undefined
    const values = parts.filter((_, index) => index !== colorIndex && index !== insetIndex)

    // at this point there can be only 4 values
    if (values.length > 4) {
        return undefined
    }

    const [offsetX, offsetY, blurRadius, spreadRadius] = values

    if (!isValue(offsetX) || !isValue(offsetY)) {
        return undefined
    }

    const blurRadiusValue = isValue(blurRadius) ? Number.parseFloat(blurRadius as string) : undefined

    if (blurRadiusValue !== undefined && blurRadiusValue < 0) {
        return undefined
    }

    return {
        inset: insetIndex !== -1 ? true : undefined,
        offsetX: Number.parseFloat(offsetX as string),
        offsetY: Number.parseFloat(offsetY as string),
        blurRadius: blurRadiusValue ?? 0,
        spreadDistance: spreadRadius ? Number.parseFloat(spreadRadius as string) : 0,
        color,
    }
}

export const parseBoxShadowString = (str: string): Array<BoxShadow> => {
    const parts = str
        .split(/,(?![^()]*\))/)
        .map((part) => part.trim().replace('\n', ''))
        .filter(Boolean)
        .map(parseBoxShadow)
        .filter(Boolean) as Array<BoxShadow>

    return parts
}