@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
54 lines • 1.63 kB
TypeScript
/**
* Generate a unique component ID based on hash
*/
export declare function generateComponentId(componentName: string, salt?: string): string;
/**
* Scope CSS to a specific component
*
* @param css - Raw CSS string
* @param componentId - Unique component identifier
* @param options - Scoping options
* @returns Scoped CSS string
*
* @example
* ```typescript
* const scoped = scopeCss('.button { color: red; }', 'stx-abc123')
* // Returns: '.stx-abc123 .button { color: red; }'
* ```
*/
export declare function scopeCss(css: string, componentId: string, options?: CssScopingOptions): string;
/**
* Extract CSS from a template
*
* @param template - The template string
* @returns Object with CSS content and template without style tags
*/
export declare function extractStyleFromTemplate(template: string): {
css: string
templateWithoutStyle: string
};
/**
* Inject scoped CSS into a template
*
* @param template - The template string
* @param scopedCss - The scoped CSS to inject
* @param position - Where to inject: 'head', 'body-start', 'body-end'
* @returns Template with injected CSS
*/
export declare function injectScopedCss(template: string, scopedCss: string, position?: 'head' | 'body-start' | 'body-end'): string;
/**
* Generate CSS for Shadow DOM encapsulation
*
* @param css - Raw CSS
* @returns CSS suitable for Shadow DOM
*/
export declare function generateShadowDomCss(css: string): string;
/**
* Options for CSS scoping
*/
export declare interface CssScopingOptions {
prefix?: string
preserveHost?: boolean
scopeKeyframes?: boolean
scopeCustomProperties?: boolean
}