Fix missing extracted classes in mdx files

[RobinMalfait]

In Tailwind CSS v4.1.14 we released a fix for a bug where we didn't extract classes used in markdown directives (#18071). E.g.:

= This can't be extracted

:span[Some Text]{.text-gray-500}

= But this can

text-gray-300

The fix was simple, we pre-process classes once we we are inside {…}. The pre-processing just replaces . with so the text-gray-500 from above would be extracted properly.

This fix introduced a bug for mdx files if you use syntax like this:

<Example>
{
  <div class="p-2.5"></div>
}
</Example>

This is the exact kind of syntax we use in our documentation as well. Because of this fix, we didn't properly extract the p-2.5 class.

This new PR fixes that by ensuring that classes that are not top-level will stay as-is instead of being pre-processed.

This fix assumes that when you have <, {, [ or ( somewhere after the initial { character then we start nesting. The moment we see >, }, ] or ) we end the current nesting level.

If we are not nesting anymore, only then do we pre-process the class again.

This fix is also a simple implementation (on purpose), there could be even more edge cases that we might run into (order of bracket types, non-matching brackets, strings, escaped values, skipping code blocks, etc.) but I only want to tackle those when we actually run into these issues.

It looks like nobody ran into this (I didn't see a bug report about it). So I don't think it's worth the effort to make it even more robust (and potentially more complex which could result in more bugs).

Test plan

• Added a regression test for the mdx case
• Ensure the class is correctly extracted now:

Before:

After:

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

Walkthrough

The markdown preprocessor was updated to track nested bracketed punctuation inside directives using a bracket_stack (for (, [, {, < and their closers). Dot-to-space replacement now occurs only when that stack is empty, preventing replacements inside nested bracketed content. The code pushes on opening punctuation and pops on matching closers while in a directive. Two tests were added to verify that class names and bracketed tokens containing dots (e.g., px-2.5, ['example.js']) are preserved inside directive content.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title directly and concisely describes the main fix: handling missing extracted classes in MDX files containing dots.
Description check	✅ Passed	The pull request description provides comprehensive context about the bug, the regression, the fix approach, and includes test cases with before/after screenshots.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}