How to use the fela.combineRules function in fela

"createComponent() can't render styles without the renderer in the context. Missing react-fela's  at the app root?"
        )
      }

      const usedProps = withProxy ? extractUsedProps(rule, theme) : []

      const rules = [rule]
      if (_felaRule) {
        rules.push(_felaRule)
      }
      if (extend) {
        typeof extend === 'function'
          ? rules.push(extend)
          : rules.push(() => extend)
      }
      const combinedRule = combineRules(...rules)

      // improve developer experience with monolithic renderer
      if (process.env.NODE_ENV !== 'production' && renderer.prettySelectors) {
        const componentName =
          typeof type === 'string' ? type : type.displayName || type.name || ''

        combinedRule.selectorPrefix = `${displayName}_${componentName}__`
      }
      // compose passThrough props from arrays or functions
      const resolvedPassThrough = [
        ...alwaysPassThroughProps,
        ...resolvePassThrough(passThroughProps, otherProps),
        ...resolvePassThrough(passThrough, otherProps),
        ...(withProxy ? resolveUsedProps(usedProps, otherProps) : [])
      ]

return createElement(FelaTheme, undefined, theme => {
        // TODO: could optimize perf by not calling combineRules if not necessary
        const className = renderer.renderRule(combineRules(style), {
          ...otherProps,
          theme,
        })

        // TODO: remove in 11.0.0
        const cls = customClass ? customClass + ' ' + className : className

        if (render instanceof Function) {
          return render({
            className: cls,
            children,
            theme,
            as,
          })
        }

renderer.renderRule = (rule: Function, props: Object): string => {
    const displayName = rule.name ? rule.name : 'FelaComponent'

    const combinedRule = combineRules(
      rule,
      () => styleDebugger(displayName),
      () => ({
        ':after': {
          lineHeight: 1.5,
        },
      })
    )
    return existingRenderRule(combinedRule, props)
  }

export default ({ as = "div", css, ...props }, { renderer, theme }) => {
  const [style, restProps] = computeStyle(theme, props);
  return h(as, {
    className: renderer.renderRule(
      combineRules(
        wrap(style),
        css && Array.isArray(css)
          ? combineRules(...css.map(rule => wrap(rule)))
          : wrap(css)
      ),
      theme
    ),
    ...restProps
  });
};

export default ({ as = "div", css, ...props }, { renderer, theme }) => {
  const [style, restProps] = computeStyle(theme, props);
  return h(as, {
    className: renderer.renderRule(
      combineRules(
        wrap(style),
        css && Array.isArray(css)
          ? combineRules(...css.map(rule => wrap(rule)))
          : wrap(css)
      ),
      theme
    ),
    ...restProps
  });
};

const VeelComponent = ({ is, css, ...props }, ctx) => {
    const { renderer, theme } = ctx[context.ns]

    const style = createComponent
      ? createComponent(theme, props)
      : { props }

    const cn = renderer.renderRule(
      combineRules(fontSize, space, width, color, () => ({
        ...style.css,
        ...css
      })),
      props
    )

    const Component = is || BaseComponent

    return (
      
    )
  }

function css(...rules: Array) {
    return renderer.renderRule(combineRules(...rules), propsWithTheme)
  }

transformToClassName(styles: ParsedBlock[]): ClassName {
    return this.fela.renderRule(combineRules(...styles.map(style => () => style)), {});
  }

(styleMap, rule, name) => ({
            ...styleMap,
            [name]: resultStyleMap[name]
              ? combineRules(resultStyleMap[name], safeRule(rule))
              : safeRule(rule),
          }),
          {}

transform(...styles: Declaration[]): ClassName {
    return this.fela.renderRule(
      combineRules(...styles.map(style => (typeof style === 'function' ? style : () => style))),
      {},
    );
  }
}