From d7071bbdeb45518c053bdae8eb7de52fc598adc6 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 31 Oct 2023 14:01:04 +0800
Subject: [PATCH] fix: do not skip style post loader for v-bind() in CSS

These styles may or may not be scoped.

Fixes #2061
---
 src/stylePostLoader.ts         |  9 ++-------
 test/fixtures/style-v-bind.vue | 25 +++++++++++++++++++++++++
 test/style.spec.ts             | 20 +++++++++++++++++++-
 3 files changed, 46 insertions(+), 8 deletions(-)
 create mode 100644 test/fixtures/style-v-bind.vue

diff --git a/src/stylePostLoader.ts b/src/stylePostLoader.ts
index 59c664d5..20a8645a 100644
--- a/src/stylePostLoader.ts
+++ b/src/stylePostLoader.ts
@@ -10,13 +10,8 @@ const { compileStyle } = compiler
 const StylePostLoader: LoaderDefinitionFunction = function (source, inMap) {
   const query = qs.parse(this.resourceQuery.slice(1))
 
-  // skip normal CSS files without scoped flag
-  if (
-    !('vue' in query) ||
-    query.type !== 'style' ||
-    !query.id ||
-    !query.scoped
-  ) {
+  // skip normal CSS files
+  if (!('vue' in query) || query.type !== 'style' || !query.id) {
     this.callback(null, source, inMap)
     return
   }
diff --git a/test/fixtures/style-v-bind.vue b/test/fixtures/style-v-bind.vue
new file mode 100644
index 00000000..143bdb32
--- /dev/null
+++ b/test/fixtures/style-v-bind.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="text">hello</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      color: 'red',
+      font: {
+        size: '2em',
+      },
+    }
+  },
+}
+</script>
+
+<style>
+.text {
+  color: v-bind(color);
+
+  /* expressions (wrap in quotes) */
+  font-size: v-bind('font.size');
+}
+</style>
diff --git a/test/style.spec.ts b/test/style.spec.ts
index 4bb998db..72fb3cbd 100644
--- a/test/style.spec.ts
+++ b/test/style.spec.ts
@@ -198,4 +198,22 @@ test('CSS Modules Extend', async () => {
   expect(style).toContain(`.${instance.$style.red} {\n  color: #FF0000;\n}`)
 })
 
-test.todo('experimental <style vars>')
+test('v-bind() in CSS', async () => {
+  const { window, instance } = await mockBundleAndRun({
+    entry: 'style-v-bind.vue',
+  })
+
+  const shortId = genId('style-v-bind.vue')
+  const style = normalizeNewline(
+    window.document.querySelector('style')!.textContent!
+  )
+
+  expect(style).toMatch(`color: var(--${shortId}-color);`)
+  expect(style).toMatch(`font-size: var(--${shortId}-font\\.size);`)
+
+  const computedStyle = window.getComputedStyle(instance.$el)
+  // Because the tests run in JSDOM, we can't directly get the computed `color` value.
+  // To get around this, we test the corresponding CSS variable instead.
+  expect(computedStyle.getPropertyValue(`--${shortId}-color`)).toBe('red')
+  expect(computedStyle.getPropertyValue(`--${shortId}-font.size`)).toBe('2em')
+})