Preserve interpolation setup order

Author: cray0000

packages/babel-plugin-rn-stylename-inline/__tests__/__snapshots__/index.spec.js.snap

@@ -942,8 +942,10 @@ exports[`@cssxjs/babel-plugin-rn-stylename-inline Local css interpolation: Local
 import React from 'react'
 import { css } from 'cssxjs'
 import { View } from 'react-native'
+import { useThemeColor } from './theme'
 
-export default function Card ({ color, pad }) {
+export default function Card ({ pad }) {
+  const color = useThemeColor('primary')
   return <View styleName='root' />
 
   css\`
@@ -959,6 +961,7 @@ export default function Card ({ color, pad }) {
 import React from "react";
 import { css } from "cssxjs";
 import { View } from "react-native";
+import { useThemeColor } from "./theme";
 const _localCssInstance = {
   version: 1,
   id: "cssx_fjh55d",
@@ -1007,7 +1010,8 @@ const _localCssInstance = {
   diagnostics: [],
   __hash__: -1763352586,
 };
-export default function Card({ color, pad }) {
+export default function Card({ pad }) {
+  const color = useThemeColor("primary");
   const __CSS_LOCAL__ = {
     sheet: _localCssInstance,
     values: [color, pad],

packages/babel-plugin-rn-stylename-inline/__tests__/index.spec.js

@@ -202,8 +202,10 @@ pluginTester({
       import React from 'react'
       import { css } from 'cssxjs'
       import { View } from 'react-native'
+      import { useThemeColor } from './theme'
 
-      export default function Card ({ color, pad }) {
+      export default function Card ({ pad }) {
+        const color = useThemeColor('primary')
         return <View styleName='root' />
 
         css\`

packages/babel-plugin-rn-stylename-inline/index.js

@@ -69,7 +69,7 @@ const getVisitor = ({ $program, usedCompilers }) => ({
 
       // 2. reassign this unique identifier or local dynamic layer to a constant LOCAL_NAME
       //    in the scope of current function
-      $function.get('body').unshiftContainer('body', buildConst({
+      insertLocalCss($function, $this, buildConst({
         variable: t.identifier(LOCAL_NAME),
         value: localValue
       }))
@@ -105,6 +105,36 @@ function insertAfterImports ($program, expressionStatement) {
   }
 }
 
+function insertLocalCss ($function, $template, statement) {
+  const $body = $function.get('body')
+  if (!$body.isBlockStatement()) {
+    $body.replaceWith(t.blockStatement([
+      t.returnStatement($body.node)
+    ]))
+  }
+
+  const $statement = $template.getStatementParent()
+  const $functionBody = $function.get('body')
+
+  if ($statement?.parentPath === $functionBody) {
+    // Local style templates usually live after the JSX return. Execute the
+    // generated layer before that return, but after user setup code/hooks.
+    const $target = findPreviousReturn($statement) || $statement
+    $target.insertBefore(statement)
+    return
+  }
+
+  $functionBody.unshiftContainer('body', statement)
+}
+
+function findPreviousReturn ($statement) {
+  let $current = $statement.getPrevSibling()
+  while ($current?.node) {
+    if ($current.isReturnStatement()) return $current
+    $current = $current.getPrevSibling()
+  }
+}
+
 function shouldProcess ($template, usedCompilers) {
   if (!$template.get('tag').isIdentifier()) return
   if (!usedCompilers.has($template.node.tag.name)) return

packages/babel-plugin-rn-stylename-to-style/__tests__/__snapshots__/index.spec.js.snap

@@ -664,6 +664,47 @@ export const Test = (_props) => {
 };
 
 
+`;
+
+exports[`@startupjs/babel-plugin-rn-stylename-to-style Local css interpolation after hook: Local css interpolation after hook 1`] = `
+
+import { useThemeColor } from './theme'
+import { View } from 'react-native'
+
+function Card ({ pad }) {
+  const color = useThemeColor('primary')
+  const __CSS_LOCAL__ = {
+    sheet: _localCssInstance,
+    values: [color, pad]
+  }
+  return <View styleName='root' />
+}
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { useThemeColor } from "./theme";
+import { View } from "react-native";
+import {
+  runtime as _runtime,
+  useCssxLayer as _useCssxLayer,
+} from "cssxjs/runtime";
+const _cssx = _runtime;
+function Card({ pad }) {
+  const color = useThemeColor("primary");
+  const __CSS_LOCAL__ = {
+    sheet: _localCssInstance,
+    values: [color, pad],
+  };
+  const _local = _useCssxLayer(
+    typeof __CSS_LOCAL__ !== "undefined" && __CSS_LOCAL__
+  );
+  const _global = _useCssxLayer(
+    typeof __CSS_GLOBAL__ !== "undefined" && __CSS_GLOBAL__
+  );
+  return <View {..._cssx("root", {}, _global, _local, {})} />;
+}
+
+
 `;
 
 exports[`@startupjs/babel-plugin-rn-stylename-to-style No styles file: No styles file 1`] = `

packages/babel-plugin-rn-stylename-to-style/__tests__/index.spec.js

@@ -119,6 +119,19 @@ pluginTester({
         )
       }
     `,
+    'Local css interpolation after hook': /* js */`
+      import { useThemeColor } from './theme'
+      import { View } from 'react-native'
+
+      function Card ({ pad }) {
+        const color = useThemeColor('primary')
+        const __CSS_LOCAL__ = {
+          sheet: _localCssInstance,
+          values: [color, pad]
+        }
+        return <View styleName='root' />
+      }
+    `,
     'Puts compiled attribute to the end of attributes list': /* js */`
       import './index.styl'
       function Test ({ style, active, submit, disabled }) {