fix(runtime): support CSS v-bind() on Lynx native

.changeset/v-bind-css-vars.md

@@ -0,0 +1,7 @@
+---
+"vue-lynx": minor
+---
+
+feat: support `v-bind()` in `<style>` blocks via Lynx-native `useCssVars`
+
+Implements a Background Thread compatible `useCssVars` that merges CSS custom properties into the component root element's inline style via the ops pipeline; the Lynx engine propagates them to descendants (lynx-family/lynx#5912, closing #5889). Requires `enableCSSInlineVariables: true` in `lynx.config` and Lynx engine ≥ 3.9.0 (the first tagged release containing the #5912 propagation code). `enableCSSInheritance` is not required for `v-bind()` in CSS.

examples/css-features/lynx.config.ts

@@ -25,7 +25,10 @@ export default defineConfig({
       enableIFR: true,
       optionsApi: false,
       enableCSSInlineVariables: true,
-      enableCSSInheritance: true,
+      // Deliberately false: the example must prove that CSS custom property
+      // propagation (lynx-family/lynx#5912, engine >= 3.9.0) works without
+      // inheritance mode masking it.
+      enableCSSInheritance: false,
     }),
   ],
 });

examples/css-features/src/App.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import VBindCSS from './VBindCSS.vue'
+import VBindThreads from './VBindThreads.vue'
+import CSSInheritanceTest from './CSSInheritanceTest.vue'
 import PlainStyle from './PlainStyle.vue'
 import ScopedStyle from './ScopedStyle.vue'
 import CSSModules from './CSSModules.vue'
-import VBindCSS from './VBindCSS.vue'
-import VBindThreads from './VBindThreads.vue'
 import CSSVarsWorkaround from './CSSVarsWorkaround.vue'
 import ImportedCSS from './ImportedCSS.vue'
 </script>
@@ -17,25 +18,27 @@ import ImportedCSS from './ImportedCSS.vue'
       CSS Features Test
     </text>
 
-    <!-- 1. Plain <style> — WORKS -->
-    <PlainStyle />
-
-    <!-- 2a. <style scoped> — WORKS (via Lynx cssId) -->
-    <ScopedStyle />
-
-    <!-- 3. <style module> — SHOULD WORK -->
-    <CSSModules />
-
-    <!-- 4. v-bind() in CSS — WORKS (useCssVars implemented in vue-lynx) -->
+    <!-- v-bind() in CSS — primary focus -->
     <VBindCSS />
-
-    <!-- 4b. v-bind() thread comparison — BG (useCssVars) vs MT (setStyleProperty) -->
     <VBindThreads />
 
-    <!-- 5. Workaround: Reactive inline :style -->
-    <CSSVarsWorkaround />
+    <!-- Engine custom-property propagation test — no useCssVars, enableCSSInheritance off -->
+    <CSSInheritanceTest />
 
-    <!-- 6. Imported .css file — WORKS -->
-    <ImportedCSS />
+    <!-- Divider -->
+    <text :style="{ fontSize: '13px', fontWeight: 'bold', color: '#888', marginBottom: '12px', marginTop: '4px' }">
+      Other CSS patterns
+    </text>
+
+    <!-- Workarounds and supporting patterns — 2 per row -->
+    <CSSVarsWorkaround />
+    <view :style="{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', marginBottom: '12px' }">
+      <view :style="{ flex: 1, paddingRight: '6px' }"><ScopedStyle /></view>
+      <view :style="{ flex: 1, paddingLeft: '6px' }"><CSSModules /></view>
+    </view>
+    <view :style="{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', marginBottom: '12px' }">
+      <view :style="{ flex: 1, paddingRight: '6px' }"><PlainStyle /></view>
+      <view :style="{ flex: 1, paddingLeft: '6px' }"><ImportedCSS /></view>
+    </view>
   </scroll-view>
 </template>

examples/css-features/src/CSSInheritanceTest.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const COLORS = ['#c62828', '#1565c0', '#2e7d32']
+const colorIdx = ref(0)
+const color = ref(COLORS[0]!)
+
+function cycleColor() {
+  colorIdx.value = (colorIdx.value + 1) % COLORS.length
+  color.value = COLORS[colorIdx.value]!
+}
+</script>
+
+<template>
+  <view :style="{
+    backgroundColor: '#fafafa',
+    padding: '12px',
+    borderRadius: '8px',
+    marginBottom: '12px',
+  }">
+    <text :style="{ fontSize: '15px', fontWeight: 'bold', marginBottom: '2px', color: '#333' }">
+      CSS custom property propagation (CSSInheritanceTest.vue)
+    </text>
+    <text :style="{ fontSize: '11px', color: '#888', marginBottom: '10px' }">
+      Parent sets --test-color via :style. Children consume it via var() in class rules.
+      No useCssVars, and enableCSSInheritance is false — tests that engine-level custom
+      property propagation (lynx#5912, engine >= 3.9.0) works on its own.
+    </text>
+
+    <!-- Parent sets the CSS var via :style only — no v-bind(), no useCssVars -->
+    <view :style="{ '--test-color': color, padding: '10px', borderRadius: '6px', backgroundColor: '#fff' }">
+      <text :style="{ fontSize: '11px', color: '#555', marginBottom: '6px' }">
+        Parent: :style="{ '--test-color': color }"
+      </text>
+
+      <!-- Depth 1 child -->
+      <view :style="{ marginBottom: '4px' }">
+        <text class="inherited-color" :style="{ fontWeight: 'bold' }">
+          Depth 1 — color: var(--test-color)
+        </text>
+      </view>
+
+      <!-- Depth 2 child -->
+      <view>
+        <view>
+          <text class="inherited-color" :style="{ fontWeight: 'bold' }">
+            Depth 2 — color: var(--test-color)
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <text
+      :style="{
+        marginTop: '10px',
+        backgroundColor: '#1565c0',
+        color: '#fff',
+        padding: '6px 10px',
+        borderRadius: '4px',
+        fontSize: '11px',
+      }"
+      :bindtap="cycleColor"
+    >
+      Cycle color (currently: {{ color }})
+    </text>
+  </view>
+</template>
+
+<style>
+.inherited-color {
+  color: var(--test-color);
+}
+</style>

examples/css-features/src/CSSModules.vue

@@ -17,7 +17,7 @@
 
 <template>
   <view :class="$style.card">
-    <text :class="$style.title">&lt;style module&gt;</text>
+    <text :class="$style.title">&lt;style module&gt; (CSSModules.vue)</text>
     <text :class="$style.desc">
       Uses hashed class names (e.g. .card_abc123).
       These are plain class selectors — Lynx supports them.

examples/css-features/src/CSSVarsWorkaround.vue

@@ -30,7 +30,7 @@ function toggle() {
 <template>
   <view :style="cardStyle">
     <text :style="{ fontSize: '15px', fontWeight: 'bold', color: '#333', marginBottom: '4px' }">
-      Workaround: Reactive inline :style
+      Workaround: Reactive inline :style (CSSVarsWorkaround.vue)
     </text>
     <text :style="{ fontSize: '12px', color: '#555', marginBottom: '8px' }">
       Use computed() + :style bindings instead of v-bind() in CSS.

examples/css-features/src/ImportedCSS.vue

@@ -8,7 +8,7 @@ import './imported.css'
 
 <template>
   <view class="imported-card">
-    <text class="imported-title">Imported .css file</text>
+    <text class="imported-title">Imported .css file (ImportedCSS.vue)</text>
     <text class="imported-desc">
       External CSS files with class selectors work via the
       @lynx-js/css-extract-webpack-plugin pipeline.

examples/css-features/src/PlainStyle.vue

@@ -6,7 +6,7 @@
 
 <template>
   <view class="plain-card">
-    <text class="plain-title">Plain &lt;style&gt; (no scoped)</text>
+    <text class="plain-title">Plain &lt;style&gt; (PlainStyle.vue)</text>
     <text class="plain-desc">Class selectors work via CSS extraction pipeline.</text>
   </view>
 </template>

examples/css-features/src/ScopedStyle.vue

@@ -9,7 +9,7 @@
 
 <template>
   <view class="scoped-card">
-    <text class="scoped-title">&lt;style scoped&gt;</text>
+    <text class="scoped-title">&lt;style scoped&gt; (ScopedStyle.vue)</text>
     <text class="scoped-desc">
       Bridged to Lynx's native cssId scoping system.
       Styles are scoped to this component only.