GLUON / DOCS Playground

@gluonjs/quarks

@gluonjs/quarks / packages/quarks/src / ComponentLibraryStyleResolver

Interface: ComponentLibraryStyleResolver

Methods

resolve()

resolve(entry): readonly CSSStyleSheet[]

Resolve constructable sheets for exactly one loaded public entry.

Parameters

entry

ComponentLibraryEntry

Returns

readonly CSSStyleSheet[]

Example

Return constructable stylesheets only for the exact loaded component entry:

ts
import { createComponentLibraryLoader, type ComponentLibraryLoader, type ComponentLibraryLoaderOptions, type ComponentLibraryManifest, type ComponentLibraryModuleResolver, type ComponentLibraryStyleResolver, type ComponentLoadResult, type ComponentLoadStatus } from '@gluonjs/quarks';

const manifest = { schemaVersion: 1, name: '@acme/shop-components', entries: [{ id: 'purchase-action', module: '@acme/shop-components/purchase-action', exportName: 'PurchaseAction', layer: 'atom', styles: [], dependencies: [], accessibility: 'Renders a labelled native button.' }] } as const satisfies ComponentLibraryManifest;
const resolver: ComponentLibraryModuleResolver = { load: async (entry) => ({ entry: entry.id }) };
const styles: ComponentLibraryStyleResolver = { resolve: () => [] };
const options: ComponentLibraryLoaderOptions = { styleTarget: document, styles };
const loader: ComponentLibraryLoader = createComponentLibraryLoader(manifest, resolver, options);
const component: ComponentLoadResult = await loader.load('purchase-action');
const status: ComponentLoadStatus = loader.status('purchase-action');
console.log(status, component.entry.exportName);