fix: use adopted stylesheets instead of style tags

Neovici · Mar 18, 2024 · 321ef54 · 321ef54
1 parent 10392c8
commit 321ef54
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/autocomplete/autocomplete.ts b/src/autocomplete/autocomplete.ts
@@ -88,9 +88,7 @@ const autocomplete = <I>(props: AProps<I>) => {
 			[],
 		);
 
-		return html` <style>
-				${style}
-			</style>
+		return html`
 			<cosmoz-input
 				id="input"
 				part="input"
@@ -170,4 +168,4 @@ const autocomplete = <I>(props: AProps<I>) => {
 		'wrap',
 	];
 
-export { autocomplete, Autocomplete, observedAttributes };
+export { autocomplete, Autocomplete, observedAttributes, style };
diff --git a/src/autocomplete/chip.ts b/src/autocomplete/chip.ts
@@ -1,6 +1,7 @@
-import { html, component } from '@pionjs/pion';
-import { when } from 'lit-html/directives/when.js';
+import { sheet } from '@neovici/cosmoz-utils';
+import { component, html } from '@pionjs/pion';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { when } from 'lit-html/directives/when.js';
 import styles from './chip.css';
 
 const clear = html`
@@ -33,9 +34,6 @@ interface Props {
 	disabled?: boolean;
 }
 export const Chip = ({ onClear, disabled }: Props) => html`
-	<style>
-		${styles}
-	</style>
 	<div class="content" part="content chip-text"><slot></slot></div>
 	${when(
 		onClear && !disabled,
@@ -48,7 +46,10 @@ export const Chip = ({ onClear, disabled }: Props) => html`
 
 customElements.define(
 	'cosmoz-autocomplete-chip',
-	component<Props>(Chip, { observedAttributes: ['disabled'] }),
+	component<Props>(Chip, {
+		observedAttributes: ['disabled'],
+		styleSheets: [sheet(styles)],
+	}),
 );
 
 interface ChipProps extends Props {

diff --git a/src/autocomplete/index.ts b/src/autocomplete/index.ts
@@ -3,7 +3,9 @@ import {
 	Autocomplete,
 	observedAttributes as atts,
 	Props,
+	style,
 } from './autocomplete';
+import { sheet } from '@neovici/cosmoz-utils';
 
 const Standalone = <I>(host: HTMLElement & Props<I>) => {
 	const { onChange, onText, ...props } = host;
@@ -15,25 +17,26 @@ const Standalone = <I>(host: HTMLElement & Props<I>) => {
 				host.value = value;
 				onChange?.(value, ...args);
 			},
-			[onChange]
+			[onChange],
 		),
 		onText: useCallback(
 			(text: string) => {
 				host.text = text;
 				onText?.(text);
 			},
-			[onText]
+			[onText],
 		),
 	});
 };
 
-const observedAttributes = atts as (keyof Props<unknown>)[];
+const observedAttributes = atts as (keyof Props<unknown>)[],
+	styleSheets = [sheet(style)];
 
 customElements.define(
 	'cosmoz-autocomplete-ui',
-	component<Props<unknown>>(Autocomplete, { observedAttributes })
+	component<Props<unknown>>(Autocomplete, { observedAttributes, styleSheets }),
 );
 customElements.define(
 	'cosmoz-autocomplete',
-	component<Props<unknown>>(Standalone, { observedAttributes })
+	component<Props<unknown>>(Standalone, { observedAttributes, styleSheets }),
 );
diff --git a/src/listbox/index.ts b/src/listbox/index.ts
@@ -1,16 +1,18 @@
-import { html, component, useEffect, useRef, useMemo } from '@pionjs/pion';
-import { ref } from 'lit-html/directives/ref.js';
 import {
+	VirtualizeDirectiveConfig,
+	VirtualizerHostElement,
 	virtualize,
 	virtualizerRef,
-	VirtualizerHostElement,
-	VirtualizeDirectiveConfig,
 } from '@lit-labs/virtualizer/virtualize.js';
+import { sheet } from '@neovici/cosmoz-utils';
 import { portal } from '@neovici/cosmoz-utils/directives/portal';
 import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
+import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 import { props } from '@neovici/cosmoz-utils/object';
-import { useListbox, properties, Props } from './use-listbox';
-import { styles } from './style.css';
+import { component, html, useEffect, useMemo, useRef } from '@pionjs/pion';
+import { ref } from 'lit-html/directives/ref.js';
+import style, { styles } from './style.css';
+import { Props, properties, useListbox } from './use-listbox';
 
 const Listbox = <I>(props: Props<I>) => {
 	const listRef = useRef<Element | undefined>(undefined);
@@ -25,29 +27,31 @@ const Listbox = <I>(props: Props<I>) => {
 		vl.element(position.index)?.scrollIntoView({ block: 'nearest' });
 	}, [position]);
 
+	useStyleSheet(styles({ ...position, height, itemHeight }));
+
 	const layout = useMemo(
 		() =>
 			({
 				_itemSize: { height: itemHeight - 0.00001 },
-			} as VirtualizeDirectiveConfig<unknown>['layout']),
-		[itemHeight]
+			}) as VirtualizeDirectiveConfig<unknown>['layout'],
+		[itemHeight],
 	);
 
-	return html` <style>
-			${styles({ ...position, height, itemHeight })}
-		</style>
-		<div class="items" ${ref((el) => (listRef.current = el))}>
-			<div virtualizer-sizer></div>
-			${virtualize({
-				items,
-				renderItem,
-				scroller: true,
-				layout,
-			})}
-		</div>`;
+	return html`<div class="items" ${ref((el) => (listRef.current = el))}>
+		<div virtualizer-sizer></div>
+		${virtualize({
+			items,
+			renderItem,
+			scroller: true,
+			layout,
+		})}
+	</div>`;
 };
 
-customElements.define('cosmoz-listbox', component<Props<unknown>>(Listbox));
+customElements.define(
+	'cosmoz-listbox',
+	component<Props<unknown>>(Listbox, { styleSheets: [sheet(style)] }),
+);
 
 export const listbox = <I>({
 	multi,
@@ -58,5 +62,5 @@ export const listbox = <I>({
 			part="listbox"
 			?multi=${multi}
 			...=${spreadProps(props(properties)(thru))}
-		></cosmoz-listbox>`
+		></cosmoz-listbox>`,
 	);
diff --git a/src/listbox/style.css.ts b/src/listbox/style.css.ts
@@ -96,8 +96,6 @@ export const styles = ({
 	height: number;
 	itemHeight: number;
 }) => css`
-	${style}
-
 	:host {
 		min-height: ${itemHeight}px;
 		height: ${height}px;