fix: do not skip style post loader for v-bind() in CSS

haoqunjiang · haoqunjiang · commit d7071bbdeb45 · 2023-10-31T14:01:04.000+08:00
These styles may or may not be scoped. Fixes #2061
diff --git 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
@@ -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
@@ -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')
+})
