How to use the fela-utils.clusterCache function in fela-utils

export default function renderToSheetList(renderer: DOMRenderer): Array {
  const cacheCluster = clusterCache(renderer.cache, renderer.ruleOrder)

  const rehydrationIndex = getRehydrationIndex(renderer)

  const sheetList = objectReduce(
    sheetMap,
    (list, type, key) => {
      if (cacheCluster[key].length > 0) {
        list.push({
          css: cacheCluster[key],
          rehydration: rehydrationIndex,
          type,
        })
      }

      return list
    },

export default function renderToMarkup(renderer: DOMRenderer): string {
  const cacheCluster = clusterCache(
    renderer.cache,
    renderer.mediaQueryOrder,
    renderer.supportQueryOrder
  )

  let styleMarkup = objectReduce(
    sheetMap,
    (markup, type, key) => {
      if (cacheCluster[key].length > 0) {
        markup += createStyleTagMarkup(cacheCluster[key], type, '')
      }

      return markup
    },
    ''
  )

export default function renderToMarkup(renderer: DOMRenderer): string {
  const cacheCluster = clusterCache(renderer.cache, renderer.ruleOrder)

  const rehydrationIndex = getRehydrationIndex(renderer)

  let styleMarkup = objectReduce(
    sheetMap,
    (markup, type, key) => {
      if (cacheCluster[key].length > 0) {
        markup += createStyleTagMarkup(
          cacheCluster[key],
          type,
          '',
          rehydrationIndex
        )
      }

      return markup

export default function connectDOMNodes(renderer: DOMRenderer): void {
  renderer.nodes = findDOMNodes()

  const cacheCluster = clusterCache(
    renderer.cache,
    renderer.mediaQueryOrder,
    renderer.supportQueryOrder,
    renderer.ruleOrder
  )

  const baseNode = renderer.nodes[RULE_TYPE]

  objectEach(sheetMap, (type, key) => {
    if (cacheCluster[key].length > 0) {
      initDOMNode(renderer.nodes, baseNode, cacheCluster[key], type)
    }
  })

  const support = cssifySupportRules(cacheCluster.supportRules)

export default function renderToString(renderer: DOMRenderer): string {
  const {
    fontFaces,
    statics,
    keyframes,
    rules,
    mediaRules,
    supportRules,
    supportMediaRules,
  } = clusterCache(renderer.cache, renderer.ruleOrder)

  const basicCSS =
    fontFaces + statics + keyframes + rules + cssifySupportRules(supportRules)

  const mediaKeys = Object.keys({
    ...supportMediaRules,
    ...mediaRules,
  }).sort(renderer.sortMediaQuery)

  return arrayReduce(
    mediaKeys,
    (css, query) => {
      const mediaCSS = mediaRules[query] || ''
      const supportCSS = cssifySupportRules(supportMediaRules[query] || {})

      return css + cssifyMediaQueryRules(query, mediaCSS + supportCSS)

return function renderToComponent(renderer: DOMRenderer): any {
    const cacheCluster = clusterCache(renderer.cache, renderer.mediaQueryOrder)
    const rehydrationIndex = getRehydrationIndex(renderer)

    const componentList = reduce(
      sheetMap,
      (list, type, key) => {
        if (cacheCluster[key].length > 0) {
          list.push(
            createStyleElement(cacheCluster[key], rehydrationIndex, type)
          )
        }

        return list
      },
      []
    )