@niibase/uniwind 1.5.0 → 1.6.0

package/src/components/web/SafeAreaView.tsx

@@ -1,5 +1,6 @@
 import { SafeAreaView as RNSafeAreaView, ViewProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const SafeAreaView = copyComponentProperties(RNSafeAreaView, (props: ViewProps) => {
@@ -7,6 +8,7 @@ export const SafeAreaView = copyComponentProperties(RNSafeAreaView, (props: View
         <RNSafeAreaView
             {...props}
             style={[toRNWClassName(props.className), props.style]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/ScrollView.tsx

@@ -1,5 +1,6 @@
 import { ScrollView as RNScrollView, ScrollViewProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const ScrollView = copyComponentProperties(RNScrollView, (props: ScrollViewProps) => {
@@ -8,6 +9,7 @@ export const ScrollView = copyComponentProperties(RNScrollView, (props: ScrollVi
             {...props}
             style={[toRNWClassName(props.className), props.style]}
             contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/SectionList.tsx

@@ -1,5 +1,6 @@
 import { SectionList as RNSectionList, SectionListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const SectionList = copyComponentProperties(RNSectionList, (props: SectionListProps<unknown, unknown>) => {
@@ -10,6 +11,7 @@ export const SectionList = copyComponentProperties(RNSectionList, (props: Sectio
             contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
             ListFooterComponentStyle={[toRNWClassName(props.ListFooterComponentClassName), props.ListFooterComponentStyle]}
             ListHeaderComponentStyle={[toRNWClassName(props.ListHeaderComponentClassName), props.ListHeaderComponentStyle]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/Switch.tsx

@@ -1,6 +1,7 @@
 import { Switch as RNSwitch, SwitchProps } from 'react-native'
 import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) => {
@@ -14,6 +15,7 @@ export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) =>
             style={[toRNWClassName(props.className), props.style]}
             thumbColor={props.thumbColor ?? thumbColor}
             trackColor={{ true: props.trackColor?.true ?? trackColorOn, false: props.trackColor?.false ?? trackColorOff }}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/Text.tsx

@@ -1,5 +1,6 @@
 import { Text as RNText, TextProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const Text = copyComponentProperties(RNText, (props: TextProps) => {
@@ -7,6 +8,7 @@ export const Text = copyComponentProperties(RNText, (props: TextProps) => {
         <RNText
             {...props}
             style={[toRNWClassName(props.className), props.style]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/TextInput.tsx

@@ -1,6 +1,7 @@
 import { TextInput as RNTextInput, TextInputProps } from 'react-native'
 import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => {
@@ -11,6 +12,7 @@ export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputP
             {...props}
             style={[toRNWClassName(props.className), props.style]}
             placeholderTextColor={props.placeholderTextColor ?? placeholderTextColor}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/TouchableHighlight.tsx

@@ -1,6 +1,7 @@
 import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
 import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props: TouchableHighlightProps) => {
@@ -11,6 +12,7 @@ export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight,
             {...props}
             style={[toRNWClassName(props.className), props.style]}
             underlayColor={props.underlayColor ?? underlayColor}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/TouchableOpacity.tsx

@@ -1,5 +1,6 @@
 import { TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (props: TouchableOpacityProps) => {
@@ -7,6 +8,7 @@ export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (pro
         <RNTouchableOpacity
             {...props}
             style={[toRNWClassName(props.className), props.style]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/TouchableWithoutFeedback.tsx

@@ -1,5 +1,6 @@
 import { TouchableWithoutFeedback as RNTouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const TouchableWithoutFeedback = copyComponentProperties(RNTouchableWithoutFeedback, (props: TouchableWithoutFeedbackProps) => {
@@ -7,6 +8,7 @@ export const TouchableWithoutFeedback = copyComponentProperties(RNTouchableWitho
         <RNTouchableWithoutFeedback
             {...props}
             style={[toRNWClassName(props.className), props.style]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/View.tsx

@@ -1,11 +1,13 @@
 import { View as RNView, ViewProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const View = copyComponentProperties(RNView, (props: ViewProps) => {
     return (
         <RNView
             {...props}
+            dataSet={generateDataSet(props)}
             style={[toRNWClassName(props.className), props.style]}
         />
     )

package/src/components/web/VirtualizedList.tsx

@@ -1,5 +1,6 @@
 import { VirtualizedList as RNVirtualizedList, VirtualizedListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props: VirtualizedListProps<unknown>) => {
@@ -10,6 +11,7 @@ export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props
             contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
             ListFooterComponentStyle={[toRNWClassName(props.ListFooterComponentClassName), props.ListFooterComponentStyle]}
             ListHeaderComponentStyle={[toRNWClassName(props.ListHeaderComponentClassName), props.ListHeaderComponentStyle]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/generateDataSet.ts

@@ -0,0 +1,52 @@
+export const generateDataSet = (props: Record<PropertyKey, any>) => {
+    const dataSet: DataSet = props.dataSet !== undefined ? { ...props.dataSet } : {}
+
+    Object.entries(props).forEach(([key, value]) => {
+        if (key.startsWith('data-')) {
+            // Remove data- prefix
+            dataSet[key.slice(5)] = value
+        }
+    })
+
+    return dataSet
+}
+
+type DataSet = Record<string, string | boolean>
+
+declare module 'react-native' {
+    interface SwitchProps {
+        dataSet?: DataSet
+    }
+
+    interface TextProps {
+        dataSet?: DataSet
+    }
+
+    interface TouchableWithoutFeedbackProps {
+        dataSet?: DataSet
+    }
+
+    interface ViewProps {
+        dataSet?: DataSet
+    }
+
+    interface PressableProps {
+        dataSet?: DataSet
+    }
+
+    interface TextInputProps {
+        dataSet?: DataSet
+    }
+
+    interface ImagePropsBase {
+        dataSet?: DataSet
+    }
+
+    interface InputAccessoryViewProps {
+        dataSet?: DataSet
+    }
+
+    interface ButtonProps {
+        dataSet?: DataSet
+    }
+}

package/src/components/web/rnw.ts

@@ -4,7 +4,7 @@ import { StyleDependency } from '../../types'
 import './metro-injected'
 
 type UniwindWithThemes = {
-    themes: typeof Uniwind['themes']
+    themes: typeof Uniwind['_themes']
 }
 
 const addClassNameToRoot = () => {

package/src/core/config/config.common.ts

@@ -13,7 +13,7 @@ const RN_VERSION = Platform.constants?.reactNativeVersion?.minor ?? 0
 const UNSPECIFIED_THEME = RN_VERSION >= 82 ? 'unspecified' : undefined
 
 export class UniwindConfigBuilder {
-    protected themes = ['light', 'dark']
+    protected _themes = ['light', 'dark']
     #hasAdaptiveThemes = true
     #currentTheme = this.colorScheme as ThemeName
 
@@ -33,6 +33,10 @@ export class UniwindConfigBuilder {
         })
     }
 
+    get themes() {
+        return this._themes as Array<ThemeName>
+    }
+
     get hasAdaptiveThemes() {
         return this.#hasAdaptiveThemes
     }
@@ -77,7 +81,7 @@ export class UniwindConfigBuilder {
                 return
             }
 
-            if (!this.themes.includes(theme)) {
+            if (!this._themes.includes(theme)) {
                 throw new Error(`Uniwind: You're trying to setTheme to '${theme}', but it was not registered.`)
             }
 
@@ -116,7 +120,7 @@ export class UniwindConfigBuilder {
     }
 
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>) {
-        this.themes = themes
+        this._themes = themes
     }
 
     protected onThemeChange() {

package/src/core/web/cssListener.ts

@@ -2,9 +2,10 @@ import { StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 
 class CSSListenerBuilder {
+    activeRules = new Set<CSSStyleRule>()
     private classNameMediaQueryListeners = new Map<string, MediaQueryList>()
     private listeners = new Map<MediaQueryList, Set<VoidFunction>>()
-    private registeredRules = new Map<string, MediaQueryList>()
+    private registeredRulesMediaQueries = new Map<string, MediaQueryList>()
     private processedStyleSheets = new WeakSet<CSSStyleSheet>()
     private pendingInitialization: number | undefined = undefined
 
@@ -15,6 +16,22 @@ class CSSListenerBuilder {
 
         const observer = new MutationObserver(mutations => {
             for (const mutation of mutations) {
+                if (mutation.type === 'attributes') {
+                    const el = mutation.target as HTMLLinkElement | HTMLStyleElement
+
+                    if (!('sheet' in el)) {
+                        continue
+                    }
+
+                    const sheet = el.sheet
+
+                    if (sheet) {
+                        this.processedStyleSheets.delete(sheet)
+                    }
+
+                    this.scheduleInitialization()
+                }
+
                 if (mutation.type === 'childList') {
                     this.scheduleInitialization()
                 }
@@ -83,8 +100,19 @@ class CSSListenerBuilder {
         }
     }
 
+    private pruneStaleRules() {
+        const activeSheets = new Set(Array.from(document.styleSheets))
+
+        for (const rule of this.activeRules) {
+            if (!rule.parentStyleSheet || !activeSheets.has(rule.parentStyleSheet)) {
+                this.activeRules.delete(rule)
+            }
+        }
+    }
+
     private initialize() {
         this.pendingInitialization = undefined
+        this.pruneStaleRules()
 
         for (const sheet of Array.from(document.styleSheets)) {
             // Skip already processed stylesheets
@@ -121,6 +149,10 @@ class CSSListenerBuilder {
         return rule.constructor.name === 'CSSMediaRule'
     }
 
+    private isSupportsRule(rule: CSSRule): rule is CSSSupportsRule {
+        return rule.constructor.name === 'CSSSupportsRule'
+    }
+
     private collectParentMediaQueries(rule: CSSRule, acc = [] as Array<CSSMediaRule>): Array<CSSMediaRule> {
         const { parentRule } = rule
 
@@ -144,13 +176,25 @@ class CSSListenerBuilder {
             if (this.isStyleRule(rule)) {
                 const mediaQueries = this.collectParentMediaQueries(rule)
 
+                this.activeRules.add(rule)
+
                 if (mediaQueries.length > 0) {
-                    this.addMediaQuery(mediaQueries, rule.selectorText)
+                    this.addMediaQuery(mediaQueries, rule)
                 }
 
                 continue
             }
 
+            if (this.isSupportsRule(rule)) {
+                if (!CSS.supports(rule.conditionText)) {
+                    continue
+                }
+
+                this.addMediaQueriesDeep(rule.cssRules)
+
+                continue
+            }
+
             if ('cssRules' in rule && rule.cssRules instanceof CSSRuleList) {
                 this.addMediaQueriesDeep(rule.cssRules)
 
@@ -159,27 +203,50 @@ class CSSListenerBuilder {
         }
     }
 
-    private addMediaQuery(mediaQueries: Array<CSSMediaRule>, className: string) {
+    private addMediaQuery(mediaQueries: Array<CSSMediaRule>, rule: CSSStyleRule) {
+        const className = rule.selectorText
         const rules = mediaQueries.map(mediaQuery => mediaQuery.conditionText).sort().join(' and ')
         const parsedClassName = className.replace('.', '').replace('\\', '')
-        const cachedMediaQueryList = this.registeredRules.get(rules)
+        const cachedMediaQueryList = this.registeredRulesMediaQueries.get(rules)
 
         if (cachedMediaQueryList) {
             this.classNameMediaQueryListeners.set(parsedClassName, cachedMediaQueryList)
+            this.toggleRule(cachedMediaQueryList, rule)
+
+            cachedMediaQueryList.addEventListener('change', () => {
+                this.toggleRule(cachedMediaQueryList, rule)
+            })
 
             return
         }
 
         const mediaQueryList = window.matchMedia(rules)
 
-        this.registeredRules.set(rules, mediaQueryList)
+        this.toggleRule(mediaQueryList, rule)
+        this.registeredRulesMediaQueries.set(rules, mediaQueryList)
         this.listeners.set(mediaQueryList, new Set())
         this.classNameMediaQueryListeners.set(parsedClassName, mediaQueryList)
 
         mediaQueryList.addEventListener('change', () => {
-            this.listeners.get(mediaQueryList)!.forEach(listener => listener())
+            this.listeners.get(mediaQueryList)!.forEach(listener => {
+                listener()
+            })
+            this.toggleRule(mediaQueryList, rule)
         })
     }
+
+    private isRuleLive(rule: CSSStyleRule) {
+        const sheet = rule.parentStyleSheet
+        return sheet !== null && Array.from(document.styleSheets).includes(sheet)
+    }
+
+    private toggleRule(mqList: MediaQueryList, rule: CSSStyleRule) {
+        if (mqList.matches && this.isRuleLive(rule)) {
+            this.activeRules.add(rule)
+        } else {
+            this.activeRules.delete(rule)
+        }
+    }
 }
 
 export const CSSListener = new CSSListenerBuilder()

package/src/core/web/getWebStyles.ts

@@ -1,4 +1,5 @@
 import { RNStyle, UniwindContextType } from '../types'
+import { CSSListener } from './cssListener'
 import { parseCSSValue } from './parseCSSValue'
 
 const dummyParent = typeof document !== 'undefined'
@@ -15,40 +16,40 @@ if (dummyParent && dummy) {
     dummyParent.appendChild(dummy)
 }
 
-const getComputedStyles = () => {
+const getActiveStylesForClass = (className: string) => {
+    const extractedStyles = {} as Record<string, string>
+
     if (!dummy) {
-        return {} as CSSStyleDeclaration
+        return extractedStyles
     }
 
+    const classNames = className.split(/\s+/).filter(Boolean)
     const computedStyles = window.getComputedStyle(dummy)
-    const styles = {} as CSSStyleDeclaration
-
-    // eslint-disable-next-line @typescript-eslint/prefer-for-of
-    for (let i = 0; i < computedStyles.length; i++) {
-        // Typescript is unable to infer it properly
-        const prop = computedStyles[i] as any
 
-        styles[prop] = computedStyles.getPropertyValue(prop)
-    }
+    CSSListener.activeRules.forEach(rule => {
+        const selector = rule.selectorText
+        const mightMatch = classNames.some((cls) => selector.includes(`.${CSS.escape(cls)}`))
 
-    return styles
-}
-
-const initialStyles = typeof document !== 'undefined'
-    ? getComputedStyles()
-    : {} as CSSStyleDeclaration
-
-const getObjectDifference = <T extends object>(obj1: T, obj2: T): T => {
-    const diff = {} as T
-    const keys = Object.keys(obj2) as Array<keyof T>
+        if (!mightMatch) {
+            return
+        }
 
-    keys.forEach(key => {
-        if (obj2[key] !== obj1[key]) {
-            diff[key] = obj2[key]
+        // element.matches() throws errors if it sees pseudo-elements like ::before
+        // So we strip them out safely just for the matching test
+        const safeSelector = selector.replace(/::[a-z-]+/gi, '')
+
+        try {
+            if (safeSelector !== '' && dummy.matches(safeSelector)) {
+                for (const propertyName of rule.style) {
+                    extractedStyles[propertyName] = computedStyles.getPropertyValue(propertyName)
+                }
+            }
+        } catch {
+            // Failsafe for unparseable selectors
         }
     })
 
-    return diff
+    return extractedStyles
 }
 
 export const getWebStyles = (className: string | undefined, uniwindContext: UniwindContextType): RNStyle => {
@@ -68,7 +69,7 @@ export const getWebStyles = (className: string | undefined, uniwindContext: Uniw
 
     dummy.className = className
 
-    const computedStyles = getObjectDifference(initialStyles, getComputedStyles())
+    const computedStyles = getActiveStylesForClass(className)
 
     return Object.fromEntries(
         Object.entries(computedStyles)

package/src/css/extraUtilities.ts

@@ -0,0 +1,26 @@
+import { RNStyle } from '../core/types'
+
+const toKebabCase = (str: string) => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
+
+const generateExtraUtilities = (map: Record<string, RNStyle>) => {
+    return Object.entries(map)
+        .map(([name, style]) =>
+            [
+                `@utility ${name} {`,
+                ...Object.entries(style).map(([key, value]) => `  ${toKebabCase(key)}: ${value};`),
+                `}`,
+                '',
+            ].join('\n')
+        ).join('\n')
+}
+
+const EXTRA_UTILITIES_MAP = {
+    'border-continuous': {
+        borderCurve: 'continuous',
+    },
+    'border-circular': {
+        borderCurve: 'circular',
+    },
+} satisfies Record<string, RNStyle>
+
+export const EXTRA_UTILITIES_CSS = generateExtraUtilities(EXTRA_UTILITIES_MAP)

package/src/css/index.ts

@@ -1,15 +1,14 @@
 import fs from 'fs'
 import path from 'path'
-import { generateCSSForInsets } from './insets'
-import { overwrite } from './overwrite'
+import { EXTRA_UTILITIES_CSS } from './extraUtilities'
+import { INSETS_CSS } from './insets'
+import { OVERWRITE_CSS } from './overwrite'
 import { generateCSSForThemes } from './themes'
-import { generateCSSForVariants } from './variants'
+import { VARIANTS_CSS } from './variants'
 
 const dirname = typeof __dirname !== 'undefined' ? __dirname : import.meta.dirname
 
 export const buildCSS = async (themes: Array<string>, input: string) => {
-    const variants = generateCSSForVariants()
-    const insets = generateCSSForInsets()
     const themesCSS = await generateCSSForThemes(themes, input)
     const cssFilePath = path.join(dirname, '../../uniwind.css')
     const oldCSSFile = fs.existsSync(cssFilePath)
@@ -17,9 +16,10 @@ export const buildCSS = async (themes: Array<string>, input: string) => {
         : ''
 
     const newCssFile = [
-        variants,
-        insets,
-        overwrite,
+        VARIANTS_CSS,
+        INSETS_CSS,
+        OVERWRITE_CSS,
+        EXTRA_UTILITIES_CSS,
         themesCSS,
     ].join('\n')
 

package/src/css/insets.ts

@@ -9,7 +9,7 @@ type TypeName = (typeof types)[number]
 type SafeAreaType = (typeof safeAreaTypes)[number]
 type Inset = 'top' | 'bottom' | 'left' | 'right'
 
-export const generateCSSForInsets = () => {
+const generateCSSForInsets = () => {
     let css = `@utility h-screen-safe {
     height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }\n\n`
@@ -104,3 +104,5 @@ export const generateCSSForInsets = () => {
     // Remove the last newline character
     return css.slice(0, -1)
 }
+
+export const INSETS_CSS = generateCSSForInsets()

package/src/css/overwrite.ts

@@ -13,4 +13,4 @@ const overwriteDisabled = `@custom-variant disabled {
 }
 `
 
-export const overwrite = overwriteDisabled
+export const OVERWRITE_CSS = overwriteDisabled

package/src/css/variants.ts

@@ -1,6 +1,6 @@
 const variants = ['ios', 'android', 'web', 'native', 'tv', 'android-tv', 'apple-tv']
 
-export const generateCSSForVariants = () => {
+const generateCSSForVariants = () => {
     let css = ''
 
     variants.forEach(variant => {
@@ -9,3 +9,5 @@ export const generateCSSForVariants = () => {
 
     return css
 }
+
+export const VARIANTS_CSS = generateCSSForVariants()

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/ScopedTheme'
 export { Uniwind } from './core'
+export type { ThemeName } from './core/types'
 export { withUniwind } from './hoc'
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types'
 export { useCSSVariable, useResolveClassNames, useUniwind } from './hooks'

package/src/metro/processor/css.ts

@@ -434,6 +434,14 @@ export class CSS {
                 return this.processValue(declarationValue[0]!)
             }
 
+            if (this.isTransformArray(declarationValue)) {
+                return declarationValue.flatMap(value => {
+                    const result = this.processValue(value)
+
+                    return Array.isArray(result) ? result : [result]
+                })
+            }
+
             return this.addComaBetweenTokens(declarationValue).reduce<string | number>((acc, value, index, array) => {
                 if (typeof value === 'object') {
                     const nextValue = array.at(index + 1)
@@ -580,6 +588,33 @@ export class CSS {
         return undefined
     }
 
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    private static readonly TRANSFORM_TYPES = new Set([
+        'translate',
+        'translateX',
+        'translateY',
+        'translateZ',
+        'rotate',
+        'rotateX',
+        'rotateY',
+        'rotateZ',
+        'scale',
+        'scaleX',
+        'scaleY',
+        'scaleZ',
+        'skew',
+        'skewX',
+        'skewY',
+        'matrix',
+        'perspective',
+    ])
+
+    private isTransformArray(values: Array<any>) {
+        return values.every(
+            value => typeof value === 'object' && value !== null && 'type' in value && CSS.TRANSFORM_TYPES.has(value.type),
+        )
+    }
+
     private isOverflow(value: any): value is { x: OverflowKeyword; y: OverflowKeyword } {
         return typeof value === 'object' && 'x' in value && ['hidden', 'visible'].includes(value.x)
     }