Procházet zdrojové kódy

fix(compiler-sfc): fix style injection when using normal script + setup

fix #3688
Evan You před 4 roky
rodič
revize
8b94464a3b

+ 23 - 0
packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap

@@ -109,3 +109,26 @@ return { color, size, ref }
 
 
 }"
 }"
 `;
 `;
+
+exports[`CSS vars injection w/ normal <script> binding analysis 1`] = `
+"
+      const __default__ = {
+        setup() {
+          return {
+            size: ref('100px')
+          }
+        }
+      }
+      
+import { useCssVars as _useCssVars } from 'vue'
+const __injectCSSVars__ = () => {
+_useCssVars(_ctx => ({
+  \\"xxxxxxxx-size\\": (_ctx.size)
+}))}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+
+export default __default__"
+`;

+ 24 - 0
packages/compiler-sfc/__tests__/cssVars.spec.ts

@@ -17,6 +17,30 @@ describe('CSS vars injection', () => {
     assertCode(content)
     assertCode(content)
   })
   })
 
 
+  test('w/ normal <script> binding analysis', () => {
+    const { content } = compileSFCScript(
+      `<script>
+      export default {
+        setup() {
+          return {
+            size: ref('100px')
+          }
+        }
+      }
+      </script>\n` +
+        `<style>
+          div {
+            font-size: v-bind(size);
+          }
+        </style>`
+    )
+    expect(content).toMatch(`_useCssVars(_ctx => ({
+  "${mockId}-size": (_ctx.size)
+})`)
+    expect(content).toMatch(`import { useCssVars as _useCssVars } from 'vue'`)
+    assertCode(content)
+  })
+
   test('w/ <script setup> binding analysis', () => {
   test('w/ <script setup> binding analysis', () => {
     const { content } = compileSFCScript(
     const { content } = compileSFCScript(
       `<script setup>
       `<script setup>

+ 1 - 1
packages/compiler-sfc/src/cssVars.ts

@@ -76,7 +76,7 @@ export function genCssVarsCode(
   const context = createTransformContext(createRoot([]), {
   const context = createTransformContext(createRoot([]), {
     prefixIdentifiers: true,
     prefixIdentifiers: true,
     inline: true,
     inline: true,
-    bindingMetadata: bindings
+    bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings
   })
   })
   const transformed = processExpression(exp, context)
   const transformed = processExpression(exp, context)
   const transformedString =
   const transformedString =