How to use the inline-style-prefixer/static function in inline-style-prefixer

root.walkDecls((decl) => {
    /* No point even checking custom props */
    if (/^--/.test(decl.prop)) return

    const objStyle = { [camelizeStyleName(decl.prop)]: decl.value }
    const prefixed = prefixAll(objStyle)
    Object.keys(prefixed).reverse().forEach(newProp => {
      const newVals = prefixed[newProp]
      const newValArray = Array.isArray(newVals) ? newVals : [newVals]
      newValArray.forEach((newVal) => {
        decl.cloneBefore({
          prop: hyphenateStyleName(newProp),
          value: newVal
        })
      })
    })
    decl.remove()
  })
}

root.walkDecls(decl => {
    /* No point even checking custom props */
    if (/^--/.test(decl.prop)) return

    const objStyle = { [camelizeStyleName(decl.prop)]: decl.value }
    const prefixed = prefixAll(objStyle)
    Object.keys(prefixed).forEach(newProp => {
      const newVals = prefixed[newProp]
      const newValArray = Array.isArray(newVals) ? newVals : [newVals]
      newValArray.forEach(newVal => {
        decl.cloneBefore({
          prop: hyphenateStyleName(newProp),
          value: newVal,
        })
      })
    })
    decl.remove()
  })
}

if (name) {
    /* eslint-disable no-param-reassign */

    /*
    *  don't apply defaults unless we have a name declaration
    *  otherwise, assume we're using this to override properties
    */

    duration = duration || '1.2s'
    iterationCount = iterationCount || 'infinite'
    timingFunction = timingFunction || 'ease-in-out'

    /* eslint-enable no-param-reassign */
  }

  return prefix(omitBy({
    animationDelay: delay,
    animationDuration: duration,
    animationFillMode: fillMode,
    animationIterationCount: iterationCount,
    animationTimingFunction: timingFunction,
    animationName: name
  }, (val) => !val))
}

validateValueType(originalVal);
      }

      const propValPair = `${hyphenate(
        originalKey,
      )}:${((originalVal: any): string)}`;
      const key = `${pseudo}${propValPair}`;
      const cachedId = cache.cache[key];
      if (cachedId !== void 0) {
        // cache hit
        classString += " " + cachedId;
        continue;
      } else {
        // cache miss
        let block = "";
        const prefixed = prefixAll({[originalKey]: originalVal});
        for (const prefixedKey in prefixed) {
          const prefixedVal = prefixed[prefixedKey];
          const prefixedValType = typeof prefixedVal;
          if (prefixedValType === "string" || prefixedValType === "number") {
            const prefixedPair = `${hyphenate(prefixedKey)}:${prefixedVal}`;
            if (prefixedPair !== propValPair) {
              block += `${prefixedPair};`;
            }
          } else if (Array.isArray(prefixedVal)) {
            const hyphenated = hyphenate(prefixedKey);
            for (let i = 0; i < prefixedVal.length; i++) {
              const prefixedPair = `${hyphenated}:${prefixedVal[i]}`;
              if (prefixedPair !== propValPair) {
                block += `${prefixedPair};`;
              }
            }

t.notThrows(() => {
    const prefixed = prefixer({
      display: 'flex'
    })
    cxs(prefixed)
  })
  t.regex(getCss(), /\-webkit\-flex/)

export function getComponentStyle (context) {
  if (!context.$vnode) {
    if (process.env.NODE_ENV === 'development') {
      return console.error('[vue-render] getComponentStyle failed: no $vnode in context.')
    }
    return {}
  }
  const cached = context.$vnode.data.cached
  const data = context.$vnode.data
  const staticClassNames = (typeof data.staticClass === 'string') ? data.staticClass.split(' ') : (data.staticClass || [])
  const classNames = (typeof data.class === 'string') ? data.class.split(' ') : (data.class || [])
  const clsNms = staticClassNames.concat(classNames)
  const style = getScopeStyle(context, clsNms)
  const res = extend(style, cached, data.staticStyle, data.style)
  context.$vnode.data.cached = res
  return addPrefix(normalizeStyle(camelizeKeys(res)))
}

const cacheKey = getCacheKey(prop, value)
      let selector = stylesCache[cacheKey] && stylesCache[cacheKey].id || predefinedClassNames[cacheKey]

      if (selector && canUseCSS) {
        classList.push(selector)
      } else {
        style[prop] = reactStyleObject[prop]
      }
    }

    /**
     * React 15 removed undocumented support for fallback values in
     * inline-styles. For now, pick the last value and regress browser support
     * for CSS features like flexbox.
     */
    const vendorPrefixedStyle = Object.keys(prefixAll(style)).reduce((acc, prop) => {
      const value = style[prop]
      acc[prop] = Array.isArray(value) ? value[value.length - 1] : value
      return acc
    }, {})

    return {
      className: classList.join(' '),
      style: vendorPrefixedStyle
    }
  }
}

(prefixedStyle, value, property) => {
      if (isObject(value)) {
        prefixedStyle[property] = addVendorPrefixes(value)
      } else {
        const prefixedDeclaration = prefix({ [property]: style[property] })
        const styleKeys = Object.keys(prefixedDeclaration)

        const referenceProperty = styleKeys[0]
        const referenceValue = prefixedDeclaration[referenceProperty]

        if (styleKeys.length === 1) {
          prefixedStyle[referenceProperty] = referenceValue
        } else {
          delete prefixedDeclaration[referenceProperty]
          const inlinedProperties = cssifyObject(
            resolveFallbackValues(prefixedDeclaration)
          )

          prefixedStyle[
            referenceProperty
          ] = `${referenceValue};${inlinedProperties}`

render() {
    let className = 'cf-flex__item', style;

    if (this.props.collapse) {
      className += ' cf-flex__item--collapse';
    } else {
      style = prefixAll(styles(this.props));
    }

    return (
      <div style="{style}">
        {this.props.children}
      </div>
    );
  }
}