Merge pull request #125 from ony3000/fix-astro

Fix line wrapping inside callback function

Author: ony3000

src/core-parts/finder.ts

@@ -2461,6 +2461,7 @@ export function findTargetClassNameNodesForAstro(
         recursiveProps = ['attributes', 'children'];
         break;
       }
+      case 'expression':
       case 'fragment':
       case 'root': {
         recursiveProps = ['children'];

tests/astro/issue-123/__snapshots__/absolute.test.ts.snap

@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`'(1) JSX inside the callback function …' > expectation 1`] = `
+"---
+// example.astro
+const navigation = [
+  { name: "Home", href: "/" },
+  { name: "About", href: "/about" },
+];
+---
+
+<!-- ---------------------------------------------------------------------------| printWidth=80 (in snapshot) -->
+<nav class="flex space-x-2">
+  {
+    navigation.map((item) => (
+      <a
+        href={item.href}
+        class="hover:[#363636]/80 bg-[#363636] px-3 py-1 font-bold text-zinc-300
+          transition-[border-radius,colors,background-colors] duration-300
+          hover:rounded-2xl hover:text-zinc-200 sm:px-4 sm:py-1.5 sm:text-lg"
+      >
+        {item.name}
+      </a>
+    ))
+  }
+</nav>
+"
+`;

tests/astro/issue-123/__snapshots__/relative.test.ts.snap

@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`'(1) JSX inside the callback function …' > expectation 1`] = `
+"---
+// example.astro
+const navigation = [
+  { name: "Home", href: "/" },
+  { name: "About", href: "/about" },
+];
+---
+
+<!-- ---------------------------------------------------------------------------| printWidth=80 (in snapshot) -->
+<nav class="flex space-x-2">
+  {
+    navigation.map((item) => (
+      <a
+        href={item.href}
+        class="hover:[#363636]/80 bg-[#363636] px-3 py-1 font-bold text-zinc-300
+          transition-[border-radius,colors,background-colors] duration-300
+          hover:rounded-2xl hover:text-zinc-200 sm:px-4 sm:py-1.5 sm:text-lg"
+      >
+        {item.name}
+      </a>
+    ))
+  }
+</nav>
+"
+`;

tests/astro/issue-123/absolute.test.ts

@@ -0,0 +1,12 @@
+import { thisPlugin, testSnapshotEach } from '../../adaptor';
+import { baseOptions } from '../../settings';
+import { fixtures } from './fixtures';
+
+const options = {
+  ...baseOptions,
+  plugins: ['prettier-plugin-astro', thisPlugin],
+  parser: 'astro',
+  endingPosition: 'absolute',
+};
+
+testSnapshotEach(fixtures, options);

tests/astro/issue-123/fixtures.ts

@@ -0,0 +1,30 @@
+import type { Fixture } from '../../settings';
+
+export const fixtures: Omit<Fixture, 'output'>[] = [
+  {
+    name: '(1) JSX inside the callback function must also be wrapped.',
+    input: `
+---
+// example.astro
+const navigation = [
+  { name: "Home", href: "/" },
+  { name: "About", href: "/about" },
+];
+---
+
+<!-- ---------------------------------------------------------------------------| printWidth=80 (in snapshot) -->
+<nav class="flex space-x-2">
+  {
+    navigation.map((item) => (
+      <a
+        href={item.href}
+        class="hover:[#363636]/80 bg-[#363636] px-3 py-1 font-bold text-zinc-300 transition-[border-radius,colors,background-colors] duration-300 hover:rounded-2xl hover:text-zinc-200 sm:px-4 sm:py-1.5 sm:text-lg"
+      >
+        {item.name}
+      </a>
+    ))
+  }
+</nav>
+`,
+  },
+];

tests/astro/issue-123/relative.test.ts

@@ -0,0 +1,12 @@
+import { thisPlugin, testSnapshotEach } from '../../adaptor';
+import { baseOptions } from '../../settings';
+import { fixtures } from './fixtures';
+
+const options = {
+  ...baseOptions,
+  plugins: ['prettier-plugin-astro', thisPlugin],
+  parser: 'astro',
+  endingPosition: 'relative',
+};
+
+testSnapshotEach(fixtures, options);