Router head api: Support for style and title tags

[FFGFlash]

With the great addition of the head api, allowing developers to forgo using things like react-helmet.

I think it would be great if we could define style and title tags as well.

Style tags could be implemented as follows:

import styles from 'src/assets/css/example.css?inline' //# Vite inline import

export const Route = createFileRoute('/example')({
  head() {
    return {
      meta: [{ title: 'Example Route w/ Inline Styles' }],
      styles: [{ content: styles }]
    }
  },
})

Another use case I could see is setting CSS variables from an api, for example themes:

export const Route = createFileRoute('/example')({
  async loader() {
    const theme = await fetch('/theme').then(res => res.json())
    return { theme }
  },
  head(ctx) {
    const { theme } = ctx.loaderData
    return {
      meta: [{ title: 'Example Route w/ Inline Styles' }],
      styles: [{ content: `:root { --textPrimary: ${theme.text.primary ?? '#FFF'}; }` }]
    }
  },
})

While title tags could be implemented as follows:

export const Route = createFileRoute('/example')({
  head() {
    return {
      title: 'Example Route w/ Title'
    }
  },
})