src/index.js
/**
 * Wrap a tailwind-rn result and enable flag support
 * @param {Object} tailwindResult the result of using tailwind-rn
 * @param {function} tailwindResult.tailwind the tailwind function
 * @param {function} tailwindResult.getColor the getColor function
 * @returns {Object} The tailwind functions wrapped with flag support plus the new gust function
 */
Wrap a tailwind-rn result and enable flag support
@param {Object} tailwindResult the result of using tailwind-rn
@param {function} tailwindResult.tailwind the tailwind function
@param {function} tailwindResult.getColor the getColor function
@returns {Object} The tailwind functions wrapped with flag support plus the new gust function
Wrap a tailwind - rn result and enable flag support @param { Object } tailwindResult the result of using tailwind - rn @param { function } tailwindResult . tailwind the tailwind function @param { function } tailwindResult . getColor the getColor function @returns { Object } The tailwind functions wrapped with flag support plus the new gust function
function wrap({ tailwind: t, getColor: gc, ...rest }) {
  const tCache = {};
  const gCache = {};
  const clean = (s) => `${s || ""}`.replace(/\s\s+/g, " ").trim();
  const getKey = (className, flags) => {
    const flagKey = flags
      ? Object.getOwnPropertyNames(flags)
          .sort()
          .reduce((curr, name) => {
            const next = `${name}\x00${flags[name] ? 1 : 0}`;
            return [...curr, next];
          }, [])
      : "-";
    return `${className}\x00\x00${flagKey}`;
  };
  const cached = (cache, className, flags) => {
    const key = getKey(className, flags);
    return [key, cache[key] || null];
  };
  const useNoConditions = () => {
    return useMemo(() => [{}, {}], []);
  };
  const tailwind = (className, flags) => {
    const cleaned = clean(className);
    const [key, value] = cached(tCache, cleaned, flags);
    if (value) return value;
    const result = t(flags ? mapPseudoToStyle(cleaned, flags) : cleaned);
    tCache[key] = result;
    return result;
  };
  const getColor = (className, flags) => {
    const cleaned = clean(className);
    const [key, value] = cached(gCache, cleaned, flags);
    if (value) return value;
    const result = gc(flags ? mapPseudoToStyle(cleaned, flags) : cleaned);
    gCache[key] = result;
    return result;
  };
  const gust = (Component, defaultClasses, useConditions = useNoConditions) => {
    const Gusted = forwardRef((props, ref) => {
      const { className, style, ...rest } = props;
      const [conditions, listeners] = useConditions(props);
      const allClassNames = `${defaultClasses || ""} ${className || ""}`.trim();
      const gusted = allClassNames ? tailwind(allClassNames, conditions) : null;
      return (
        <Component ref={ref} style={[gusted, style]} {...rest} {...listeners} />
      );
    });
    Gusted.displayName = `${Component.displayName || "Component"} (gust)`;
    return Gusted;
  };
  return { tailwind, getColor, gust, ...rest };
}
function wrap ( { tailwind : t , getColor : gc , ... rest } ) { const tCache = { } ; const gCache = { } ; const clean = ( s ) => ` ${ s || "" } ` . replace ( / \s\s+ / g , " " ) . trim ( ) ; const getKey = ( className , flags ) => { const flagKey = flags ? Object . getOwnPropertyNames ( flags ) . sort ( ) . reduce ( ( curr , name ) => { const next = ` ${ name } \x00 ${ flags [ name ] ? 1 : 0 } ` ; return [ ... curr , next ] ; } , [ ] ) : "-" ; return ` ${ className } \x00 \x00 ${ flagKey } ` ; } ; const cached = ( cache , className , flags ) => { const key = getKey ( className , flags ) ; return [ key , cache [ key ] || null ] ; } ; const useNoConditions = ( ) => { return useMemo ( ( ) => [ { } , { } ] , [ ] ) ; } ; const tailwind = ( className , flags ) => { const cleaned = clean ( className ) ; const [ key , value ] = cached ( tCache , cleaned , flags ) ; if ( value ) return value ; const result = t ( flags ? mapPseudoToStyle ( cleaned , flags ) : cleaned ) ; tCache [ key ] = result ; return result ; } ; const getColor = ( className , flags ) => { const cleaned = clean ( className ) ; const [ key , value ] = cached ( gCache , cleaned , flags ) ; if ( value ) return value ; const result = gc ( flags ? mapPseudoToStyle ( cleaned , flags ) : cleaned ) ; gCache [ key ] = result ; return result ; } ; const gust = ( Component , defaultClasses , useConditions = useNoConditions ) => { const Gusted = forwardRef ( ( props , ref ) => { const { className , style , ... rest } = props ; const [ conditions , listeners ] = useConditions ( props ) ; const allClassNames = ` ${ defaultClasses || "" } ${ className || "" } ` . trim ( ) ; const gusted = allClassNames ? tailwind ( allClassNames , conditions ) : null ; return ( < Component ref = { ref } style = { [ gusted , style ] } { ... rest } { ... listeners } / > ) ; } ) ; Gusted . displayName = ` ${ Component . displayName || "Component" } ` ; return Gusted ; } ; return { tailwind , getColor , gust , ... rest } ; }
Wrap a tailwind-rn result and enable flag support
 @param {Object} tailwindResult the result of using tailwind-rn
 @param {function} tailwindResult.tailwind the tailwind function
 @param {function} tailwindResult.getColor the getColor function
 @returns {Object} The tailwind functions wrapped with flag support plus the new gust function
Wrap a tailwind - rn result and enable flag support @param { Object } tailwindResult the result of using tailwind - rn @param { function } tailwindResult . tailwind the tailwind function @param { function } tailwindResult . getColor the getColor function @returns { Object } The tailwind functions wrapped with flag support plus the new gust function
// clean the styles, making splits and loops faster // cache key based on classes + flags to avoid recomputes // return the cache key and any cached value /**
   * tailwind - Use tailwind classes with flags to enable additional variants
   * @param {string} className a list of tailwind classes
   * @param {Object} flags an object defining any pseudo flags to enable such as "active:"
   * @returns {Object} tailwind style object
   */ /**
   * getColor - Use tailwind classes with flags to retrieve a color value
   * @param {string} className a list of tailwind classes
   * @param {Object} flags an object defining any pseudo flags to enable such as "active:"
   * @returns {string} tailwind color value
   */ /**
   * gust - Wrap a component to translate the className prop into a tailwind-rn style object
   * @param {React.Component} Component a react component
   * @param {string} defaultClasses any default classes to attach on all instances of the component
   * @returns {React.Component} a Gust-Wrapped component
   */