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

package/nitrogen/generated/shared/c++/UnistyleDependency.hpp

@@ -39,6 +39,7 @@ namespace margelo::nitro::unistyles {
     FONTSCALE      SWIFT_NAME(fontscale) = 11,
     STATUSBAR      SWIFT_NAME(statusbar) = 12,
     NAVIGATIONBAR      SWIFT_NAME(navigationbar) = 13,
+    IME      SWIFT_NAME(ime) = 14,
   } CLOSED_ENUM;
 
 } // namespace margelo::nitro::unistyles
@@ -69,7 +70,7 @@ namespace margelo::nitro {
         return false;
       }
       // Check if we are within the bounds of the enum.
-      return integer >= 0 && integer <= 13;
+      return integer >= 0 && integer <= 14;
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.28",
+  "version": "3.0.0-alpha.29",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/plugin/common.js

@@ -104,6 +104,15 @@ function getSecondPropertyName(t, memberExpression) {
         current = current.object
     }
 
+    // special case for IME
+    if (propertyName && t.isIdentifier(propertyName) && propertyName.name === 'insets') {
+        if (t.isIdentifier(memberExpression.property) && memberExpression.property.name === "ime") {
+            return [memberExpression.property.name]
+        }
+
+        return [propertyName.name]
+    }
+
     if (propertyName && t.isIdentifier(propertyName)) {
         return [propertyName.name]
     }

package/plugin/stylesheet.js

@@ -14,7 +14,8 @@ const UnistyleDependency = {
     PixelRatio: 10,
     FontScale: 11,
     StatusBar: 12,
-    NavigationBar: 13
+    NavigationBar: 13,
+    Ime: 14
 }
 
 function stringToUniqueId(str) {
@@ -111,6 +112,11 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
 
                             return
                         }
+                        case 'ime': {
+                            dependencies.push(UnistyleDependency.Ime)
+
+                            return
+                        }
                         case 'insets': {
                             dependencies.push(UnistyleDependency.Insets)
 

package/src/specs/NativePlatform/NativePlatform.nitro.ts

@@ -18,7 +18,8 @@ export enum UnistyleDependency {
     PixelRatio = 10,
     FontScale = 11,
     StatusBar = 12,
-    NavigationBar = 13
+    NavigationBar = 13,
+    Ime = 14
 }
 
 export interface UnistylesNativeMiniRuntime {
@@ -58,5 +59,7 @@ export interface NativePlatform extends HybridObject<{ ios: 'swift', android: 'k
 
     // private
     getMiniRuntime(): UnistylesNativeMiniRuntime,
-    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void
+    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void,
+    registerImeListener(callback: () => void): void,
+    unregisterPlatformListeners(): void
 }

package/src/types/breakpoints.ts

@@ -17,45 +17,57 @@ type ExtractBreakpoints<T> = T extends object
             }
     : T
 
-type ParseNestedObject<T> = T extends (...args: infer A) => infer R
-    ? (...args: A) => ParseNestedObject<R>
+type ParseNestedObject<T, ShouldFlatten> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R, false>
     : T extends object
         ? T extends { variants: infer R, compoundVariants: infer C }
-            ? ParseVariants<FlattenVariants<R>> & FlattenCompoundVariants<C> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>>
+            // // if intersection of Base, Variants and Compound Variants is never, then flatten variants and compound variants to generic "string"
+            ? (ParseVariants<FlattenVariants<R, false>> & FlattenCompoundVariants<C, false> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>) extends never
+                ? ParseVariants<FlattenVariants<R, true>> & FlattenCompoundVariants<C, true> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>
+                : ParseVariants<FlattenVariants<R, false>> & FlattenCompoundVariants<C, false> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>
             : T extends { variants: infer R }
-                ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+                // if intersection of Base and Variants is never, then flatten variants to generic "string"
+                ? (ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>) extends never
+                    ? ParseVariants<FlattenVariants<R, true>> & ParseNestedObject<Omit<T, 'variants'>, false>
+                    : ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>
                 : T extends { compoundVariants: object }
-                    ? ParseNestedObject<Omit<T, 'compoundVariants'>>
+                    ? ParseNestedObject<Omit<T, 'compoundVariants'>, false>
                     : {
                         [K in keyof T as K extends '_web' ? never : K]: T[K] extends object
                             ? T[K] extends OpaqueColorValue
                                 ? ColorValue
                                 : ExtractBreakpoints<T[K]>
-                            : T[K]
+                            : T[K] extends string
+                                ? ShouldFlatten extends true
+                                    ? string
+                                    : T[K]
+                                : T[K]
                     }
         : T
 
-type FlattenVariants<T> = T extends object
+type FlattenVariants<T, ShouldFlatten> = T extends object
     ? {
         [K in keyof T]: T[K] extends object
             ? {
                 [key in keyof T[K]]: T[K][key] extends object
-                    ? ParseNestedObject<T[K][key]>
+                    ? ParseNestedObject<T[K][key], ShouldFlatten>
                     : never
             }
             : never
     }
     : never
 
-type FlattenCompoundVariants<T> = T extends Array<infer _>
-    ? FlattenCompoundVariants<T[number]>
+type FlattenCompoundVariants<T, ShouldFlatten> = T extends Array<infer _>
+    ? FlattenCompoundVariants<T[number], ShouldFlatten>
     : T extends { styles: infer S }
-        ? ParseNestedObject<S>
+        ? ParseNestedObject<S, ShouldFlatten>
         : never
 
 type ParseVariants<T> = T extends object
     ? T[keyof T] extends object
-        ? UnionToIntersection<ParseVariants<T[keyof T]>>
+        ? UnionToIntersection<ParseVariants<T[keyof T]>> extends never
+            ? ParseVariants<T[keyof T]>
+            : UnionToIntersection<ParseVariants<T[keyof T]>>
         : T
     : T
 
@@ -63,7 +75,7 @@ type UnionToIntersection<U> =
     (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
 
 type ParseStyleKeys<T> = T extends object
-    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    ? { [K in keyof T]: ParseNestedObject<T[K], false> }
     : never
 
 export type ReactNativeStyleSheet<T> = ParseStyleKeys<SafeReturnType<T>>

package/src/web/create.ts

@@ -1,6 +1,6 @@
 import type { ReactNativeStyleSheet } from '../types'
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
-import { assignSecrets, reduceObject, getStyles } from './utils'
+import { assignSecrets, reduceObject, getStyles, deepMergeObjects } from './utils'
 import { UnistylesRuntime } from './runtime'
 import { createUseVariants, getVariants } from './variants'
 
@@ -26,10 +26,7 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
             const dynamicStyle = (...args: Array<any>) => {
                 const result = value(...args)
                 const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, copyVariants()))
-                const resultWithVariants = {
-                    ...result,
-                    ...variants[key]
-                }
+                const resultWithVariants = deepMergeObjects(result, variants[key] ?? {})
 
                 // Add secrets to result of dynamic styles function
                 return addSecrets(getStyles(resultWithVariants), key, args)

package/src/web/registry.ts

@@ -1,7 +1,7 @@
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
 import { UnistylesRuntime } from './runtime'
-import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies } from './utils'
+import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies, deepMergeObjects } from './utils'
 import { UnistylesListener } from './listener'
 import { convertUnistyles } from './convert'
 import type { UnistyleDependency } from '../specs/NativePlatform'
@@ -107,10 +107,7 @@ class UnistylesRegistryBuilder {
                     ? newValue(...args)
                     : newValue
                 const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
-                const resultWithVariants = {
-                    ...result,
-                    ...variantsResult
-                }
+                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
 
                 this.applyStyles(hash, convertUnistyles(resultWithVariants))
             })

package/src/web/shadowRegistry.ts

@@ -1,6 +1,6 @@
 import type { UnistylesValues } from '../types'
 import { UnistylesRegistry } from './registry'
-import { createDoubleMap, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
+import { createDoubleMap, deepMergeObjects, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
 import { getVariants } from './variants'
 
 type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
@@ -73,10 +73,7 @@ class UnistylesShadowRegistryBuilder {
                 ? style(...args)
                 : style
             const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
-            const resultWithVariants = {
-                ...result,
-                ...variantsResult
-            }
+            const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
             const oldResult = this.resultsMap.get(ref, __uni__key)
 
             // If results are the same do nothing

package/src/common.js

@@ -1,4 +0,0 @@
-import { Platform } from 'react-native';
-export const isWeb = Platform.OS === 'web';
-export const isIOS = Platform.OS === 'ios';
-export const isAndroid = Platform.OS === 'android';

package/src/core/index.js

@@ -1,2 +0,0 @@
-export { useBreakpoint } from './useBreakpoint';
-export { useTheme } from './useTheme';

package/src/core/useBreakpoint.js

@@ -1,14 +0,0 @@
-import { useEffect, useState } from 'react';
-import { UnistylesRuntime } from '../web';
-import { UnistylesListener } from '../web/listener';
-import { UnistyleDependency } from '../specs/NativePlatform';
-export const useBreakpoint = () => {
-    const [breakpoint, setBreakpoint] = useState(UnistylesRuntime.breakpoint);
-    useEffect(() => {
-        const removeChangeListener = UnistylesListener.addListeners([UnistyleDependency.Breakpoints], () => setBreakpoint(UnistylesRuntime.breakpoint));
-        return () => {
-            removeChangeListener();
-        };
-    }, []);
-    return breakpoint;
-};

package/src/core/useBreakpoint.native.js

@@ -1,16 +0,0 @@
-import { useEffect, useState } from 'react';
-import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
-export const useBreakpoint = () => {
-    const [breakpoint, setBreakpoint] = useState(UnistylesRuntime.breakpoint);
-    useEffect(() => {
-        const removeChangeListener = StyleSheet.addChangeListener(dependencies => {
-            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
-                setBreakpoint(UnistylesRuntime.breakpoint);
-            }
-        });
-        return () => {
-            removeChangeListener();
-        };
-    }, []);
-    return breakpoint;
-};

package/src/core/useTheme.js

@@ -1,14 +0,0 @@
-import { useEffect, useState } from 'react';
-import { UnistylesRuntime } from '../web';
-import { UnistylesListener } from '../web/listener';
-import { UnistyleDependency } from '../specs/NativePlatform';
-export const useTheme = () => {
-    const [theme, setTheme] = useState(UnistylesRuntime.getTheme());
-    useEffect(() => {
-        const removeChangeListener = UnistylesListener.addListeners([UnistyleDependency.Theme], () => setTheme(UnistylesRuntime.getTheme()));
-        return () => {
-            removeChangeListener();
-        };
-    }, []);
-    return theme;
-};

package/src/core/useTheme.native.js

@@ -1,16 +0,0 @@
-import { useEffect, useState } from 'react';
-import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
-export const useTheme = () => {
-    const [theme, setTheme] = useState(UnistylesRuntime.getTheme());
-    useEffect(() => {
-        const removeChangeListener = StyleSheet.addChangeListener(dependencies => {
-            if (dependencies.includes(UnistyleDependency.Theme)) {
-                setTheme(UnistylesRuntime.getTheme());
-            }
-        });
-        return () => {
-            removeChangeListener();
-        };
-    }, []);
-    return theme;
-};

package/src/index.js

@@ -1,3 +0,0 @@
-export * from './specs';
-export { mq } from './mq';
-export { useTheme, useBreakpoint } from './core';

package/src/mq.js

@@ -1,38 +0,0 @@
-const getMQValue = (value) => {
-    if (typeof value === 'number') {
-        return value;
-    }
-    if (value === null) {
-        return 0;
-    }
-    // todo take it from js
-    const breakpoints = {
-        xs: 0,
-        sm: 300,
-        md: 500,
-        lg: 800,
-        xl: 1200
-    };
-    // @ts-ignore
-    return breakpoints[value] ?? 0;
-};
-/**
- * Utility to create cross-platform media queries
- * @returns - JavaScript symbol to be used in your stylesheet
- */
-export const mq = {
-    only: {
-        width: (wMin = 0, wMax = Infinity) => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]`,
-        height: (hMin = 0, hMax = Infinity) => `:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
-    },
-    width: (wMin = 0, wMax = Infinity) => ({
-        and: {
-            height: (hMin = 0, hMax = Infinity) => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
-        }
-    }),
-    height: (hMin = 0, hMax = Infinity) => ({
-        and: {
-            width: (wMin = 0, wMax = Infinity) => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
-        }
-    })
-};

package/src/web/convert/boxShadow.js

@@ -1,59 +0,0 @@
-import { deepMergeObjects, warn } from '../utils';
-import { validateShadow } from './shadow';
-import { BOX_SHADOW_STYLES } from './types';
-import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
-const createBoxShadowValue = (style) => {
-    // at this point every prop is present
-    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
-    const offsetX = normalizeNumericValue(shadowOffset.width);
-    const offsetY = normalizeNumericValue(shadowOffset.height);
-    const radius = normalizeNumericValue(shadowRadius);
-    const color = normalizeColor(shadowColor, shadowOpacity);
-    return `${offsetX} ${offsetY} ${radius} ${color}`;
-};
-export const getBoxShadowStyle = (styles) => {
-    const missingStyles = BOX_SHADOW_STYLES.filter(key => !(key in styles));
-    if (missingStyles.length) {
-        warn(`can't apply box shadow as you miss these properties: ${missingStyles.join(', ')}`);
-        return {};
-    }
-    const breakpointsSet = new Set();
-    try {
-        validateShadow(BOX_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 {
-            boxShadow: createBoxShadowValue(styles)
-        };
-    }
-    // Create boxShadow for each breakpoint
-    const breakpointStyles = breakpoints.map(breakpoint => {
-        const color = extractShadowValue('shadowColor', breakpoint, styles);
-        const { width, height } = extractShadowValue('shadowOffset', breakpoint, styles);
-        const radius = extractShadowValue('shadowRadius', breakpoint, styles);
-        const opacity = extractShadowValue('shadowOpacity', breakpoint, styles);
-        return {
-            [breakpoint]: {
-                boxShadow: createBoxShadowValue({
-                    shadowColor: color,
-                    shadowOffset: {
-                        width,
-                        height
-                    },
-                    shadowRadius: radius,
-                    shadowOpacity: opacity
-                })
-            }
-        };
-    });
-    // Merge all breakpoints styles into one
-    return deepMergeObjects(...breakpointStyles);
-};

package/src/web/convert/index.js

@@ -1,56 +0,0 @@
-import { isPseudo } from './pseudo';
-import { getStyle } from './style';
-import { deepMergeObjects } from '../utils';
-import { getTransformStyle } from './transform';
-import { isBoxShadow, isTextShadow, isTransform } from './utils';
-import { getTextShadowStyle } from './textShadow';
-import { getBoxShadowStyle } from './boxShadow';
-export const convertUnistyles = (value) => {
-    // Flag to mark if textShadow is already created
-    let hasTextShadow = false;
-    // Flag to mark if boxShadow is already created
-    let hasBoxShadow = false;
-    const stylesArray = Object.entries({
-        ...value,
-        ...value._web
-    }).flatMap(([unistylesKey, unistylesValue]) => {
-        // Keys to omit
-        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
-            return [];
-        }
-        // Pseudo classes :hover, :before etc.
-        if (isPseudo(unistylesKey)) {
-            const flattenValues = convertUnistyles(unistylesValue);
-            return { [unistylesKey]: flattenValues };
-        }
-        // Text shadow
-        if (isTextShadow(unistylesKey)) {
-            if (hasTextShadow) {
-                return [];
-            }
-            hasTextShadow = true;
-            return getTextShadowStyle(value);
-        }
-        // Box shadow
-        if (isBoxShadow(unistylesKey)) {
-            if (hasBoxShadow) {
-                return [];
-            }
-            hasBoxShadow = true;
-            return getBoxShadowStyle(value);
-        }
-        // Transforms
-        if (isTransform(unistylesKey, unistylesValue)) {
-            return getTransformStyle(unistylesValue);
-        }
-        // Breakpoints
-        if (typeof unistylesValue === 'object' && unistylesValue !== null) {
-            return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
-                return { [breakpointKey]: getStyle(unistylesKey, breakpointValue) };
-            });
-        }
-        // Regular styles
-        return getStyle(unistylesKey, unistylesValue);
-    });
-    return deepMergeObjects(...stylesArray);
-};

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(', ')}`;
-        }
-    });
-};