fix: 🐛 unexpected directive match occur on inline directive

__tests__/formatter.test.ts

@@ -2885,6 +2885,28 @@ describe('formatter', () => {
       ``,
     ].join('\n');
 
+    await util.doubleFormatCheck(content, expected);
+  });
+  test('directive inside component attribute', async () => {
+    const content = [
+      `@section('body')`,
+      `    <x-alert :live="@env('production')" />`,
+      `@endsection`,
+      `<x-button ::class="{ danger: [1, 2, 3] }">`,
+      `    Submit`,
+      `</x-button>`,
+    ].join('\n');
+
+    const expected = [
+      `@section('body')`,
+      `    <x-alert :live="@env('production')" />`,
+      `@endsection`,
+      `<x-button ::class="{ danger: [1, 2, 3] }">`,
+      `    Submit`,
+      `</x-button>`,
+      ``,
+    ].join('\n');
+
     await util.doubleFormatCheck(content, expected);
   });
 });

src/formatter.ts

@@ -24,6 +24,8 @@ import {
   inlineFunctionTokens,
   optionalStartWithoutEndTokens,
   conditionalTokens,
+  directivePrefix,
+  indentStartTokensWithoutPrefix,
 } from './indent';
 import { nestedParenthesisRegex } from './regex';
 
@@ -254,10 +256,10 @@ export default class Formatter {
   preserveInlineDirective(content: string): string {
     // preserve inline directives inside html tag
     const regex = new RegExp(
-      `(<[\\w]+?[^>]*?)(${indentStartTokens.join(
+      `(<[\\w]+?[^>]*?)${directivePrefix}(${indentStartTokensWithoutPrefix.join(
         '|',
         // eslint-disable-next-line max-len
-      )})(\\s*?)(${nestedParenthesisRegex})(.*?)(${indentEndTokens.join('|')})(.*?>)`,
+      )})(\\s*?)(${nestedParenthesisRegex})(.*?)(@end\\2)(.*?>)`,
       'gims',
     );
     const replaced = _.replace(
@@ -274,7 +276,9 @@ export default class Formatter {
         p7: string,
         p8: string,
       ) => {
-        return `${p1}${this.storeInlineDirective(`${p2.trim()}${p3}${p4.trim()} ${p6.trim()} ${p7.trim()}`)}${p8}`;
+        return `${p1}${this.storeInlineDirective(
+          `${directivePrefix}${p2.trim()}${p3}${p4.trim()} ${p6.trim()} ${p7.trim()}`,
+        )}${p8}`;
       },
     );
 

src/indent.ts

@@ -1,5 +1,7 @@
 import _ from 'lodash';
 
+export const directivePrefix = '@';
+
 export const indentStartTokens = [
   '@alert',
   '@push',
@@ -38,6 +40,8 @@ export const indentStartTokens = [
   '@section',
 ];
 
+export const indentStartTokensWithoutPrefix = _.map(indentStartTokens, (token) => token.substring(1));
+
 export const indentEndTokens = [
   '@endalert',
   '@endpush',