refactor!: drop css-inline support

Author: harlan-zw

package.json

@@ -68,8 +68,6 @@
     "test:chrome": "HAS_CHROME=true vitest"
   },
   "peerDependencies": {
-    "@css-inline/css-inline": "^0.19.0",
-    "@css-inline/css-inline-wasm": "^0.19.0",
     "@resvg/resvg-js": "^2.6.0",
     "@resvg/resvg-wasm": "^2.6.0",
     "@takumi-rs/core": "^0.62.0",
@@ -84,12 +82,6 @@
     "unstorage": "^1.15.0"
   },
   "peerDependenciesMeta": {
-    "@css-inline/css-inline": {
-      "optional": true
-    },
-    "@css-inline/css-inline-wasm": {
-      "optional": true
-    },
     "@resvg/resvg-js": {
       "optional": true
     },
@@ -154,8 +146,6 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "catalog:",
-    "@css-inline/css-inline": "catalog:",
-    "@css-inline/css-inline-wasm": "catalog:",
     "@iconify-json/carbon": "catalog:",
     "@iconify-json/logos": "catalog:",
     "@iconify-json/noto": "catalog:",

pnpm-workspace.yaml

@@ -22,9 +22,7 @@ overrides:
 
 catalog:
   '@antfu/eslint-config': ^7.3.0
-  '@clack/prompts': ^1.0.0
-  '@css-inline/css-inline': ^0.20.0
-  '@css-inline/css-inline-wasm': ^0.20.0
+  '@clack/prompts': ^1.0.1
   '@iconify-json/carbon': ^1.2.18
   '@iconify-json/logos': ^1.2.10
   '@iconify-json/noto': ^1.2.7

src/compatibility.ts

@@ -6,7 +6,6 @@ import { addTemplate, useNuxt } from '@nuxt/kit'
 import { defu } from 'defu'
 import { env, provider } from 'std-env'
 import { logger } from './runtime/logger'
-import { hasResolvableDependency } from './util'
 
 const autodetectableProviders = {
   azure_static: 'azure',
@@ -25,13 +24,12 @@ const autodetectableStaticProviders = {
 
 export const NodeRuntime: RuntimeCompatibilitySchema = {
   // node-server runtime
-  'browser': 'on-demand', // this gets changed build start
-  'css-inline': 'node',
-  'resvg': 'node',
-  'satori': 'node',
-  'takumi': 'node',
-  'sharp': 'node', // will be disabled if they're missing the dependency
-  'emoji': 'local', // can bundle icons, no size constraints
+  browser: 'on-demand', // this gets changed build start
+  resvg: 'node',
+  satori: 'node',
+  takumi: 'node',
+  sharp: 'node', // will be disabled if they're missing the dependency
+  emoji: 'local', // can bundle icons, no size constraints
 }
 
 const NodeDevRuntime: RuntimeCompatibilitySchema = {
@@ -41,36 +39,33 @@ const NodeDevRuntime: RuntimeCompatibilitySchema = {
 }
 
 const cloudflare: RuntimeCompatibilitySchema = {
-  'browser': 'cloudflare',
-  'css-inline': false,
-  'resvg': 'wasm',
-  'satori': '0-15-wasm',
-  'takumi': 'wasm',
-  'sharp': false,
-  'emoji': 'fetch', // edge size limits - use API instead of bundling 24MB icons
-  'wasm': {
+  browser: 'cloudflare',
+  resvg: 'wasm',
+  satori: 'wasm',
+  takumi: 'wasm',
+  sharp: false,
+  emoji: 'fetch', // edge size limits - use API instead of bundling 24MB icons
+  wasm: {
     esmImport: true,
     lazy: true,
   },
 }
 const awsLambda: RuntimeCompatibilitySchema = {
-  'browser': false,
-  'css-inline': 'wasm',
-  'resvg': 'node',
-  'satori': 'node',
-  'takumi': 'node',
-  'sharp': false, // 0.33.x has issues
-  'emoji': 'local', // serverless has larger size limits
+  browser: false,
+  resvg: 'node',
+  satori: 'node',
+  takumi: 'node',
+  sharp: false, // 0.33.x has issues
+  emoji: 'local', // serverless has larger size limits
 }
 
 export const WebContainer: RuntimeCompatibilitySchema = {
-  'browser': false,
-  'css-inline': 'wasm-fs',
-  'resvg': 'wasm-fs',
-  'satori': 'wasm-fs',
-  'takumi': 'wasm',
-  'sharp': false,
-  'emoji': 'fetch', // webcontainer has size constraints
+  browser: false,
+  resvg: 'wasm-fs',
+  satori: 'wasm-fs',
+  takumi: 'wasm',
+  sharp: false,
+  emoji: 'fetch', // webcontainer has size constraints
 }
 
 export const RuntimeCompatibility: Record<string, RuntimeCompatibilitySchema> = {
@@ -82,14 +77,13 @@ export const RuntimeCompatibility: Record<string, RuntimeCompatibilitySchema> =
   'aws-lambda': awsLambda,
   'netlify': awsLambda,
   'netlify-edge': {
-    'browser': false,
-    'css-inline': 'wasm',
-    'resvg': 'wasm',
-    'satori': 'node',
-    'takumi': 'wasm',
-    'sharp': false,
-    'emoji': 'fetch', // edge size limits
-    'wasm': {
+    browser: false,
+    resvg: 'wasm',
+    satori: 'node',
+    takumi: 'wasm',
+    sharp: false,
+    emoji: 'fetch', // edge size limits
+    wasm: {
       rollup: {
         targetEnv: 'auto-inline',
         sync: ['@resvg/resvg-wasm/index_bg.wasm'],
@@ -99,14 +93,13 @@ export const RuntimeCompatibility: Record<string, RuntimeCompatibilitySchema> =
   'firebase': awsLambda,
   'vercel': awsLambda,
   'vercel-edge': {
-    'browser': false,
-    'css-inline': false, // size constraint (2mb is max)
-    'resvg': 'wasm',
-    'satori': '0-15-wasm', // 0.16+ uses WebAssembly.instantiate() blocked by edge
-    'takumi': 'wasm',
-    'sharp': false,
-    'emoji': 'fetch', // edge size limits - bundling 24MB icons not viable
-    'wasm': {
+    browser: false,
+    resvg: 'wasm',
+    satori: 'wasm',
+    takumi: 'wasm',
+    sharp: false,
+    emoji: 'fetch', // edge size limits - bundling 24MB icons not viable
+    wasm: {
       // lowers workers kb size
       esmImport: true,
       lazy: true,
@@ -152,9 +145,6 @@ export async function applyNitroPresetCompatibility(nitroConfig: NitroConfig, op
   const target = resolveNitroPreset(nitroConfig)
   const compatibility: RuntimeCompatibilitySchema = getPresetNitroPresetCompatibility(target)
 
-  const hasCssInlineNode = await hasResolvableDependency('@css-inline/css-inline')
-  const hasCssInlineWasm = await hasResolvableDependency('@css-inline/css-inline-wasm')
-
   const { resolve, detectedRenderers } = options
 
   // Enable renderers based on detected component suffixes
@@ -180,11 +170,6 @@ export async function applyNitroPresetCompatibility(nitroConfig: NitroConfig, op
     let binding = options.compatibility?.[key]
     if (typeof binding === 'undefined')
       binding = compatibility[key]
-    if (key === 'css-inline' && typeof binding === 'string') {
-      if ((binding === 'node' && !hasCssInlineNode) || (['wasm', 'wasm-fs'].includes(binding) && !hasCssInlineWasm)) {
-        binding = false
-      }
-    }
     // @ts-expect-error untyped
     resolvedCompatibility[key] = binding
     return {
@@ -197,7 +182,6 @@ export async function applyNitroPresetCompatibility(nitroConfig: NitroConfig, op
     await applyBinding('takumi'),
     await applyBinding('resvg'),
     await applyBinding('sharp'),
-    await applyBinding('css-inline'),
     nitroConfig.alias || {},
   )
   // if we're using any wasm modules we need to enable the wasm runtime

src/runtime/server/og-image/bindings/css-inline/node.ts

@@ -3,7 +3,6 @@ import type _sharp from 'sharp'
 
 // we keep instances alive to avoid re-importing them on every request
 // Using any for bindings since they differ between node/wasm variants
-const cssInlineInstance: { instance?: { initWasmPromise: Promise<void>, cssInline: any } } = { instance: undefined }
 const sharpInstance: { instance?: typeof _sharp } = { instance: undefined }
 const resvgInstance: { instance?: { initWasmPromise: Promise<void>, Resvg: any } } = { instance: undefined }
 const satoriInstance: { instance?: { initWasmPromise: Promise<void>, satori: typeof _satori } } = { instance: undefined }
@@ -24,9 +23,3 @@ export async function useSharp() {
   sharpInstance.instance = sharpInstance.instance || await import('#og-image/bindings/sharp').then(m => m.default)
   return sharpInstance.instance!
 }
-
-export async function useCssInline() {
-  cssInlineInstance.instance = cssInlineInstance.instance || await import('#og-image/bindings/css-inline').then(m => m.default)
-  await cssInlineInstance.instance!.initWasmPromise
-  return cssInlineInstance.instance!.cssInline
-}

src/runtime/server/og-image/bindings/css-inline/wasm-fs.ts

@@ -13,7 +13,6 @@ import imageSrc from './plugins/imageSrc'
 import nuxtIcon from './plugins/nuxt-icon'
 import twClasses from './plugins/twClasses'
 import { applyEmojis } from './transforms/emojis'
-import { applyInlineCss } from './transforms/inlineCss'
 import { walkSatoriTree } from './utils'
 
 function camelCase(str: string): string {
@@ -91,9 +90,8 @@ export async function createVNodes(ctx: OgImageRenderEventContext): Promise<VNod
     // this fixes any inline style props that need to be wrapped in single quotes, such as:
     // background image, fonts, etc
     island.html = htmlDecodeQuotes(island.html)
-    // pre-transform HTML - apply emoji replacements and inline CSS
+    // pre-transform HTML - apply emoji replacements
     await applyEmojis(ctx, island)
-    await applyInlineCss(ctx, island)
     html = island.html
     if (html?.includes('<body>')) {
       // get inner contents of body

src/runtime/server/og-image/bindings/css-inline/wasm.ts

@@ -221,7 +221,6 @@ export interface SatoriFontConfig extends FontConfig {
 
 export interface RuntimeCompatibilitySchema {
   browser: 'chrome-launcher' | 'on-demand' | 'playwright' | 'cloudflare' | false
-  ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false
   resvg: 'node' | 'node-dev' | 'wasm' | 'wasm-fs' | 'wasm-edge' | false
   satori: 'node' | 'wasm' | '0-15-wasm' | 'wasm-fs' | 'wasm-edge' | false
   takumi: 'node' | 'node-dev' | 'wasm' | false