fix(compiler-sfc): fix style injection when using normal script + setup
fix #3688
This commit is contained in:
		
							parent
							
								
									2c7bd42801
								
							
						
					
					
						commit
						8b94464a3b
					
				@ -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__"
 | 
				
			||||||
 | 
					`;
 | 
				
			||||||
 | 
				
			|||||||
@ -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>
 | 
				
			||||||
 | 
				
			|||||||
@ -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 =
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user