diff --git a/packages/define-stylex/src/core/index.ts b/packages/define-stylex/src/core/index.ts
index f2d1b98d5..ac7d5799a 100644
--- a/packages/define-stylex/src/core/index.ts
+++ b/packages/define-stylex/src/core/index.ts
@@ -15,7 +15,7 @@ import {
   type NodeTransform,
   type NodeTypes,
 } from '@vue/compiler-dom'
-import type { Node } from '@babel/types'
+import type { CallExpression, Node } from '@babel/types'
 
 const STYLEX_CREATE = '_stylex_create'
 const STYLEX_PROPS = '_stylex_props'
@@ -67,33 +67,36 @@ export function transformDefineStyleX(
   const { scriptSetup, getSetupAst, template } = sfc
   if (!scriptSetup || !template) return
 
-  let scriptOffset: number | undefined
   const setupOffset = scriptSetup.loc.start.offset
 
   const s = new MagicStringAST(code)
   const normalScript = addNormalScript(sfc, s)
-
-  function moveToScript(decl: Node, prefix: 'const ' | '' = '') {
-    if (scriptOffset === undefined) scriptOffset = normalScript.start()
-
-    const text = `\n${prefix}${s.sliceNode(decl, { offset: setupOffset })}`
-    s.appendRight(scriptOffset, text)
-
-    s.removeNode(decl, { offset: setupOffset })
-  }
+  const scriptOffset = normalScript.start()
 
   const setupAST = getSetupAst()!
 
   walkAST<Node>(setupAST, {
     enter(node) {
       if (node.type !== 'VariableDeclaration') return
+      const shouldChange = node.declarations.some((decl) =>
+        isCallOf(decl.init, DEFINE_STYLEX),
+      )
+      if (!shouldChange) return
+
       node.declarations.forEach((decl) => {
-        if (!isCallOf(decl.init, DEFINE_STYLEX)) return
-        s.overwriteNode(decl.init.callee, STYLEX_CREATE, {
-          offset: setupOffset,
-        })
+        const isDefineStyleX = isCallOf(decl.init, DEFINE_STYLEX)
+        if (isDefineStyleX) {
+          s.overwriteNode((decl.init as CallExpression).callee, STYLEX_CREATE, {
+            offset: setupOffset,
+          })
+        }
+        const text = `\n${node.kind} ${s.sliceNode(decl, { offset: setupOffset })}`
+        s.appendRight(
+          isDefineStyleX ? scriptOffset : node.start! + setupOffset - 1,
+          text,
+        )
       })
-      moveToScript(node)
+      s.removeNode(node, { offset: setupOffset })
     },
   })
 
@@ -104,7 +107,7 @@ export function transformDefineStyleX(
   })
   traverseNode(template.ast!, ctx)
 
-  s.appendRight(
+  s.appendLeft(
     setupOffset,
     `\nimport { create as ${STYLEX_CREATE}, props as ${STYLEX_PROPS} } from '@stylexjs/stylex'`,
   )
diff --git a/packages/define-stylex/tests/__snapshots__/fixtures.test.ts.snap b/packages/define-stylex/tests/__snapshots__/fixtures.test.ts.snap
index ef2d49378..46ce94f7e 100644
--- a/packages/define-stylex/tests/__snapshots__/fixtures.test.ts.snap
+++ b/packages/define-stylex/tests/__snapshots__/fixtures.test.ts.snap
@@ -33,6 +33,26 @@ import { create as _stylex_create, props as _stylex_props } from '@stylexjs/styl
 "
 `;
 
+exports[`fixtures > ./fixtures/multiple-statements.vue 1`] = `
+"<script lang="ts">
+const stylesA = _stylex_create({ redBold: { color: 'red', fontWeight: 'bold' } })
+const stylesB = _stylex_create({ redBold: { color: 'red', fontWeight: 'bold' } })
+</script>
+<script setup lang="ts">
+import { create as _stylex_create, props as _stylex_props } from '@stylexjs/stylex'
+const a = 'a'
+
+</script>
+
+<template>
+  <p>
+    <span v-bind="_stylex_props(stylesA.redBold)">Red</span>
+    <span v-bind="_stylex_props(stylesB.redBold)">{{ a }}</span>
+  </p>
+</template>
+"
+`;
+
 exports[`fixtures > ./fixtures/optional-rules.vue 1`] = `
 "<script lang="ts">
 const styles = _stylex_create({
@@ -51,3 +71,27 @@ defineProps<{ bold?: boolean }>()
 </template>
 "
 `;
+
+exports[`fixtures > ./fixtures/other-statements.vue 1`] = `
+"<script lang="ts">
+const styles = _stylex_create({ redBold: { color: 'red', fontWeight: 'bold' } })
+</script>
+<script setup lang="ts">
+import { create as _stylex_create, props as _stylex_props } from '@stylexjs/stylex'
+// separated declarations before
+const a = 'a'
+// multiple declarations
+const b = 'b'
+const c = 'c'
+
+// separated declarations after
+const d = 'd'
+</script>
+
+<template>
+  <p>
+    <span v-bind="_stylex_props(styles.redBold)">Red</span> {{ a }} {{ b }} {{ c }} {{ d }}
+  </p>
+</template>
+"
+`;
diff --git a/packages/define-stylex/tests/fixtures/multiple-statements.vue b/packages/define-stylex/tests/fixtures/multiple-statements.vue
new file mode 100644
index 000000000..f0a5c3c2e
--- /dev/null
+++ b/packages/define-stylex/tests/fixtures/multiple-statements.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const a = 'a'
+const stylesA = defineStyleX({ redBold: { color: 'red', fontWeight: 'bold' } }),
+  stylesB = defineStyleX({ redBold: { color: 'red', fontWeight: 'bold' } })
+</script>
+
+<template>
+  <p>
+    <span v-stylex="stylesA.redBold">Red</span>
+    <span v-stylex="stylesB.redBold">{{ a }}</span>
+  </p>
+</template>
diff --git a/packages/define-stylex/tests/fixtures/other-statements.vue b/packages/define-stylex/tests/fixtures/other-statements.vue
new file mode 100644
index 000000000..badfd3592
--- /dev/null
+++ b/packages/define-stylex/tests/fixtures/other-statements.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// separated declarations before
+const a = 'a'
+// multiple declarations
+const b = 'b',
+  styles = defineStyleX({ redBold: { color: 'red', fontWeight: 'bold' } }),
+  c = 'c'
+// separated declarations after
+const d = 'd'
+</script>
+
+<template>
+  <p>
+    <span v-stylex="styles.redBold">Red</span> {{ a }} {{ b }} {{ c }} {{ d }}
+  </p>
+</template>