@wippy-fe/webcomponent-core 0.0.20 → 0.0.22

package/README.md

@@ -46,7 +46,6 @@ Shared **platform CSS** loaded at runtime from the Wippy host into the shadow ro
 
 | Key | What it provides | When to include |
 |-----|-----------------|-----------------|
-| `fontCssUrl` | Platform font definitions | Almost always — skip only if using fully custom fonts |
 | `themeConfigUrl` | CSS custom properties (color scales, spacing, radii, etc.) matching the host theme | **Recommended for all components.** This is what makes your component look consistent with the host. At dev time, a local `theme-config.css` provides fallback values; at runtime the host injects the real theme. |
 | `primeVueCssUrl` | PrimeVue component classes (`p-button`, `p-input`, etc.) in unstyled mode, styled to match the host | **Include if using any PrimeVue components** (buttons, forms, tables, etc.). Skip only for fully custom UI with zero PrimeVue usage. |
 | `markdownCssUrl` | Styles for rendered markdown blocks | **Include only if rendering markdown.** |
@@ -56,19 +55,19 @@ Shared **platform CSS** loaded at runtime from the Wippy host into the shadow ro
 
 ```ts
 // Standard component using PrimeVue UI (most common)
-hostCssKeys: ['fontCssUrl', 'themeConfigUrl', 'primeVueCssUrl', 'iframeCssUrl']
+hostCssKeys: ['themeConfigUrl', 'primeVueCssUrl', 'iframeCssUrl']
 
 // Also renders markdown content
-hostCssKeys: ['fontCssUrl', 'themeConfigUrl', 'primeVueCssUrl', 'markdownCssUrl', 'iframeCssUrl']
+hostCssKeys: ['themeConfigUrl', 'primeVueCssUrl', 'markdownCssUrl', 'iframeCssUrl']
 
 // Minimal: just theme variables, no PrimeVue
-hostCssKeys: ['fontCssUrl', 'themeConfigUrl', 'iframeCssUrl']
+hostCssKeys: ['themeConfigUrl', 'iframeCssUrl']
 
 // Fully self-styled, no host inheritance
 hostCssKeys: []
 ```
 
-Default (when omitted): all five keys.
+Default (when omitted): all four keys.
 
 > **Note on dev-time duplication:** Your component's `styles.css` may import `theme-config.css` for local dev (so Tailwind/PostCSS can resolve theme variables). At runtime, the host provides the real theme via `themeConfigUrl`. This duplication is a known trade-off — the host's runtime values take precedence.
 
@@ -173,7 +172,7 @@ interface WippyPropDefinition {
   items?: { type: string }
 }
 
-type HostCssKey = 'fontCssUrl' | 'themeConfigUrl' | 'primeVueCssUrl' | 'markdownCssUrl' | 'iframeCssUrl'
+type HostCssKey = 'themeConfigUrl' | 'primeVueCssUrl' | 'markdownCssUrl' | 'iframeCssUrl'
 ```
 
 ## Migration from monolithic pattern
@@ -191,7 +190,7 @@ class MyElement extends WippyElement {
   static get wippyConfig() {
     return {
       propsSchema: pkg.wippy.props,
-      hostCssKeys: ['fontCssUrl', 'themeConfigUrl', 'primeVueCssUrl', 'iframeCssUrl'],
+      hostCssKeys: ['themeConfigUrl', 'primeVueCssUrl', 'iframeCssUrl'],
       containerClasses: ['h-full'],
       inlineCss: stylesText,
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wippy-fe/webcomponent-core",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Framework-agnostic base class for Wippy web components — shadow DOM, CSS loading, schema-driven prop parsing, and lifecycle management.",
   "type": "module",
   "main": "src/index.ts",
@@ -10,8 +10,8 @@
     "package.json"
   ],
   "peerDependencies": {
-    "@wippy-fe/proxy": "^0.0.20",
-    "@iconify/vue": "^5.0.0"
+    "@iconify/vue": "^5.0.0",
+    "@wippy-fe/proxy": "0.0.22"
   },
   "license": "UNLICENSED"
-}
+}

package/src/css-loader.ts

@@ -2,7 +2,6 @@ import type { HostCssKey } from './types.ts'
 import { hostCss, loadCss } from '@wippy-fe/proxy'
 
 const DEFAULT_HOST_CSS_KEYS: HostCssKey[] = [
-  'fontCssUrl',
   'themeConfigUrl',
   'primeVueCssUrl',
   'markdownCssUrl',
@@ -15,17 +14,31 @@ const DEFAULT_HOST_CSS_KEYS: HostCssKey[] = [
  */
 export function loadHostCss(shadow: ShadowRoot, keys?: HostCssKey[]): Promise<void> {
   const cssKeys = keys ?? DEFAULT_HOST_CSS_KEYS
-  return Promise.all(
-    cssKeys.map(key => loadCss(hostCss[key])),
-  ).then((cssChunks) => {
+  // Filter out keys whose URL is missing (e.g. removed CSS like fontCssUrl).
+  // Load each independently so one failure doesn't block the rest.
+  const jobs = cssKeys.map(async (key) => {
+    const url = hostCss[key]
+    if (!url) {
+      console.warn(`[wippy-fe/webcomponent-core] hostCss key "${key}" is undefined — skipping. Remove it from hostCssKeys if the CSS was removed.`)
+      return null
+    }
+    try {
+      return await loadCss(url)
+    }
+    catch (err) {
+      console.warn(`[wippy-fe/webcomponent-core] Failed to load hostCss "${key}" (${url}):`, err)
+      return null
+    }
+  })
+  return Promise.all(jobs).then((cssChunks) => {
     for (const css of cssChunks) {
+      if (!css)
+        continue
       const style = document.createElement('style')
       style.textContent = css
       style.setAttribute('role', '@wippy-fe/host-css')
       shadow.appendChild(style)
     }
-  }).catch((err) => {
-    console.warn('Failed to load host CSS:', err)
   })
 }
 

package/src/types.ts

@@ -31,7 +31,7 @@ export interface WippyPropsSchema {
  * Keys that map to CSS URLs exposed by `@wippy-fe/proxy`'s `hostCss` object.
  * Pass a subset to `hostCssKeys` in config to load only what you need.
  */
-export type HostCssKey = 'fontCssUrl' | 'themeConfigUrl' | 'primeVueCssUrl' | 'markdownCssUrl' | 'iframeCssUrl'
+export type HostCssKey = 'themeConfigUrl' | 'primeVueCssUrl' | 'markdownCssUrl' | 'iframeCssUrl'
 
 /**
  * Configuration object returned by `static get wippyConfig()`.
@@ -57,7 +57,6 @@ export interface WippyElementConfig<Props = Record<string, unknown>> {
    * The host app provides these CSS assets at runtime via `@wippy-fe/proxy`.
    *
    * Available keys:
-   * - `fontCssUrl` — Platform font definitions. Include unless using fully custom fonts.
    * - `themeConfigUrl` — CSS custom properties (color scales, spacing, etc.) matching the
    *    host theme. **Recommended for all components** — gives your component the same look
    *    as the host app. At dev time, a local copy (`theme-config.css`) provides fallback
@@ -71,7 +70,7 @@ export interface WippyElementConfig<Props = Record<string, unknown>> {
    *    components** so scrollbars look identical to the host app.
    *
    * Pass `[]` to skip host CSS entirely (fully self-styled component).
-   * Defaults to `['fontCssUrl', 'themeConfigUrl', 'primeVueCssUrl', 'markdownCssUrl', 'iframeCssUrl']`.
+   * Defaults to `['themeConfigUrl', 'primeVueCssUrl', 'markdownCssUrl', 'iframeCssUrl']`.
    */
   hostCssKeys?: HostCssKey[]
   /**