function createServerDirective (theme) {
  /** Applies server-side className */
  const applyServerClassName = (vnode, className, styleAttrs) => {
    if (vnode.data.class) {
      vnode.data.class += ` ${className}`
    } else {
      vnode.data.class = className
    }

    /**
     * Only remove style attributes
     * from VNode if directive has no
     * arguments
     **/
    if (styleAttrs) {
      purifyVNodeAttrs(vnode, styleAttrs)
    }
  }

  return (vnode, directive) => {
    const { styleAttrs } = extractChakraAttrs(vnode.data.attrs)
    const className = css(Css(styleAttrs)(theme))
    applyServerClassName(vnode, className, styleAttrs)

    if (directive.value) {
      if (typeof directive.value === 'object') {
        const className = css(Css(directive.value)(theme))
        applyServerClassName(vnode, className)
      }

      if (typeof directive.value === 'function') {
        const styles = directive.value(theme)
        const className = css(Css(styles)(theme))
        applyServerClassName(vnode, className)
      }
    }
  }
}
Creates SSR `v-chakra` directive for Nuxt