From 05d40ee1a8eb480430be09ebf33bf07f7802f7f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Coletta?= <mail.leo.coletta@gmail.com>
Date: Mon, 6 Jul 2026 14:21:39 +0200
Subject: [PATCH] feat(WW-3544): Export image style CSS variables

- move image aspect ratio and visual vars to CSS config

- remove inline component style bridge
---
 src/wwElement.vue | 29 ++++-------------------------
 ww-config.js      | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/wwElement.vue b/src/wwElement.vue
index 9eec76a..9c03e8f 100644
--- a/src/wwElement.vue
+++ b/src/wwElement.vue
@@ -4,7 +4,6 @@
         v-bind="properties"
         class="ww-image-basic"
         ww-responsive="ww-image-basic"
-        :style="style"
         :class="{ '-link': hasLink && !isEditing }"
     >
         <div class="ww-image-basic-overlay"></div>
@@ -14,9 +13,6 @@
 
 <script>
 export default {
-    inject: {
-        componentStyle: { default: () => {} },
-    },
     props: {
         content: { type: Object, required: true },
         wwElementState: { type: Object, required: true },
@@ -47,23 +43,6 @@ export default {
             return this.isWeWeb ? `${wwLib.wwUtils.getCdnPrefix()}${this.url}` : this.url;
         },
 
-        /* STYLE */
-        aspectRatio() {
-            const elementAspectRatio = this.componentStyle.aspectRatio;
-            if (elementAspectRatio && elementAspectRatio !== 'unset') {
-                return `${elementAspectRatio}`;
-            } else {
-                return 'unset';
-            }
-        },
-        style() {
-            return {
-                '--wwi-ar': this.aspectRatio,
-                '--wwi-of': this.content.objectFit,
-                '--wwi-f': this.content.filter,
-                '--wwi-o': this.content.overlay,
-            };
-        },
         isEditing() {
             /* wwEditor:start */
             return this.wwEditorState.editMode === wwLib.wwEditorHelper.EDIT_MODES.EDITION;
@@ -97,7 +76,7 @@ export default {
         left: 0;
         right: 0;
         bottom: 0;
-        background: var(--wwi-o);
+        background: var(--wwi-o, transparent);
         pointer-events: none;
     }
 
@@ -106,9 +85,9 @@ export default {
         width: 100%;
         height: 100%;
         display: block;
-        aspect-ratio: var(--wwi-ar);
-        object-fit: var(--wwi-of);
-        filter: var(--wwi-f);
+        aspect-ratio: var(--wwi-ar, unset);
+        object-fit: var(--wwi-of, fill);
+        filter: var(--wwi-f, none);
         image-rendering: -webkit-optimize-contrast;
     }
 }
diff --git a/ww-config.js b/ww-config.js
index 2443196..b3094ce 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -1,5 +1,25 @@
 export default {
     type: 'wwObject',
+    css({ style, content }) {
+        return [
+            {
+                property: '--wwi-ar',
+                value: style.aspectRatio,
+            },
+            {
+                property: '--wwi-of',
+                value: content.objectFit,
+            },
+            {
+                property: '--wwi-f',
+                value: content.filter,
+            },
+            {
+                property: '--wwi-o',
+                value: content.overlay,
+            },
+        ];
+    },
     options: {
         sizable: true,
         ignoredStyleProperties: ['overflow'],