diff --git a/apps/oxfmt/src-js/libs/prettier.ts b/apps/oxfmt/src-js/libs/prettier.ts index 18904fcaaf24b..023c964098c41 100644 --- a/apps/oxfmt/src-js/libs/prettier.ts +++ b/apps/oxfmt/src-js/libs/prettier.ts @@ -33,7 +33,7 @@ export async function resolvePlugins(): Promise { export type FormatEmbeddedCodeParam = { code: string; parserName: string; - options: Options; + options: Options & { _tailwindPluginEnabled?: boolean }; }; /** @@ -53,6 +53,10 @@ export async function formatEmbeddedCode({ // SAFETY: `options` is created in Rust side, so it's safe to mutate here options.parser = parserName; + // Enable Tailwind CSS plugin for embedded code (e.g., html`...` in JS) + // when `options._tailwindPluginEnabled` is set + await setupTailwindPlugin(options); + // NOTE: This will throw if: // - Specified parser is not available // - Or, code has syntax errors diff --git a/apps/oxfmt/test/tailwindcss/tailwindcss.test.ts b/apps/oxfmt/test/tailwindcss/tailwindcss.test.ts index c0853448ac65c..426530d49c7b5 100644 --- a/apps/oxfmt/test/tailwindcss/tailwindcss.test.ts +++ b/apps/oxfmt/test/tailwindcss/tailwindcss.test.ts @@ -1118,3 +1118,18 @@ describe("Tailwind CSS Sorting works with other options", () => { `); }); }); + +describe("Tailwind CSS Sorting in Embedded HTML (Tagged Template Literals)", () => { + test("should sort Tailwind classes in html tagged template literal", async () => { + const input = `const view = html\`
Hello
\`;`; + + const result = await format("test.ts", input, { + experimentalTailwindcss: {}, + }); + + // After sorting, flex should come before p-4 (display before spacing) + expect(result.code).toContain('class="flex'); + expect(result.code).not.toContain('class="p-4 flex'); + expect(result.errors).toStrictEqual([]); + }); +});