feat: use unocss for inlining tw classes with config extending

Author: harlan-zw

README.md

@@ -34,7 +34,7 @@ Generate OG Images with Vue templates in Nuxt.
 
 - ✨ Create an `og:image` using the built-in templates or make your own with Vue components
 - 🎨 Design and test your `og:image` in the Nuxt DevTools OG Image Playground with full HMR
-- ▲ Render using [Satori](https://github.com/vercel/satori): Tailwind classes, Google fonts, emoji support and more!
+- ▲ Render using [Satori](https://github.com/vercel/satori): Tailwind / UnoCSS with your theme, Google fonts, 6 emoji families supported and more!
 - 🤖 Or prerender using the Browser: Supporting painless, complex templates
 - 📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
 - ⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers

package.json

@@ -45,6 +45,8 @@
     "@nuxt/kit": "^3.8.2",
     "@resvg/resvg-js": "^2.6.0",
     "@resvg/resvg-wasm": "^2.6.0",
+    "@unocss/core": "^0.58.0",
+    "@unocss/preset-wind": "^0.58.0",
     "chrome-launcher": "^1.1.0",
     "css-inline": "^0.11.0",
     "defu": "^6.1.3",
@@ -78,6 +80,8 @@
     "@nuxt/ui": "^2.11.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/i18n": "8.0.0-rc.6",
+    "@nuxtjs/tailwindcss": "^6.10.1",
+    "@unocss/nuxt": "^0.58.0",
     "bumpp": "^9.2.0",
     "eslint": "8.55.0",
     "jest-image-snapshot": "^6.3.0",

pnpm-lock.yaml

@@ -19,6 +19,7 @@ import { hash } from 'ohash'
 import { relative } from 'pathe'
 import type { ResvgRenderOptions } from '@resvg/resvg-js'
 import type { SharpOptions } from 'sharp'
+import { defu } from 'defu'
 import { version } from '../package.json'
 import type { FontConfig, InputFontConfig, OgImageComponent, OgImageOptions, OgImageRuntimeConfig } from './runtime/types'
 import { type RuntimeCompatibilitySchema, getPresetNitroPresetCompatibility, resolveNitroPreset } from './compatibility'
@@ -221,6 +222,7 @@ export default defineNuxtModule<ModuleOptions>({
     await addComponentsDir({
       path: resolve('./runtime/components/Templates/Community'),
       island: true,
+      watch: true,
     })
 
     ;[
@@ -294,6 +296,21 @@ export default defineNuxtModule<ModuleOptions>({
       return `export const componentNames = ${JSON.stringify(ogImageComponentCtx.components)}`
     }
 
+    // support simple theme extends
+    let unoCssConfig: any = { theme: {} }
+    // @ts-ignore runtime type
+    nuxt.hook('tailwindcss:config', (tailwindConfig) => {
+      // @ts-expect-error untyped
+      unoCssConfig = defu(tailwindConfig.theme.extend, { ...(tailwindConfig.theme || {}), extend: undefined })
+    })
+    // @ts-expect-error runtime type
+    nuxt.hook('unocss:config', (_unoCssConfig) => {
+      unoCssConfig = { ..._unoCssConfig.theme }
+    })
+    nuxt.options.nitro.virtual['#nuxt-og-image/unocss-config.mjs'] = () => {
+      return `export const theme = ${JSON.stringify(unoCssConfig)}`
+    }
+
     extendTypes('nuxt-og-image', ({ typesPath }) => {
       // need to map our components to types so we can import them
       const componentImports = ogImageComponentCtx.components.map((component) => {

src/module.ts

@@ -44,7 +44,9 @@ const description = computed(() => (props.description || '').slice(0, 200))
             <span v-if="repo" class="ml-2">/</span>
             <span v-if="repo" class="ml-2 font-bold">{{ repo }}</span>
           </h1>
-          <p class="text-gray-500 max-w-[700px] text-[35px] leading-[60px]">{{ description }}</p>
+          <p class="text-gray-500 max-w-[700px] text-[35px] leading-[60px]">
+            {{ description }}
+          </p>
         </div>
         <div class="text-[200px]">
           {{ emoji }}
@@ -56,21 +58,27 @@ const description = computed(() => (props.description || '').slice(0, 200))
             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="m4.67 28l6.39-12l7.3 6.49a2 2 0 0 0 1.7.47a2 2 0 0 0 1.42-1.07L27 10.9l-1.82-.9l-5.49 11l-7.3-6.49a2 2 0 0 0-1.68-.51a2 2 0 0 0-1.42 1L4 25V2H2v26a2 2 0 0 0 2 2h26v-2Z" /></svg>
             <div class="pl-2">
               <div>{{ downloads }}</div>
-              <div class="text-lg text-gray-600">Monthly Downloads</div>
+              <div class="text-lg text-gray-600">
+                Monthly Downloads
+              </div>
             </div>
           </div>
           <div class="flex flex-row pr-10">
             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1L16 6.52M16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z" /></svg>
             <div class="pl-2">
               <div>{{ stars }}</div>
-              <div class="text-lg text-gray-600">Stars</div>
+              <div class="text-lg text-gray-600">
+                Stars
+              </div>
             </div>
           </div>
           <div class="flex flex-row pr-10">
-            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="M22.45 6a5.47 5.47 0 0 1 3.91 1.64a5.7 5.7 0 0 1 0 8L16 26.13L5.64 15.64a5.7 5.7 0 0 1 0-8a5.48 5.48 0 0 1 7.82 0l2.54 2.6l2.53-2.58A5.44 5.44 0 0 1 22.45 6m0-2a7.47 7.47 0 0 0-5.34 2.24L16 7.36l-1.11-1.12a7.49 7.49 0 0 0-10.68 0a7.72 7.72 0 0 0 0 10.82L16 29l11.79-11.94a7.72 7.72 0 0 0 0-10.82A7.49 7.49 0 0 0 22.45 4Z"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="M22.45 6a5.47 5.47 0 0 1 3.91 1.64a5.7 5.7 0 0 1 0 8L16 26.13L5.64 15.64a5.7 5.7 0 0 1 0-8a5.48 5.48 0 0 1 7.82 0l2.54 2.6l2.53-2.58A5.44 5.44 0 0 1 22.45 6m0-2a7.47 7.47 0 0 0-5.34 2.24L16 7.36l-1.11-1.12a7.49 7.49 0 0 0-10.68 0a7.72 7.72 0 0 0 0 10.82L16 29l11.79-11.94a7.72 7.72 0 0 0 0-10.82A7.49 7.49 0 0 0 22.45 4Z" /></svg>
             <div class="pl-2">
               <div>{{ contributors }}</div>
-              <div class="text-lg text-gray-600">Contributors</div>
+              <div class="text-lg text-gray-600">
+                Contributors
+              </div>
             </div>
           </div>
         </div>

src/runtime/components/Templates/Community/UnJs.vue

@@ -3,7 +3,6 @@
  * @credits Full Stack Heroes <https://fullstackheroes.com/>
  */
 
-
 withDefaults(defineProps<{
   title?: string
 }>(), {

src/runtime/components/Templates/Community/Wave.vue

@@ -4,10 +4,11 @@ import type { FontConfig, H3EventOgImageRender } from '../../types'
 import { useOgImageRuntimeConfig } from '../../utils'
 import { applyEmojis } from './applyEmojis'
 import { fetchIsland } from './fetchIsland'
+import { theme } from '#nuxt-og-image/unocss-config.mjs'
 
 export async function devIframeTemplate(ctx: H3EventOgImageRender) {
   const { options } = ctx
-  const { fonts, satoriOptions } = useOgImageRuntimeConfig()
+  const { fonts } = useOgImageRuntimeConfig()
   // const path = options.path
   // const scale = query.scale
   // const mode = query.mode || 'light'
@@ -81,15 +82,20 @@ svg[data-emoji] {
     ],
     script: [
       {
-        src: 'https://cdn.tailwindcss.com',
+        src: 'https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-wind.global.js',
       },
       {
-        innerHTML: `tailwind.config = {
-  corePlugins: {
-    preflight: false,
-  },
-  theme: ${JSON.stringify(satoriOptions?.tailwindConfig?.theme || {})}
-}`,
+        innerHTML: `
+  window.__unocss = {
+    theme: ${JSON.stringify(theme)},
+    presets: [
+      () => window.__unocss_runtime.presets.presetWind(),
+    ],
+  }
+`,
+      },
+      {
+        src: 'https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js',
       },
     ],
     link: [

src/runtime/core/html/devIframeTemplate.ts

@@ -0,0 +1,47 @@
+import { createGenerator } from '@unocss/core'
+import presetWind from '@unocss/preset-wind'
+import type { VNode } from '../../../../types'
+import { defineSatoriTransformer } from '../utils'
+import { theme } from '#nuxt-og-image/unocss-config.mjs'
+
+const uno = createGenerator({ theme }, {
+  presets: [
+    presetWind(),
+  ],
+})
+
+// convert classes to inline style using unocss, provides more robust API than satori
+export default defineSatoriTransformer({
+  filter: (node: VNode) => !!node.props?.class,
+  transform: async (node: VNode) => {
+    const classes: string = node.props.class || ''
+    // normalise the styles
+    const styles = node.props.style as Record<string, string> || {}
+
+    const replacedClasses = new Set()
+    for (const token of classes.split(' ').filter(c => c.trim())) {
+      const parsedToken = await uno.parseToken(token)
+      if (parsedToken) {
+        const inlineStyles = parsedToken[0][2].split(';').filter(s => !!s?.trim())
+        const vars: Record<string, string> = {}
+        inlineStyles.filter(s => s.startsWith('--'))
+          .forEach((s) => {
+            const [key, value] = s.split(':')
+            vars[key] = value
+          })
+        inlineStyles.filter(s => !s.startsWith('--'))
+          .forEach((s) => {
+            const [key, value] = s.split(':')
+            const camelCasedKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+            // we need to replace any occurances of a var key with the var values, avoid replacing existing inline styles
+            if (!styles[camelCasedKey])
+              styles[camelCasedKey] = value.replace(/var\((.*?)\)/g, (_, k) => vars[k.trim()])
+          })
+        replacedClasses.add(token)
+      }
+    }
+    node.props.class = classes.split(' ').filter(c => !replacedClasses.has(c)).join(' ')
+    node.props.tw = classes.split(' ').filter(c => !replacedClasses.has(c)).join(' ')
+    node.props.style = styles
+  },
+})

src/runtime/core/renderers/satori/plugins/unocss.ts

@@ -4,6 +4,7 @@ import { fetchIsland } from '../../html/fetchIsland'
 import { applyInlineCss } from '../../html/applyInlineCss'
 import { applyEmojis } from '../../html/applyEmojis'
 import { walkSatoriTree } from './utils'
+import unocss from './plugins/unocss'
 import emojis from './plugins/emojis'
 import twClasses from './plugins/twClasses'
 import imageSrc from './plugins/imageSrc'
@@ -26,6 +27,7 @@ export async function createVNodes(ctx: H3EventOgImageRender): Promise<VNode> {
   const satoriTree = convertHtmlToSatori(template)
   // process the tree
   await walkSatoriTree(ctx, satoriTree, [
+    unocss,
     emojis,
     twClasses,
     imageSrc,

src/runtime/core/renderers/satori/vnodes.ts

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { defineOgImage } from '#imports'
+
+defineOgImage({
+  component: 'CustomClasses',
+})
+</script>
+
+<template>
+  <div>hello world</div>
+</template>

test/fixtures/tailwind/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="w-full h-full flex items-center justify-center bg-primary-500 text-base">
+    <h1 class="text-mega-big">
+      Hello World
+    </h1>
+  </div>
+</template>

test/fixtures/tailwind/components/OgImage/CustomClasses.vue

@@ -0,0 +1,17 @@
+import NuxtOgImage from '../../../src/module'
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  modules: [
+    NuxtOgImage,
+    '@nuxtjs/tailwindcss',
+  ],
+  tailwindcss: {
+    exposeConfig: true,
+  },
+  site: {
+    url: 'https://nuxtseo.com',
+  },
+  devtools: { enabled: false },
+  debug: process.env.NODE_ENV === 'test',
+})

test/fixtures/tailwind/nuxt.config.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      fontSize: {
+        'mega-big': '100px',
+      },
+      colors: {
+        base: colors.white,
+        primary: colors.green,
+      },
+    },
+  },
+}

test/fixtures/tailwind/tailwind.config.ts

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { defineOgImage } from '#imports'
+
+defineOgImage({
+  component: 'CustomClasses',
+})
+</script>
+
+<template>
+  <div>hello world</div>
+</template>

test/fixtures/unocss/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="w-full h-full flex items-center justify-center bg-primary-500 text-base">
+    <h1 class="text-mega-big">
+      Hello World
+    </h1>
+  </div>
+</template>

test/fixtures/unocss/components/OgImage/CustomClasses.vue

@@ -0,0 +1,14 @@
+import NuxtOgImage from '../../../src/module'
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  modules: [
+    NuxtOgImage,
+    '@unocss/nuxt',
+  ],
+  site: {
+    url: 'https://nuxtseo.com',
+  },
+  devtools: { enabled: false },
+  debug: process.env.NODE_ENV === 'test',
+})

test/fixtures/unocss/nuxt.config.ts

@@ -0,0 +1,14 @@
+import colors from 'tailwindcss/colors'
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  theme: {
+    fontSize: {
+      'mega-big': '100px',
+    },
+    colors: {
+      base: colors.white,
+      primary: colors.green,
+    },
+  },
+})

test/fixtures/unocss/uno.config.ts

@@ -33,16 +33,19 @@ describe('html', () => {
         display: inline-block;
       }
       </style>
-      <script src=\\"https://cdn.tailwindcss.com\\"></script>
-      <script>tailwind.config = {
-        corePlugins: {
-          preflight: false,
-        },
-        theme: {}
-      }</script>
+      <script src=\\"https://cdn.jsdelivr.net/npm/@unocss/runtime/preset-wind.global.js\\"></script>
+      <script>
+        window.__unocss = {
+          theme: {\\"theme\\":{}},
+          presets: [
+            () => window.__unocss_runtime.presets.presetWind(),
+          ],
+        }
+      </script>
+      <script src=\\"https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js\\"></script>
       <link href=\\"https://cdn.jsdelivr.net/npm/gardevoir\\" rel=\\"stylesheet\\">
       <link href=\\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\\" rel=\\"stylesheet\\"></head>
-      <body ><div data-v-inspector-ignore=\\"true\\" style=\\"position: relative; display: flex; margin: 0 auto; width: 1200px; height: 600px; overflow: hidden;\\"><div class=\\"w-full h-full flex justify-between relative p-[60px] bg-white text-gray-900\\"><div class=\\"flex absolute top-0 right-[-100%]\\" style=\\"width:200%;height:200%;background-image:radial-gradient(circle, rgba(0, 220, 130, 0.5) 0%,  rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 70%);\\"></div><div class=\\"h-full w-full justify-between relative\\"><div class=\\"flex flex-row justify-between items-center\\"><div class=\\"flex flex-col w-full\\" style=\\"\\"><h1 class=\\"font-bold mb-[30px] text-[75px] max-w-[70%]\\">Hello World</h1><!----></div><!----></div><div class=\\"flex flex-row justify-center items-center text-left w-full\\"><!--[--><svg height=\\"50\\" width=\\"50\\" class=\\"mr-3\\" viewBox=\\"0 0 200 200\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill=\\"#00dc82\\" d=\\"M62.3,-53.9C74.4,-34.5,73.5,-9,67.1,13.8C60.6,36.5,48.7,56.5,30.7,66.1C12.7,75.7,-11.4,74.8,-31.6,65.2C-51.8,55.7,-67.9,37.4,-73.8,15.7C-79.6,-6,-75.1,-31.2,-61.1,-51C-47.1,-70.9,-23.6,-85.4,0.8,-86C25.1,-86.7,50.2,-73.4,62.3,-53.9Z\\" transform=\\"translate(100 100)\\"></path></svg><p style=\\"font-size:25px;\\" class=\\"font-bold\\">nuxt-og-image</p><!--]--></div></div></div></div></body>
+      <body ><div data-v-inspector-ignore=\\"true\\" style=\\"position: relative; display: flex; margin: 0 auto; width: 1200px; height: 600px; overflow: hidden;\\"><div class=\\"w-full h-full flex justify-between relative p-[60px] bg-white text-gray-900\\" nuxt-ssr-component-uid><div class=\\"flex absolute top-0 right-[-100%]\\" style=\\"width:200%;height:200%;background-image:radial-gradient(circle, rgba(0, 220, 130, 0.5) 0%,  rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 70%);\\"></div><div class=\\"h-full w-full justify-between relative\\"><div class=\\"flex flex-row justify-between items-center\\"><div class=\\"flex flex-col w-full\\" style=\\"\\"><h1 class=\\"font-bold mb-[30px] text-[75px] max-w-[70%]\\">Hello World</h1><!----></div><!----></div><div class=\\"flex flex-row justify-center items-center text-left w-full\\"><!--[--><svg height=\\"50\\" width=\\"50\\" class=\\"mr-3\\" viewBox=\\"0 0 200 200\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill=\\"#00dc82\\" d=\\"M62.3,-53.9C74.4,-34.5,73.5,-9,67.1,13.8C60.6,36.5,48.7,56.5,30.7,66.1C12.7,75.7,-11.4,74.8,-31.6,65.2C-51.8,55.7,-67.9,37.4,-73.8,15.7C-79.6,-6,-75.1,-31.2,-61.1,-51C-47.1,-70.9,-23.6,-85.4,0.8,-86C25.1,-86.7,50.2,-73.4,62.3,-53.9Z\\" transform=\\"translate(100 100)\\"></path></svg><p style=\\"font-size:25px;\\" class=\\"font-bold\\">nuxt-og-image</p><!--]--></div></div></div></div></body>
       </html>"
     `)
   }, 60000)

test/integration/endpoints/satori/html.test.ts

@@ -13,7 +13,7 @@ describe('svg', () => {
     expect(svg).toMatchInlineSnapshot(`
       Blob {
         Symbol(kHandle): Blob {},
-        Symbol(kLength): 14732,
+        Symbol(kLength): 14766,
         Symbol(kType): "image/svg+xml",
       }
     `)