astro-lqip 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/package.json +8 -8
- package/src/components/Picture.astro +25 -2
package/README.md
CHANGED
|
@@ -35,7 +35,7 @@ In your current Astro project, just replace the import of the native Astro `<Pic
|
|
|
35
35
|
|
|
36
36
|
```diff
|
|
37
37
|
- import { Picture } from 'astro:assets';
|
|
38
|
-
+import { Picture } from 'astro-lqip/components';
|
|
38
|
+
+ import { Picture } from 'astro-lqip/components';
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
Example:
|
|
@@ -81,6 +81,7 @@ import image from './path/to/image.png'
|
|
|
81
81
|
- [ ] Test for remote images.
|
|
82
82
|
- [ ] Optimize current CSS usage.
|
|
83
83
|
- [x] Improve docs page.
|
|
84
|
+
- [ ] Test support for SSR mode.
|
|
84
85
|
|
|
85
86
|
## 💡 Knowledge
|
|
86
87
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "astro-lqip",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "Native extended Astro component for generating low quality image placeholders (LQIP).",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"astro",
|
|
@@ -36,20 +36,20 @@
|
|
|
36
36
|
"plaiceholder": "3.0.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@eslint/js": "9.30.
|
|
40
|
-
"@typescript-eslint/parser": "8.
|
|
41
|
-
"astro": "5.
|
|
39
|
+
"@eslint/js": "9.30.1",
|
|
40
|
+
"@typescript-eslint/parser": "8.36.0",
|
|
41
|
+
"astro": "5.11.0",
|
|
42
42
|
"bumpp": "10.2.0",
|
|
43
|
-
"eslint": "9.30.
|
|
43
|
+
"eslint": "9.30.1",
|
|
44
44
|
"eslint-plugin-astro": "1.3.1",
|
|
45
45
|
"eslint-plugin-jsonc": "2.20.1",
|
|
46
46
|
"eslint-plugin-jsx-a11y": "6.10.2",
|
|
47
|
-
"eslint-plugin-package-json": "0.
|
|
47
|
+
"eslint-plugin-package-json": "0.44.1",
|
|
48
48
|
"eslint-plugin-yml": "1.18.0",
|
|
49
|
-
"globals": "16.
|
|
49
|
+
"globals": "16.3.0",
|
|
50
50
|
"jiti": "2.4.2",
|
|
51
51
|
"nano-staged": "0.8.0",
|
|
52
|
-
"neostandard": "0.12.
|
|
52
|
+
"neostandard": "0.12.2",
|
|
53
53
|
"simple-git-hooks": "2.13.0"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
import type { Props } from '../types'
|
|
3
3
|
|
|
4
|
+
import { PREFIX } from '../constants'
|
|
5
|
+
|
|
4
6
|
import { resolveImageMetadata } from '../utils/resolveImageMetadata'
|
|
5
7
|
import { renderSVGNode } from '../utils/renderSVGNode'
|
|
6
8
|
import { getLqipStyle } from '../utils/getLqipStyle'
|
|
@@ -8,7 +10,7 @@ import { getLqip } from '../utils/getLqip'
|
|
|
8
10
|
|
|
9
11
|
import { Picture as PictureComponent } from 'astro:assets'
|
|
10
12
|
|
|
11
|
-
const { class: className, lqip = 'base64', lqipSize = 4, ...props } = Astro.props as Props
|
|
13
|
+
const { class: className, lqip = 'base64', lqipSize = 4, pictureAttributes = {}, ...props } = Astro.props as Props
|
|
12
14
|
|
|
13
15
|
const isDevelopment = import.meta.env.MODE === 'development'
|
|
14
16
|
|
|
@@ -22,6 +24,27 @@ if (lqip === 'svg' && Array.isArray(lqipImage)) {
|
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
const lqipStyle = getLqipStyle(lqip, lqipImage, svgHTML)
|
|
27
|
+
|
|
28
|
+
const forbiddenVars = ['--lqip-background', '--z-index', '--opacity']
|
|
29
|
+
const styleProps = pictureAttributes.style ?? {}
|
|
30
|
+
|
|
31
|
+
for (const key of Object.keys(styleProps)) {
|
|
32
|
+
if (forbiddenVars.includes(key)) {
|
|
33
|
+
console.warn(
|
|
34
|
+
`${PREFIX} The CSS variable “${key}” should not be passed in \`pictureAttributes.style\` because it can override the functionality of LQIP.`
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const combinedStyle = {
|
|
40
|
+
...styleProps,
|
|
41
|
+
...lqipStyle
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const combinedPictureAttributes = {
|
|
45
|
+
...pictureAttributes,
|
|
46
|
+
style: combinedStyle
|
|
47
|
+
}
|
|
25
48
|
---
|
|
26
49
|
|
|
27
50
|
<style is:inline>
|
|
@@ -58,6 +81,6 @@ const lqipStyle = getLqipStyle(lqip, lqipImage, svgHTML)
|
|
|
58
81
|
<PictureComponent
|
|
59
82
|
{...props}
|
|
60
83
|
class={className}
|
|
61
|
-
pictureAttributes={{
|
|
84
|
+
pictureAttributes={{ ...combinedPictureAttributes }}
|
|
62
85
|
onload="parentElement.style.setProperty('--z-index', 1), parentElement.style.setProperty('--opacity', 0)"
|
|
63
86
|
/>
|