index.js

import React from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import _get from 'lodash.get';
import _merge from 'lodash.merge';
import _mergeWith from 'lodash.mergewith';
import _keys from 'lodash.keys';
import _pick from 'lodash.pick';
import _isEmpty from 'lodash.isempty';
import Color from 'color';
import defaultClasses from './classes.js';
import Popover from './components/popover.js';
import HorizontalSelector from './components/horizontal.selector.js';
import {ejectDynamicAndStatic, generateDynamicClasses} from './utils/string.utils';

let classes;
let withLogs;

/**
 * This method must be run before css() method.
 * @param opts
 *
 * customClasses must be a function / method that returns an object, so EStyleSheet.value() is accesible
 *
 * @private
 */
const init = (opts = {
  values: undefined,
  extraGlobalVars: undefined,
  customClasses: () => undefined,
  logs: false,
}) => {

  // --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  // --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  // --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  withLogs = _get(opts, 'logs');

  const defaultTheme = {
    theme: 'default',
    defaultFontFamily: '',
    blue: '#0d6efd',
    indigo: '#6610f2',
    purple: '#6f42c1',
    pink: '#d63384',
    red: '#dc3545',
    orange: '#fd7e14',
    yellow: '#ffc107',
    green: '#198754',
    teal: '#20c997',
    cyan: '#0dcaf0',
    gray: '#6c757d',
    gray1: '#ECEFF4',
    gray2: '#d6dfe9',
    gray3: '#A7B3C3',
    gray4: '#7A8796',
    gray5: '#343a40',
    grayDark: '#343a40',
    primary: '#0d6efd',
    secondary: '#6c757d',
    success: '#198754',
    info: '#0dcaf0',
    warning: '#ffc107',
    danger: '#dc3545',
    white: '#fff',
    light: '#f8f9fa',
    dark: '#212529',
    black: '#000',
    text: '#000',
    textLight: '#FFF',
    bgBody: '#f8f9fa',
    slate50: '#f8fafc',
    slate100: '#f1f5f9',
    slate200: '#e2e8f0',
    slate300: '#cbd5e1',
    slate400: '#94a3b8',
    slate500: '#64748b',
    slate600: '#475569',
    slate700: '#334155',
    slate800: '#1e293b',
    slate900: '#0f172a',
    gray50: '#f9fafb',
    gray100: '#f3f4f6',
    gray200: '#e5e7eb',
    gray300: '#d1d5db',
    gray400: '#9ca3af',
    gray500: '#6b7280',
    gray600: '#4b5563',
    gray700: '#374151',
    gray800: '#1f2937',
    gray900: '#111827',
    zinc50: '#fafafa',
    zinc100: '#f4f4f5',
    zinc200: '#e4e4e7',
    zinc300: '#d4d4d8',
    zinc400: '#a1a1aa',
    zinc500: '#71717a',
    zinc600: '#52525b',
    zinc700: '#3f3f46',
    zinc800: '#27272a',
    zinc900: '#18181b',
    neutral50: '#fafafa',
    neutral100: '#f5f5f5',
    neutral200: '#e5e5e5',
    neutral300: '#d4d4d4',
    neutral400: '#a3a3a3',
    neutral500: '#737373',
    neutral600: '#525252',
    neutral700: '#404040',
    neutral800: '#262626',
    neutral900: '#171717',
    stone50: '#fafaf9',
    stone100: '#f5f5f4',
    stone200: '#e7e5e4',
    stone300: '#d6d3d1',
    stone400: '#a8a29e',
    stone500: '#78716c',
    stone600: '#57534e',
    stone700: '#44403c',
    stone800: '#292524',
    stone900: '#1c1917',
    red50: '#fef2f2',
    red100: '#fee2e2',
    red200: '#fecaca',
    red300: '#fca5a5',
    red400: '#f87171',
    red500: '#ef4444',
    red600: '#dc2626',
    red700: '#b91c1c',
    red800: '#991b1b',
    red900: '#7f1d1d',
    orange50: '#fff7ed',
    orange100: '#ffedd5',
    orange200: '#fed7aa',
    orange300: '#fdba74',
    orange400: '#fb923c',
    orange500: '#f97316',
    orange600: '#ea580c',
    orange700: '#c2410c',
    orange800: '#9a3412',
    orange900: '#7c2d12',
    amber50: '#fffbeb',
    amber100: '#fef3c7',
    amber200: '#fde68a',
    amber300: '#fcd34d',
    amber400: '#fbbf24',
    amber500: '#f59e0b',
    amber600: '#d97706',
    amber700: '#b45309',
    amber800: '#92400e',
    amber900: '#78350f',
    yellow50: '#fefce8',
    yellow100: '#fef9c3',
    yellow200: '#fef08a',
    yellow300: '#fde047',
    yellow400: '#facc15',
    yellow500: '#eab308',
    yellow600: '#ca8a04',
    yellow700: '#a16207',
    yellow800: '#854d0e',
    yellow900: '#713f12',
    lime50: '#f7fee7',
    lime100: '#ecfccb',
    lime200: '#d9f99d',
    lime300: '#bef264',
    lime400: '#a3e635',
    lime500: '#84cc16',
    lime600: '#65a30d',
    lime700: '#4d7c0f',
    lime800: '#3f6212',
    lime900: '#365314',
    green50: '#f0fdf4',
    green100: '#dcfce7',
    green200: '#bbf7d0',
    green300: '#86efac',
    green400: '#4ade80',
    green500: '#22c55e',
    green600: '#16a34a',
    green700: '#15803d',
    green800: '#166534',
    green900: '#14532d',
    emerald50: '#ecfdf5',
    emerald100: '#d1fae5',
    emerald200: '#a7f3d0',
    emerald300: '#6ee7b7',
    emerald400: '#34d399',
    emerald500: '#10b981',
    emerald600: '#059669',
    emerald700: '#047857',
    emerald800: '#065f46',
    emerald900: '#064e3b',
    teal50: '#f0fdfa',
    teal100: '#ccfbf1',
    teal200: '#99f6e4',
    teal300: '#5eead4',
    teal400: '#2dd4bf',
    teal500: '#14b8a6',
    teal600: '#0d9488',
    teal700: '#0f766e',
    teal800: '#115e59',
    teal900: '#134e4a',
    cyan50: '#ecfeff',
    cyan100: '#cffafe',
    cyan200: '#a5f3fc',
    cyan300: '#67e8f9',
    cyan400: '#22d3ee',
    cyan500: '#06b6d4',
    cyan600: '#0891b2',
    cyan700: '#0e7490',
    cyan800: '#155e75',
    cyan900: '#164e63',
    sky50: '#f0f9ff',
    sky100: '#e0f2fe',
    sky200: '#bae6fd',
    sky300: '#7dd3fc',
    sky400: '#38bdf8',
    sky500: '#0ea5e9',
    sky600: '#0284c7',
    sky700: '#0369a1',
    sky800: '#075985',
    sky900: '#0c4a6e',
    blue50: '#eff6ff',
    blue100: '#dbeafe',
    blue200: '#bfdbfe',
    blue300: '#93c5fd',
    blue400: '#60a5fa',
    blue500: '#3b82f6',
    blue600: '#2563eb',
    blue700: '#1d4ed8',
    blue800: '#1e40af',
    blue900: '#1e3a8a',
    indigo50: '#eef2ff',
    indigo100: '#e0e7ff',
    indigo200: '#c7d2fe',
    indigo300: '#a5b4fc',
    indigo400: '#818cf8',
    indigo500: '#6366f1',
    indigo600: '#4f46e5',
    indigo700: '#4338ca',
    indigo800: '#3730a3',
    indigo900: '#312e81',
    violet50: '#f5f3ff',
    violet100: '#ede9fe',
    violet200: '#ddd6fe',
    violet300: '#c4b5fd',
    violet400: '#a78bfa',
    violet500: '#8b5cf6',
    violet600: '#7c3aed',
    violet700: '#6d28d9',
    violet800: '#5b21b6',
    violet900: '#4c1d95',
    purple50: '#faf5ff',
    purple100: '#f3e8ff',
    purple200: '#e9d5ff',
    purple300: '#d8b4fe',
    purple400: '#c084fc',
    purple500: '#a855f7',
    purple600: '#9333ea',
    purple700: '#7e22ce',
    purple800: '#6b21a8',
    purple900: '#581c87',
    fuchsia50: '#fdf4ff',
    fuchsia100: '#fae8ff',
    fuchsia200: '#f5d0fe',
    fuchsia300: '#f0abfc',
    fuchsia400: '#e879f9',
    fuchsia500: '#d946ef',
    fuchsia600: '#c026d3',
    fuchsia700: '#a21caf',
    fuchsia800: '#86198f',
    fuchsia900: '#701a75',
    pink50: '#fdf2f8',
    pink100: '#fce7f3',
    pink200: '#fbcfe8',
    pink300: '#f9a8d4',
    pink400: '#f472b6',
    pink500: '#ec4899',
    pink600: '#db2777',
    pink700: '#be185d',
    pink800: '#9d174d',
    pink900: '#831843',
    rose50: '#fff1f2',
    rose100: '#ffe4e6',
    rose200: '#fecdd3',
    rose300: '#fda4af',
    rose400: '#fb7185',
    rose500: '#f43f5e',
    rose600: '#e11d48',
    rose700: '#be123c',
    rose800: '#9f1239',
    rose900: '#881337',
    btnPaddingHorizontal: '1rem',
    btnPaddingVertical: '0.75rem',
  };
  const colors = _merge(defaultTheme, _get(opts, 'values'));
  if (withLogs) {
    console.log('klazify', 'colors', colors);
  }
  const defaultGlobalVars = {

    $rem: 16,
    $theme: _get(colors, 'theme'),
    $defaultFontFamily: _get(colors, 'defaultFontFamily'),

    $blue: _get(colors, 'blue'),
    $indigo: _get(colors, 'indigo'),
    $purple: _get(colors, 'purple'),
    $pink: _get(colors, 'pink'),
    $red: _get(colors, 'red'),
    $orange: _get(colors, 'orange'),
    $yellow: _get(colors, 'yellow'),
    $green: _get(colors, 'green'),
    $teal: _get(colors, 'teal'),
    $cyan: _get(colors, 'cyan'),
    $gray: _get(colors, 'gray'),
    $gray1: _get(colors, 'gray1'),
    $gray2: _get(colors, 'gray2'),
    $gray3: _get(colors, 'gray3'),
    $gray4: _get(colors, 'gray4'),
    $gray5: _get(colors, 'gray5'),
    $grayDark: _get(colors, 'grayDark'),
    $primary: _get(colors, 'primary'),
    $secondary: _get(colors, 'secondary'),
    $success: _get(colors, 'success'),
    $info: _get(colors, 'info'),
    $warning: _get(colors, 'warning'),
    $danger: _get(colors, 'danger'),

    $white: _get(colors, 'white'),
    $light: _get(colors, 'light'),
    $dark: _get(colors, 'dark'),
    $black: _get(colors, 'black'),
    $text: _get(colors, 'text'),
    $textLight: _get(colors, 'textLight'),
    $bgBody: _get(colors, 'bgBody'),
    $btnPaddingHorizontal: _get(colors, 'btnPaddingHorizontal'),
    $btnPaddingVertical: _get(colors, 'btnPaddingVertical'),

    $slate50: _get(colors, 'slate50'),
    $slate100: _get(colors, 'slate100'),
    $slate200: _get(colors, 'slate200'),
    $slate300: _get(colors, 'slate300'),
    $slate400: _get(colors, 'slate400'),
    $slate500: _get(colors, 'slate500'),
    $slate600: _get(colors, 'slate600'),
    $slate700: _get(colors, 'slate700'),
    $slate800: _get(colors, 'slate800'),
    $slate900: _get(colors, 'slate900'),
    $gray50: _get(colors, 'gray50'),
    $gray100: _get(colors, 'gray100'),
    $gray200: _get(colors, 'gray200'),
    $gray300: _get(colors, 'gray300'),
    $gray400: _get(colors, 'gray400'),
    $gray500: _get(colors, 'gray500'),
    $gray600: _get(colors, 'gray600'),
    $gray700: _get(colors, 'gray700'),
    $gray800: _get(colors, 'gray800'),
    $gray900: _get(colors, 'gray900'),
    $zinc50: _get(colors, 'zinc50'),
    $zinc100: _get(colors, 'zinc100'),
    $zinc200: _get(colors, 'zinc200'),
    $zinc300: _get(colors, 'zinc300'),
    $zinc400: _get(colors, 'zinc400'),
    $zinc500: _get(colors, 'zinc500'),
    $zinc600: _get(colors, 'zinc600'),
    $zinc700: _get(colors, 'zinc700'),
    $zinc800: _get(colors, 'zinc800'),
    $zinc900: _get(colors, 'zinc900'),
    $neutral50: _get(colors, 'neutral50'),
    $neutral100: _get(colors, 'neutral100'),
    $neutral200: _get(colors, 'neutral200'),
    $neutral300: _get(colors, 'neutral300'),
    $neutral400: _get(colors, 'neutral400'),
    $neutral500: _get(colors, 'neutral500'),
    $neutral600: _get(colors, 'neutral600'),
    $neutral700: _get(colors, 'neutral700'),
    $neutral800: _get(colors, 'neutral800'),
    $neutral900: _get(colors, 'neutral900'),
    $stone50: _get(colors, 'stone50'),
    $stone100: _get(colors, 'stone100'),
    $stone200: _get(colors, 'stone200'),
    $stone300: _get(colors, 'stone300'),
    $stone400: _get(colors, 'stone400'),
    $stone500: _get(colors, 'stone500'),
    $stone600: _get(colors, 'stone600'),
    $stone700: _get(colors, 'stone700'),
    $stone800: _get(colors, 'stone800'),
    $stone900: _get(colors, 'stone900'),
    $red50: _get(colors, 'red50'),
    $red100: _get(colors, 'red100'),
    $red200: _get(colors, 'red200'),
    $red300: _get(colors, 'red300'),
    $red400: _get(colors, 'red400'),
    $red500: _get(colors, 'red500'),
    $red600: _get(colors, 'red600'),
    $red700: _get(colors, 'red700'),
    $red800: _get(colors, 'red800'),
    $red900: _get(colors, 'red900'),
    $orange50: _get(colors, 'orange50'),
    $orange100: _get(colors, 'orange100'),
    $orange200: _get(colors, 'orange200'),
    $orange300: _get(colors, 'orange300'),
    $orange400: _get(colors, 'orange400'),
    $orange500: _get(colors, 'orange500'),
    $orange600: _get(colors, 'orange600'),
    $orange700: _get(colors, 'orange700'),
    $orange800: _get(colors, 'orange800'),
    $orange900: _get(colors, 'orange900'),
    $amber50: _get(colors, 'amber50'),
    $amber100: _get(colors, 'amber100'),
    $amber200: _get(colors, 'amber200'),
    $amber300: _get(colors, 'amber300'),
    $amber400: _get(colors, 'amber400'),
    $amber500: _get(colors, 'amber500'),
    $amber600: _get(colors, 'amber600'),
    $amber700: _get(colors, 'amber700'),
    $amber800: _get(colors, 'amber800'),
    $amber900: _get(colors, 'amber900'),
    $yellow50: _get(colors, 'yellow50'),
    $yellow100: _get(colors, 'yellow100'),
    $yellow200: _get(colors, 'yellow200'),
    $yellow300: _get(colors, 'yellow300'),
    $yellow400: _get(colors, 'yellow400'),
    $yellow500: _get(colors, 'yellow500'),
    $yellow600: _get(colors, 'yellow600'),
    $yellow700: _get(colors, 'yellow700'),
    $yellow800: _get(colors, 'yellow800'),
    $yellow900: _get(colors, 'yellow900'),
    $lime50: _get(colors, 'lime50'),
    $lime100: _get(colors, 'lime100'),
    $lime200: _get(colors, 'lime200'),
    $lime300: _get(colors, 'lime300'),
    $lime400: _get(colors, 'lime400'),
    $lime500: _get(colors, 'lime500'),
    $lime600: _get(colors, 'lime600'),
    $lime700: _get(colors, 'lime700'),
    $lime800: _get(colors, 'lime800'),
    $lime900: _get(colors, 'lime900'),
    $green50: _get(colors, 'green50'),
    $green100: _get(colors, 'green100'),
    $green200: _get(colors, 'green200'),
    $green300: _get(colors, 'green300'),
    $green400: _get(colors, 'green400'),
    $green500: _get(colors, 'green500'),
    $green600: _get(colors, 'green600'),
    $green700: _get(colors, 'green700'),
    $green800: _get(colors, 'green800'),
    $green900: _get(colors, 'green900'),
    $emerald50: _get(colors, 'emerald50'),
    $emerald100: _get(colors, 'emerald100'),
    $emerald200: _get(colors, 'emerald200'),
    $emerald300: _get(colors, 'emerald300'),
    $emerald400: _get(colors, 'emerald400'),
    $emerald500: _get(colors, 'emerald500'),
    $emerald600: _get(colors, 'emerald600'),
    $emerald700: _get(colors, 'emerald700'),
    $emerald800: _get(colors, 'emerald800'),
    $emerald900: _get(colors, 'emerald900'),
    $teal50: _get(colors, 'teal50'),
    $teal100: _get(colors, 'teal100'),
    $teal200: _get(colors, 'teal200'),
    $teal300: _get(colors, 'teal300'),
    $teal400: _get(colors, 'teal400'),
    $teal500: _get(colors, 'teal500'),
    $teal600: _get(colors, 'teal600'),
    $teal700: _get(colors, 'teal700'),
    $teal800: _get(colors, 'teal800'),
    $teal900: _get(colors, 'teal900'),
    $cyan50: _get(colors, 'cyan50'),
    $cyan100: _get(colors, 'cyan100'),
    $cyan200: _get(colors, 'cyan200'),
    $cyan300: _get(colors, 'cyan300'),
    $cyan400: _get(colors, 'cyan400'),
    $cyan500: _get(colors, 'cyan500'),
    $cyan600: _get(colors, 'cyan600'),
    $cyan700: _get(colors, 'cyan700'),
    $cyan800: _get(colors, 'cyan800'),
    $cyan900: _get(colors, 'cyan900'),
    $sky50: _get(colors, 'sky50'),
    $sky100: _get(colors, 'sky100'),
    $sky200: _get(colors, 'sky200'),
    $sky300: _get(colors, 'sky300'),
    $sky400: _get(colors, 'sky400'),
    $sky500: _get(colors, 'sky500'),
    $sky600: _get(colors, 'sky600'),
    $sky700: _get(colors, 'sky700'),
    $sky800: _get(colors, 'sky800'),
    $sky900: _get(colors, 'sky900'),
    $blue50: _get(colors, 'blue50'),
    $blue100: _get(colors, 'blue100'),
    $blue200: _get(colors, 'blue200'),
    $blue300: _get(colors, 'blue300'),
    $blue400: _get(colors, 'blue400'),
    $blue500: _get(colors, 'blue500'),
    $blue600: _get(colors, 'blue600'),
    $blue700: _get(colors, 'blue700'),
    $blue800: _get(colors, 'blue800'),
    $blue900: _get(colors, 'blue900'),
    $indigo50: _get(colors, 'indigo50'),
    $indigo100: _get(colors, 'indigo100'),
    $indigo200: _get(colors, 'indigo200'),
    $indigo300: _get(colors, 'indigo300'),
    $indigo400: _get(colors, 'indigo400'),
    $indigo500: _get(colors, 'indigo500'),
    $indigo600: _get(colors, 'indigo600'),
    $indigo700: _get(colors, 'indigo700'),
    $indigo800: _get(colors, 'indigo800'),
    $indigo900: _get(colors, 'indigo900'),
    $violet50: _get(colors, 'violet50'),
    $violet100: _get(colors, 'violet100'),
    $violet200: _get(colors, 'violet200'),
    $violet300: _get(colors, 'violet300'),
    $violet400: _get(colors, 'violet400'),
    $violet500: _get(colors, 'violet500'),
    $violet600: _get(colors, 'violet600'),
    $violet700: _get(colors, 'violet700'),
    $violet800: _get(colors, 'violet800'),
    $violet900: _get(colors, 'violet900'),
    $purple50: _get(colors, 'purple50'),
    $purple100: _get(colors, 'purple100'),
    $purple200: _get(colors, 'purple200'),
    $purple300: _get(colors, 'purple300'),
    $purple400: _get(colors, 'purple400'),
    $purple500: _get(colors, 'purple500'),
    $purple600: _get(colors, 'purple600'),
    $purple700: _get(colors, 'purple700'),
    $purple800: _get(colors, 'purple800'),
    $purple900: _get(colors, 'purple900'),
    $fuchsia50: _get(colors, 'fuchsia50'),
    $fuchsia100: _get(colors, 'fuchsia100'),
    $fuchsia200: _get(colors, 'fuchsia200'),
    $fuchsia300: _get(colors, 'fuchsia300'),
    $fuchsia400: _get(colors, 'fuchsia400'),
    $fuchsia500: _get(colors, 'fuchsia500'),
    $fuchsia600: _get(colors, 'fuchsia600'),
    $fuchsia700: _get(colors, 'fuchsia700'),
    $fuchsia800: _get(colors, 'fuchsia800'),
    $fuchsia900: _get(colors, 'fuchsia900'),
    $pink50: _get(colors, 'pink50'),
    $pink100: _get(colors, 'pink100'),
    $pink200: _get(colors, 'pink200'),
    $pink300: _get(colors, 'pink300'),
    $pink400: _get(colors, 'pink400'),
    $pink500: _get(colors, 'pink500'),
    $pink600: _get(colors, 'pink600'),
    $pink700: _get(colors, 'pink700'),
    $pink800: _get(colors, 'pink800'),
    $pink900: _get(colors, 'pink900'),
    $rose50: _get(colors, 'rose50'),
    $rose100: _get(colors, 'rose100'),
    $rose200: _get(colors, 'rose200'),
    $rose300: _get(colors, 'rose300'),
    $rose400: _get(colors, 'rose400'),
    $rose500: _get(colors, 'rose500'),
    $rose600: _get(colors, 'rose600'),
    $rose700: _get(colors, 'rose700'),
    $rose800: _get(colors, 'rose800'),
    $rose900: _get(colors, 'rose900'),
  };
  /**
   * extraGlobalVars will override existing vars in defaultGlobalVars if some var name is exactly equal.
   * @type {any}
   */
  const rawGlobalVars = _merge(defaultGlobalVars, _get(opts, 'extraGlobalVars'));
  if (withLogs) {
    console.log('klazify', 'rawGlobalVars', rawGlobalVars);
  }
  EStyleSheet.build(rawGlobalVars);
  let customClassesMethod = _get(opts, 'customClasses');
  if (typeof customClassesMethod !== 'function') {
    if (!!customClassesMethod) {
      console.log('klazify -> warning: customClasses must be a method / function. (ignoring value).')
    }
    customClassesMethod = () => ({});
  }
  const allClasses = _merge(defaultClasses(rawGlobalVars.$rem), customClassesMethod());
  if (withLogs) {
    console.log('klazify', 'available classes ->\n', _keys(allClasses).join(','));
  }
  classes = EStyleSheet.create(allClasses);
};

/**
 * Applies all rules for StyleSheets (from react-native)
 * and EStyleSheets (from react-native-extended-stylesheet)
 *
 * @param styles: string with words (name of classes) separated by spaces
 * @param styles: object with styles to create
 * @returns {EStyleSheet.AnyObject}
 */
const css = (styles) => {
  if (typeof styles === 'string') {

    const {dynamicValues} = ejectDynamicAndStatic(styles);

    /**
     * Generate dynamic styles
     *
     */
    const dynamicClasses = generateDynamicClasses(dynamicValues);
    let createdDynamicStyles;
    if (!_isEmpty(dynamicClasses)) {
      createdDynamicStyles = EStyleSheet.create(dynamicClasses);
    }
    const fullClasses = _merge(classes, createdDynamicStyles || {});

    const picked = _pick(fullClasses, styles.split(' '));
    if (withLogs) {
      console.log('klazify', '\nclasses input -> ', styles, '\nstyles ->\n', picked);
    }
    return _keys(picked).reduce((previous, current) => _mergeWith(previous, picked[current], (objValue, srcValue) => {
      if (Array.isArray(objValue)) {
        return objValue.concat(srcValue);
      }
    }), {});
  }
  if (typeof styles === 'object') {
    return EStyleSheet.create({target: styles}).target;
  }
};
const value = (variableName) => EStyleSheet.value(variableName);
const color = (variableName) => Color(value(variableName));

export {css, init, color, value, Popover, HorizontalSelector};