astro-lqip 1.3.0 → 1.3.2

package/README.md

@@ -51,10 +51,10 @@ Example:
 
 ```astro
 ---
-import { Image, Picture } from 'astro-lqip/components'
+import { Image, Picture } from 'astro-lqip/components';
 
-import image from './path/to/image.png'
-import otherImage from './path/to/other-image.png'
+import image from './path/to/image.png';
+import otherImage from './path/to/other-image.png';
 ---
 
 <Image src={image} alt="Cover Image" width={220} height={220} />
@@ -73,16 +73,16 @@ Both `<Image>` and `<Picture>` components support all the props of the [native A
 - `lqipSize`: The size of the LQIP image, which can be any number from `4` to `64`. (default is 4)
 
 > [!WARNING]
-> A major size in the lqipSize prop can significantly impact the performance of your application.
+> A major size in the `lqipSize` prop can significantly impact the performance of your application.
 
 Example:
 
 ```astro
 ---
-import { Image, Picture } from 'astro-lqip/components'
+import { Image, Picture } from 'astro-lqip/components';
 
-import image from './path/to/image.png'
-import otherImage from './path/to/other-image.png'
+import image from './path/to/image.png';
+import otherImage from './path/to/other-image.png';
 ---
 
 <Image src={image} alt="Cover Image" width={220} height={220} lqip="svg" lqipSize={10} />
@@ -97,7 +97,7 @@ import otherImage from './path/to/other-image.png'
 - [x] Add support for Image component.
 - [x] Add support for more lqip techniques.
 - [ ] Test for remote images.
-- [ ] Optimize current CSS usage.
+- [x] Optimize current CSS usage.
 - [x] Improve docs page.
 - [ ] Test support for SSR mode.
 

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "astro-lqip",
-  "version": "1.3.0",
-  "description": "Native extended Astro component for generating low quality image placeholders (LQIP).",
+  "version": "1.3.2",
+  "description": "Native extended Astro components for generating low quality image placeholders (LQIP).",
   "keywords": [
     "astro",
     "astro-component",
     "astro-integration",
     "image",
+    "picture",
     "lqip"
   ],
-  "homepage": "https://github.com/felixicaza/astro-lqip",
+  "homepage": "https://astro-lqip.web.app",
   "bugs": {
     "url": "https://github.com/felixicaza/astro-lqip/issues"
   },
@@ -37,14 +38,14 @@
   },
   "devDependencies": {
     "@eslint/js": "9.33.0",
-    "@typescript-eslint/parser": "8.39.1",
-    "astro": "5.12.9",
+    "@typescript-eslint/parser": "8.40.0",
+    "astro": "5.13.2",
     "bumpp": "10.2.3",
     "eslint": "9.33.0",
     "eslint-plugin-astro": "1.3.1",
     "eslint-plugin-jsonc": "2.20.1",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-package-json": "0.53.0",
+    "eslint-plugin-package-json": "0.54.0",
     "eslint-plugin-yml": "1.18.0",
     "globals": "16.3.0",
     "jiti": "2.5.1",

package/src/components/Image.astro

@@ -1,7 +1,7 @@
 ---
 import type { LocalImageProps, RemoteImageProps } from 'astro:assets'
-import type { Props as LqipProps } from '../types'
 import type { HTMLAttributes } from 'astro/types'
+import type { Props as LqipProps } from '../types'
 
 import { PREFIX } from '../constants'
 
@@ -12,6 +12,8 @@ import { getLqip } from '../utils/getLqip'
 
 import { Image as ImageComponent } from 'astro:assets'
 
+import '../styles/lqip.css'
+
 type Props = (LocalImageProps | RemoteImageProps) & LqipProps & {
   parentAttributes?: HTMLAttributes<'div'>
 }
@@ -53,39 +55,6 @@ const combinedParentAttributes = {
 }
 ---
 
-<style is:inline>
-  div[data-astro-lqip] {
-    --opacity: 1;
-    --z-index: 0;
-
-    position: relative;
-    display: inline-block;
-    width: fit-content;
-    height: fit-content;
-  }
-
-  div[data-astro-lqip]::after {
-    content: "";
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    pointer-events: none;
-    transition: opacity 1s;
-    opacity: var(--opacity);
-    z-index: var(--z-index);
-    background: var(--lqip-background);
-    background-size: cover;
-    background-position: 50% 50%;
-  }
-
-  div[data-astro-lqip] img {
-    z-index: 1;
-    position: relative;
-    overflow: hidden;
-  }
-</style>
-
 <div class={className} data-astro-lqip {...combinedParentAttributes}>
   <ImageComponent
     {...props}

package/src/components/Picture.astro

@@ -11,6 +11,8 @@ import { getLqip } from '../utils/getLqip'
 
 import { Picture as PictureComponent } from 'astro:assets'
 
+import '../styles/lqip.css'
+
 type Props = AstroPictureProps & LqipProps
 
 const { class: className, lqip = 'base64', lqipSize = 4, pictureAttributes = {}, ...props } = Astro.props as Props
@@ -50,37 +52,6 @@ const combinedPictureAttributes = {
 }
 ---
 
-<style is:inline>
-  picture[data-astro-lqip] {
-    --opacity: 1;
-    --z-index: 0;
-
-    position: relative;
-    display: inline-block;
-  }
-
-  picture[data-astro-lqip]::after {
-    content: "";
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    pointer-events: none;
-    transition: opacity 1s;
-    opacity: var(--opacity);
-    z-index: var(--z-index);
-    background: var(--lqip-background);
-    background-size: cover;
-    background-position: 50% 50%;
-  }
-
-  picture[data-astro-lqip] img {
-    z-index: 1;
-    position: relative;
-    overflow: hidden;
-  }
-</style>
-
 <PictureComponent
   {...props}
   class={className}

package/src/styles/lqip.css

@@ -0,0 +1,37 @@
+[data-astro-lqip] {
+  --opacity: 1;
+  --z-index: 0;
+
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+}
+
+[data-astro-lqip]::after {
+  content: "";
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  pointer-events: none;
+  transition: opacity 1s;
+  opacity: var(--opacity);
+  z-index: var(--z-index);
+  background: var(--lqip-background);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
+[data-astro-lqip] img {
+  z-index: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+@media (scripting: none) {
+  [data-astro-lqip] {
+    --opacity: 0;
+    --z-index: 1;
+  }
+}