Respect reachable local style placement

Author: cray0000

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

@@ -1080,6 +1080,126 @@ export default function Card({ ready, pad }) {
 }
 
 
+`;
+
+exports[`@cssxjs/babel-plugin-rn-stylename-inline Reachable local css interpolation after early return. Should error: Reachable local css interpolation after early return. Should error 1`] = `
+
+import React from 'react'
+import { css } from 'cssxjs'
+import { View } from 'react-native'
+import { useThemeColor } from './theme'
+
+export default function Card ({ ready }) {
+  if (!ready) return <View styleName='loader' />
+  const color = useThemeColor('primary')
+
+  css\`
+    .root {
+      color: \${color};
+    }
+  \`
+
+  return <View styleName='root' />
+}
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+SyntaxError: unknown file: [@cssxjs/babel-plugin-rn-stylename-inline] Local css/styl templates must be declared before the first return, unless they are trailing CSSX style blocks at the end of the component.
+Move this template before the first return, or place it after all returns as the final component statement.
+   8 |   const color = useThemeColor('primary')
+   9 |
+> 10 |   css\`
+     |   ^
+  11 |     .root {
+  12 |       color: \${color};
+  13 |     }
+
+`;
+
+exports[`@cssxjs/babel-plugin-rn-stylename-inline Reachable local css interpolation before return: Reachable local css interpolation before return 1`] = `
+
+import React from 'react'
+import { css } from 'cssxjs'
+import { View } from 'react-native'
+import { useThemeColor } from './theme'
+
+export default function Card ({ pad }) {
+  const color = useThemeColor('primary')
+
+  css\`
+    .root {
+      color: \${color};
+      padding: \${pad} 2u;
+    }
+  \`
+
+  return <View styleName='root' />
+}
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import React from "react";
+import { css } from "cssxjs";
+import { View } from "react-native";
+import { useThemeColor } from "./theme";
+const _localCssInstance = {
+  version: 1,
+  id: "cssx_fjh55d",
+  contentHash: "cssx_4m17p8",
+  rules: [
+    {
+      selector: ".root",
+      classes: ["root"],
+      part: null,
+      specificity: 1,
+      order: 0,
+      media: null,
+      declarations: [
+        {
+          property: "color",
+          value: "var(--__cssx_dynamic_0)",
+          raw: "color: var(--__cssx_dynamic_0)",
+          order: 0,
+          dynamicSlots: [0],
+          line: 3,
+          column: 7,
+        },
+        {
+          property: "padding",
+          value: "var(--__cssx_dynamic_1) 2u",
+          raw: "padding: var(--__cssx_dynamic_1) 2u",
+          order: 1,
+          dynamicSlots: [1],
+          line: 4,
+          column: 7,
+        },
+      ],
+    },
+  ],
+  keyframes: {},
+  metadata: {
+    hasVars: true,
+    vars: ["--__cssx_dynamic_0", "--__cssx_dynamic_1"],
+    hasMedia: false,
+    hasViewportUnits: false,
+    hasInterpolations: true,
+    hasDynamicRuntimeDependencies: true,
+    hasAnimations: false,
+    hasTransitions: false,
+  },
+  diagnostics: [],
+  __hash__: -1763352586,
+};
+export default function Card({ pad }) {
+  const color = useThemeColor("primary");
+  const __CSS_LOCAL__ = {
+    sheet: _localCssInstance,
+    values: [color, pad],
+  };
+  return <View styleName="root" />;
+}
+
+
 `;
 
 exports[`@cssxjs/babel-plugin-rn-stylename-inline Should remove css and styl from cssxjs import: Should remove css and styl from cssxjs import 1`] = `

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

@@ -243,6 +243,47 @@ pluginTester({
           \`
         }
       `
+    },
+    'Reachable local css interpolation before return': /* js */`
+      import React from 'react'
+      import { css } from 'cssxjs'
+      import { View } from 'react-native'
+      import { useThemeColor } from './theme'
+
+      export default function Card ({ pad }) {
+        const color = useThemeColor('primary')
+
+        css\`
+          .root {
+            color: \${color};
+            padding: \${pad} 2u;
+          }
+        \`
+
+        return <View styleName='root' />
+      }
+    `,
+    'Reachable local css interpolation after early return. Should error': {
+      error: /Local css\/styl templates must be declared before the first return/,
+      code: /* js */`
+        import React from 'react'
+        import { css } from 'cssxjs'
+        import { View } from 'react-native'
+        import { useThemeColor } from './theme'
+
+        export default function Card ({ ready }) {
+          if (!ready) return <View styleName='loader' />
+          const color = useThemeColor('primary')
+
+          css\`
+            .root {
+              color: \${color};
+            }
+          \`
+
+          return <View styleName='root' />
+        }
+      `
     }
   }
 })

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

@@ -72,7 +72,7 @@ const getVisitor = ({ $program, usedCompilers }) => ({
       insertLocalCss($function, $this, buildConst({
         variable: t.identifier(LOCAL_NAME),
         value: localValue
-      }), expressions)
+      }), expressions, usedCompilers)
 
     // IV. GLOBAL. if parent is program -- handle global
     } else {
@@ -105,7 +105,7 @@ function insertAfterImports ($program, expressionStatement) {
   }
 }
 
-function insertLocalCss ($function, $template, statement, expressions) {
+function insertLocalCss ($function, $template, statement, expressions, usedCompilers) {
   const $body = $function.get('body')
   if (!$body.isBlockStatement()) {
     $body.replaceWith(t.blockStatement([
@@ -115,23 +115,52 @@ function insertLocalCss ($function, $template, statement, expressions) {
 
   const $statement = $template.getStatementParent()
   const $functionBody = $function.get('body')
-  // CSSX tracking hooks must run before any render return. Insert the local
-  // layer before the first return, while keeping it after user setup code.
-  const $target = findFirstReturnStatement($functionBody) ||
-    (
-      $statement?.parentPath === $functionBody
-        ? $statement
-        : undefined
-    )
+  const $firstReturn = findFirstReturnStatement($functionBody)
+
+  if ($statement?.parentPath !== $functionBody) {
+    $functionBody.unshiftContainer('body', statement)
+    return
+  }
+
+  const $target = isTrailingStyleTemplateStatement($statement, usedCompilers)
+    ? ($firstReturn || $statement)
+    : $statement
+
+  validateLocalCssPosition($functionBody, $firstReturn, $target, $template)
 
   validateInterpolationBindings($function, $functionBody, $target, expressions, $template)
 
-  if ($target) {
-    $target.insertBefore(statement)
-    return
+  $target.insertBefore(statement)
+}
+
+function validateLocalCssPosition ($functionBody, $firstReturn, $target, $template) {
+  if (!$firstReturn || $target.node !== $template.getStatementParent()?.node) return
+
+  const statements = $functionBody.get('body')
+  const returnIndex = statements.findIndex($statement => $statement.node === $firstReturn.node)
+  const targetIndex = statements.findIndex($statement => $statement.node === $target.node)
+  if (returnIndex < 0 || targetIndex < 0 || targetIndex < returnIndex) return
+
+  throw $template.buildCodeFrameError([
+    '[@cssxjs/babel-plugin-rn-stylename-inline] Local css/styl templates must be declared before the first return, unless they are trailing CSSX style blocks at the end of the component.',
+    'Move this template before the first return, or place it after all returns as the final component statement.'
+  ].join('\n'))
+}
+
+function isTrailingStyleTemplateStatement ($statement, usedCompilers) {
+  let $current = $statement
+  while ($current?.node) {
+    if (!isStyleTemplateStatement($current, usedCompilers)) return false
+    $current = $current.getNextSibling()
   }
+  return true
+}
 
-  $functionBody.unshiftContainer('body', statement)
+function isStyleTemplateStatement ($statement, usedCompilers) {
+  if (!$statement.isExpressionStatement()) return false
+  const expression = $statement.get('expression')
+  if (!expression.isTaggedTemplateExpression()) return false
+  return shouldProcess(expression, usedCompilers)
 }
 
 function findFirstReturnStatement ($functionBody) {