nuxt-og-image 5.1.13 → 6.0.0-beta.2

package/README.md

@@ -28,7 +28,7 @@ need this module.
 
 - ✨ 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 / UnoCSS with your theme, Google fonts, 6 emoji families supported and more!
+- ▲ Render using [Satori](https://github.com/vercel/satori) or [Takumi](https://github.com/kane50613/takumi): Tailwind / UnoCSS with your theme, Google fonts, 6 emoji families 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/bin/cli.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import('../dist/cli.mjs')

package/dist/chunks/tw4-classes.cjs

@@ -0,0 +1,116 @@
+'use strict';
+
+const promises = require('node:fs/promises');
+const compilerSfc = require('@vue/compiler-sfc');
+const tinyglobby = require('tinyglobby');
+const module$1 = require('../shared/nuxt-og-image.iluFGbPR.cjs');
+require('node:fs');
+require('@nuxt/kit');
+require('defu');
+require('jiti');
+require('nuxt-site-config/kit');
+require('ohash');
+require('pathe');
+require('pkg-types');
+require('std-env');
+require('node:crypto');
+require('nypm');
+require('../../dist/runtime/logger.js');
+require('chrome-launcher');
+require('node:path');
+require('@nuxt/devtools-kit');
+require('node:url');
+require('magic-string');
+require('strip-literal');
+require('ufo');
+require('unplugin');
+require('postcss');
+require('postcss-calc');
+require('tailwindcss');
+require('culori');
+require('exsolve');
+require('tailwindcss/colors');
+require('../../dist/runtime/server/og-image/satori/transforms/emojis/emoji-utils.js');
+require('magicast');
+require('magicast/helpers');
+
+const ELEMENT_NODE = 1;
+const ATTRIBUTE_NODE = 6;
+const DIRECTIVE_NODE = 7;
+function extractClassesFromVue(code) {
+  const { descriptor } = compilerSfc.parse(code);
+  if (!descriptor.template?.ast)
+    return [];
+  const classes = [];
+  module$1.walkTemplateAst(descriptor.template.ast.children, (node) => {
+    if (node.type !== ELEMENT_NODE)
+      return;
+    const el = node;
+    for (const prop of el.props) {
+      if (prop.type === ATTRIBUTE_NODE && prop.name === "class" && prop.value) {
+        for (const cls of prop.value.content.split(/\s+/)) {
+          if (cls && !cls.includes("{") && !cls.includes("$"))
+            classes.push(cls);
+        }
+      }
+      if (prop.type === DIRECTIVE_NODE && prop.name === "bind" && prop.arg?.type === 4 && prop.arg.content === "class") {
+        const expr = prop.exp;
+        if (expr?.type === 4) {
+          const content = expr.content;
+          extractClassesFromExpression(content, classes);
+        }
+      }
+    }
+  });
+  return classes;
+}
+function extractClassesFromExpression(expr, classes) {
+  for (const match of expr.matchAll(/['"`]([\w:.\-/]+)['"`]/g)) {
+    const cls = match[1];
+    if (cls && !cls.includes("{") && !cls.includes("$") && !cls.includes("/"))
+      classes.push(cls);
+  }
+}
+async function scanComponentClasses(componentDirs, srcDir, logger) {
+  const classes = /* @__PURE__ */ new Set();
+  const patterns = componentDirs.map((dir) => `**/${dir}/**/*.vue`);
+  const files = await tinyglobby.glob(patterns, {
+    cwd: srcDir,
+    absolute: true,
+    ignore: ["**/node_modules/**"]
+  });
+  for (const file of files) {
+    logger?.debug(`TW4: Scanning component ${file}`);
+  }
+  const contents = await Promise.all(
+    files.map((file) => promises.readFile(file, "utf-8").catch(() => null))
+  );
+  for (const content of contents) {
+    if (!content)
+      continue;
+    for (const cls of extractClassesFromVue(content))
+      classes.add(cls);
+  }
+  return classes;
+}
+function filterProcessableClasses(classes) {
+  const processable = [];
+  const responsivePrefixes = ["sm:", "md:", "lg:", "xl:", "2xl:"];
+  for (const cls of classes) {
+    if (responsivePrefixes.some((p) => cls.startsWith(p))) {
+      const baseClass = cls.replace(/^(sm|md|lg|xl|2xl):/, "");
+      if (baseClass)
+        processable.push(baseClass);
+      continue;
+    }
+    if (cls.includes("hover:") || cls.includes("focus:") || cls.includes("active:"))
+      continue;
+    if (cls.startsWith("dark:"))
+      continue;
+    processable.push(cls);
+  }
+  return [...new Set(processable)];
+}
+
+exports.filterProcessableClasses = filterProcessableClasses;
+exports.scanComponentClasses = scanComponentClasses;

package/dist/chunks/tw4-classes.mjs

@@ -0,0 +1,113 @@
+import { readFile } from 'node:fs/promises';
+import { parse } from '@vue/compiler-sfc';
+import { glob } from 'tinyglobby';
+import { w as walkTemplateAst } from '../shared/nuxt-og-image.D-QhzI76.mjs';
+import 'node:fs';
+import '@nuxt/kit';
+import 'defu';
+import 'jiti';
+import 'nuxt-site-config/kit';
+import 'ohash';
+import 'pathe';
+import 'pkg-types';
+import 'std-env';
+import 'node:crypto';
+import 'nypm';
+import '../../dist/runtime/logger.js';
+import 'chrome-launcher';
+import 'node:path';
+import '@nuxt/devtools-kit';
+import 'node:url';
+import 'magic-string';
+import 'strip-literal';
+import 'ufo';
+import 'unplugin';
+import 'postcss';
+import 'postcss-calc';
+import 'tailwindcss';
+import 'culori';
+import 'exsolve';
+import 'tailwindcss/colors';
+import '../../dist/runtime/server/og-image/satori/transforms/emojis/emoji-utils.js';
+import 'magicast';
+import 'magicast/helpers';
+
+const ELEMENT_NODE = 1;
+const ATTRIBUTE_NODE = 6;
+const DIRECTIVE_NODE = 7;
+function extractClassesFromVue(code) {
+  const { descriptor } = parse(code);
+  if (!descriptor.template?.ast)
+    return [];
+  const classes = [];
+  walkTemplateAst(descriptor.template.ast.children, (node) => {
+    if (node.type !== ELEMENT_NODE)
+      return;
+    const el = node;
+    for (const prop of el.props) {
+      if (prop.type === ATTRIBUTE_NODE && prop.name === "class" && prop.value) {
+        for (const cls of prop.value.content.split(/\s+/)) {
+          if (cls && !cls.includes("{") && !cls.includes("$"))
+            classes.push(cls);
+        }
+      }
+      if (prop.type === DIRECTIVE_NODE && prop.name === "bind" && prop.arg?.type === 4 && prop.arg.content === "class") {
+        const expr = prop.exp;
+        if (expr?.type === 4) {
+          const content = expr.content;
+          extractClassesFromExpression(content, classes);
+        }
+      }
+    }
+  });
+  return classes;
+}
+function extractClassesFromExpression(expr, classes) {
+  for (const match of expr.matchAll(/['"`]([\w:.\-/]+)['"`]/g)) {
+    const cls = match[1];
+    if (cls && !cls.includes("{") && !cls.includes("$") && !cls.includes("/"))
+      classes.push(cls);
+  }
+}
+async function scanComponentClasses(componentDirs, srcDir, logger) {
+  const classes = /* @__PURE__ */ new Set();
+  const patterns = componentDirs.map((dir) => `**/${dir}/**/*.vue`);
+  const files = await glob(patterns, {
+    cwd: srcDir,
+    absolute: true,
+    ignore: ["**/node_modules/**"]
+  });
+  for (const file of files) {
+    logger?.debug(`TW4: Scanning component ${file}`);
+  }
+  const contents = await Promise.all(
+    files.map((file) => readFile(file, "utf-8").catch(() => null))
+  );
+  for (const content of contents) {
+    if (!content)
+      continue;
+    for (const cls of extractClassesFromVue(content))
+      classes.add(cls);
+  }
+  return classes;
+}
+function filterProcessableClasses(classes) {
+  const processable = [];
+  const responsivePrefixes = ["sm:", "md:", "lg:", "xl:", "2xl:"];
+  for (const cls of classes) {
+    if (responsivePrefixes.some((p) => cls.startsWith(p))) {
+      const baseClass = cls.replace(/^(sm|md|lg|xl|2xl):/, "");
+      if (baseClass)
+        processable.push(baseClass);
+      continue;
+    }
+    if (cls.includes("hover:") || cls.includes("focus:") || cls.includes("active:"))
+      continue;
+    if (cls.startsWith("dark:"))
+      continue;
+    processable.push(cls);
+  }
+  return [...new Set(processable)];
+}
+
+export { filterProcessableClasses, scanComponentClasses };

package/dist/chunks/tw4-generator.cjs

@@ -0,0 +1,118 @@
+'use strict';
+
+const promises = require('node:fs/promises');
+const pathe = require('pathe');
+const postcss = require('postcss');
+const postcssCalc = require('postcss-calc');
+const postcssCustomProperties = require('postcss-custom-properties');
+const tailwindcss = require('tailwindcss');
+const module$1 = require('../shared/nuxt-og-image.iluFGbPR.cjs');
+require('node:fs');
+require('@nuxt/kit');
+require('defu');
+require('jiti');
+require('nuxt-site-config/kit');
+require('ohash');
+require('pkg-types');
+require('std-env');
+require('node:crypto');
+require('nypm');
+require('../../dist/runtime/logger.js');
+require('chrome-launcher');
+require('node:path');
+require('@nuxt/devtools-kit');
+require('node:url');
+require('magic-string');
+require('strip-literal');
+require('ufo');
+require('unplugin');
+require('culori');
+require('exsolve');
+require('tailwindcss/colors');
+require('../../dist/runtime/server/og-image/satori/transforms/emojis/emoji-utils.js');
+require('@vue/compiler-sfc');
+require('magicast');
+require('magicast/helpers');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const postcss__default = /*#__PURE__*/_interopDefaultCompat(postcss);
+const postcssCalc__default = /*#__PURE__*/_interopDefaultCompat(postcssCalc);
+const postcssCustomProperties__default = /*#__PURE__*/_interopDefaultCompat(postcssCustomProperties);
+
+function buildVarsCSS(vars, nuxtUiColors) {
+  if (nuxtUiColors)
+    module$1.buildNuxtUiVars(vars, nuxtUiColors);
+  const lines = [":root {"];
+  for (const [name, value] of vars) {
+    lines.push(`  ${name}: ${value};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function extractVars(css) {
+  const vars = /* @__PURE__ */ new Map();
+  const root = postcss__default.parse(css);
+  root.walkDecls((decl) => {
+    if (decl.prop.startsWith("--")) {
+      vars.set(decl.prop, decl.value);
+    }
+  });
+  return vars;
+}
+function parseClassStyles(css) {
+  const classMap = /* @__PURE__ */ new Map();
+  const root = postcss__default.parse(css);
+  root.walkRules((rule) => {
+    const selector = rule.selector;
+    if (!selector.startsWith("."))
+      return;
+    const className = module$1.decodeCssClassName(selector);
+    if (className.includes(":") && !className.match(/^[\w-]+$/))
+      return;
+    if (className.includes(" ") || className.includes(">") || className.includes("+"))
+      return;
+    const styles = classMap.get(className) || {};
+    rule.walkDecls((decl) => {
+      if (decl.prop.startsWith("--"))
+        return;
+      const camelProp = decl.prop.replace(/-([a-z])/g, (_, l) => l.toUpperCase());
+      styles[camelProp] = decl.value;
+    });
+    if (Object.keys(styles).length > 0) {
+      classMap.set(className, styles);
+    }
+  });
+  return classMap;
+}
+async function generateStyleMap(options) {
+  const { cssPath, classes, nuxtUiColors } = options;
+  if (classes.length === 0) {
+    return { classes: /* @__PURE__ */ new Map(), vars: /* @__PURE__ */ new Map() };
+  }
+  const cssContent = await promises.readFile(cssPath, "utf-8");
+  const baseDir = pathe.dirname(cssPath);
+  const compiler = await tailwindcss.compile(cssContent, {
+    base: baseDir,
+    loadStylesheet: module$1.createStylesheetLoader(baseDir)
+  });
+  const rawCSS = compiler.build(classes);
+  const vars = extractVars(rawCSS);
+  const varsCSS = buildVarsCSS(vars, nuxtUiColors);
+  const fullCSS = `${varsCSS}
+${rawCSS}`;
+  const result = await postcss__default([
+    postcssCustomProperties__default({
+      preserve: false
+      // Remove var() after resolving
+    }),
+    postcssCalc__default({})
+    // Evaluate calc() expressions
+  ]).process(fullCSS, { from: void 0 });
+  const resolvedCSS = result.css;
+  const hexCSS = module$1.convertOklchToHex(resolvedCSS);
+  const classMap = parseClassStyles(hexCSS);
+  return { classes: classMap, vars };
+}
+
+exports.generateStyleMap = generateStyleMap;

package/dist/chunks/tw4-generator.mjs

@@ -0,0 +1,110 @@
+import { readFile } from 'node:fs/promises';
+import { dirname } from 'pathe';
+import postcss from 'postcss';
+import postcssCalc from 'postcss-calc';
+import postcssCustomProperties from 'postcss-custom-properties';
+import { compile } from 'tailwindcss';
+import { c as createStylesheetLoader, a as convertOklchToHex, b as buildNuxtUiVars, d as decodeCssClassName } from '../shared/nuxt-og-image.D-QhzI76.mjs';
+import 'node:fs';
+import '@nuxt/kit';
+import 'defu';
+import 'jiti';
+import 'nuxt-site-config/kit';
+import 'ohash';
+import 'pkg-types';
+import 'std-env';
+import 'node:crypto';
+import 'nypm';
+import '../../dist/runtime/logger.js';
+import 'chrome-launcher';
+import 'node:path';
+import '@nuxt/devtools-kit';
+import 'node:url';
+import 'magic-string';
+import 'strip-literal';
+import 'ufo';
+import 'unplugin';
+import 'culori';
+import 'exsolve';
+import 'tailwindcss/colors';
+import '../../dist/runtime/server/og-image/satori/transforms/emojis/emoji-utils.js';
+import '@vue/compiler-sfc';
+import 'magicast';
+import 'magicast/helpers';
+
+function buildVarsCSS(vars, nuxtUiColors) {
+  if (nuxtUiColors)
+    buildNuxtUiVars(vars, nuxtUiColors);
+  const lines = [":root {"];
+  for (const [name, value] of vars) {
+    lines.push(`  ${name}: ${value};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function extractVars(css) {
+  const vars = /* @__PURE__ */ new Map();
+  const root = postcss.parse(css);
+  root.walkDecls((decl) => {
+    if (decl.prop.startsWith("--")) {
+      vars.set(decl.prop, decl.value);
+    }
+  });
+  return vars;
+}
+function parseClassStyles(css) {
+  const classMap = /* @__PURE__ */ new Map();
+  const root = postcss.parse(css);
+  root.walkRules((rule) => {
+    const selector = rule.selector;
+    if (!selector.startsWith("."))
+      return;
+    const className = decodeCssClassName(selector);
+    if (className.includes(":") && !className.match(/^[\w-]+$/))
+      return;
+    if (className.includes(" ") || className.includes(">") || className.includes("+"))
+      return;
+    const styles = classMap.get(className) || {};
+    rule.walkDecls((decl) => {
+      if (decl.prop.startsWith("--"))
+        return;
+      const camelProp = decl.prop.replace(/-([a-z])/g, (_, l) => l.toUpperCase());
+      styles[camelProp] = decl.value;
+    });
+    if (Object.keys(styles).length > 0) {
+      classMap.set(className, styles);
+    }
+  });
+  return classMap;
+}
+async function generateStyleMap(options) {
+  const { cssPath, classes, nuxtUiColors } = options;
+  if (classes.length === 0) {
+    return { classes: /* @__PURE__ */ new Map(), vars: /* @__PURE__ */ new Map() };
+  }
+  const cssContent = await readFile(cssPath, "utf-8");
+  const baseDir = dirname(cssPath);
+  const compiler = await compile(cssContent, {
+    base: baseDir,
+    loadStylesheet: createStylesheetLoader(baseDir)
+  });
+  const rawCSS = compiler.build(classes);
+  const vars = extractVars(rawCSS);
+  const varsCSS = buildVarsCSS(vars, nuxtUiColors);
+  const fullCSS = `${varsCSS}
+${rawCSS}`;
+  const result = await postcss([
+    postcssCustomProperties({
+      preserve: false
+      // Remove var() after resolving
+    }),
+    postcssCalc({})
+    // Evaluate calc() expressions
+  ]).process(fullCSS, { from: void 0 });
+  const resolvedCSS = result.css;
+  const hexCSS = convertOklchToHex(resolvedCSS);
+  const classMap = parseClassStyles(hexCSS);
+  return { classes: classMap, vars };
+}
+
+export { generateStyleMap };