fix(image): use css

Author: lxsmnsyc

packages/start/src/image/index.tsx

@@ -8,7 +8,9 @@ import {
   mergeImageVariantsToSrcSet,
 } from "./transformer.ts";
 import type { StartImageSource, StartImageTransformer, StartImageVariant } from "./types.ts";
-import { BLOCKER_STYLE, getAspectRatioBoxStyle, IMAGE_CONTAINER, IMAGE_STYLE } from "./utils.ts";
+import { getAspectRatioBoxStyle } from "./utils.ts";
+
+import "./styles.css";
 
 export interface StartImageProps<T> {
   src: StartImageSource<T>;
@@ -58,15 +60,15 @@ export function StartImage<T>(props: StartImageProps<T>): JSX.Element {
   const height = createMemo(() => props.src.height);
 
   return (
-    <div ref={laze.ref} data-start-image="image-container" style={IMAGE_CONTAINER}>
+    <div ref={laze.ref} data-start-image="container">
       <div
         data-start-image="aspect-ratio"
         style={getAspectRatioBoxStyle({
           width: width(),
           height: height(),
         })}
       >
-        <picture style={IMAGE_STYLE}>
+        <picture data-start-image="picture">
           <Show when={props.transformer} fallback={<source src={props.src.source} />}>
             {cb => <StartImageSources variants={createImageVariants(props.src, cb())} {...props} />}
           </Show>
@@ -75,7 +77,6 @@ export function StartImage<T>(props: StartImageProps<T>): JSX.Element {
               <img
                 data-start-image="image"
                 alt={props.alt}
-                style={IMAGE_STYLE}
                 crossOrigin={props.crossOrigin}
                 fetchpriority={props.fetchPriority}
                 decoding={props.decoding}
@@ -107,7 +108,7 @@ export function StartImage<T>(props: StartImageProps<T>): JSX.Element {
           </ClientOnly>
         </picture>
       </div>
-      <div style={BLOCKER_STYLE}>
+      <div data-start-image="blocker">
         <ClientOnly>
           <Show when={laze.visible}>{props.fallback(showPlaceholder, onPlaceholderLoad)}</Show>
         </ClientOnly>

packages/start/src/image/styles.css

@@ -0,0 +1,24 @@
+[data-start-image="blocker"],
+[data-start-image="image"],
+[data-start-image="picture"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+[data-start-image="image"],
+[data-start-image="picture"] {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+}
+
+[data-start-image="container"] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}

packages/start/src/image/utils.ts

@@ -30,29 +30,6 @@ export function getAspectRatioBoxStyle(ratio: AspectRatio): JSX.CSSProperties {
   };
 }
 
-export const IMAGE_CONTAINER: JSX.CSSProperties = {
-  width: "100%",
-  height: "100%",
-  position: "relative",
-};
-
-export const BLOCKER_STYLE: JSX.CSSProperties = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-};
-
-export const IMAGE_STYLE: JSX.CSSProperties = {
-  ...BLOCKER_STYLE,
-  width: "100%",
-  height: "100%",
-  "object-fit": "contain",
-  "pointer-events": "none",
-  "user-select": "none",
-};
-
 export function getEmptySVGPlaceholder({ width, height }: AspectRatio): string {
   return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" version="1.1"/>`;
 }