Add source map visualization for tests

[RobinMalfait]

This PR is an internal change only related to how we visualize source maps.

As part of this PR (#19996) I added a test for source maps related to how @variant is processed. And while the result was correct, I had a hard time verifying if this was actually correct. I did the mental mapping of comparing locations from the output to the input.

With this PR, I want to make that more visual by actually printing the input source(s) and output file and highlight the necessary parts:

I didn't want to get too clever here. But printing line numbers also helps in case we point to different spots on the same line:

And if we point to different files, then we visualize these as well:

If you combine this with snapshot tests, then it's very easy to verify that locations match up correctly. Each source map location is highlighted and references a symbol starting at A, B, etc.

A change to the source maps can result in a big diff, and even this PR introduces a big diff because of the preflight diffs. But at least you can see how things line up.

Test plan

1. All tests still pass
2. Added tests for the source map visualizer that is only used in tests
3. No actual source code was touched

[coderabbitai]

Walkthrough

This pull request adds a new source-map visualization module (visualize-source-map.ts) with exported APIs visualizeSourceMap() and visualizeSourceMapRanges(), and an exported SourceMapVisualizationRange type. Tests were refactored to use these visualization utilities: existing source-map test helpers and SourceMapConsumer-based formatting were removed, and multiple test suites were updated to assert against the new visualization inline snapshots. New tests were also added to verify visualization behavior for single/multi-line ranges, multiple sources, unmapped ranges, and duplicate points.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add source map visualization for tests' accurately captures the main change - adding a new visualization utility for source maps used in testing.
Description check	✅ Passed	The description clearly relates to the changeset by explaining the purpose of the visualization utility, providing context about why it was created, and documenting the test plan.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

---

_{Review rate limit: 4/5 reviews remaining, refill in 12 minutes.}

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/tailwindcss/src/source-maps/visualize-source-map.ts`:
- Around line 72-80: The loop over ranges currently skips entries where
SourceMapVisualizationRange.generated === null, which hides originals that lost
mappings; instead, for each range (in the loop over ranges), always push an
annotation into annotations even when generated is null—set generated to null
(or an explicit marker), include original and source fields (and a flag like
unmapped or a distinguishable value for generated) so the visualization will
render an explicit "unmapped" entry; update the block that builds annotations
(referencing ranges, annotations, and SourceMapVisualizationRange.generated) to
push these unmapped annotations rather than continue-ing.
- Around line 103-156: The last mapping isn't being extended to EOL when
finish(null) is called, leaving generated.end === generated.start; update the
finish(next: SourceMapPoint | null) logic so that when next === null and
samePosition(current.generated.start, current.generated.end) you set
current.generated.end = [current.generated.start[0] + 1, 0] (mirroring the
existing branch that handles next !== null), and leave/or adjust
current.original.end only when a following point justifies it; change only the
finish function (which is invoked via finish(point) in the points loop and
finish(null) at the end) so visualizeRange will render the final segment as
spanning to EOL/EOF.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 99de88a9-fe84-48e4-b44b-adc752348f41

📥 Commits

Reviewing files that changed from the base of the PR and between e1201bc and bee7737.

📒 Files selected for processing (4)

• packages/tailwindcss/src/source-maps/source-map.test.ts
• packages/tailwindcss/src/source-maps/translation-map.test.ts
• packages/tailwindcss/src/source-maps/visualize-source-map.test.ts
• packages/tailwindcss/src/source-maps/visualize-source-map.ts

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/tailwindcss/src/source-maps/source-map.test.ts (1)

42-46: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Use the remapped map for both sources and visualization.

annotations is rendered from rawMap, while sources comes from combined. If remapping changes anything, this helper will snapshot a different map than the one it reports, which weakens the whole test harness. Please visualize the same final remapped map that you use for sources.

Suggested fix

   let rawMap = toRawSourceMap(decoded)
-  let combined = remapping(rawMap, () => null)
-  let map = JSON.parse(rawMap.toString()) as RawSourceMap
+  let map = remapping(rawMap, () => null) as RawSourceMap
 
-  let sources = combined.sources
+  let sources = map.sources
   let annotations = visualizeSourceMap(map, css)

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/tailwindcss/src/source-maps/source-map.test.ts` around lines 42 -
46, The test currently visualizes the original rawMap but uses the remapped
`combined` for `sources`, causing a mismatch; instead parse the remapped
`combined` into a RawSourceMap (e.g., JSON.parse(combined.toString()) as
RawSourceMap) and pass that parsed remapped map to `visualizeSourceMap(css)` so
both `sources` and `annotations` are derived from the same remapped `combined`
produced by `remapping(rawMap, ...)`.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/tailwindcss/src/source-maps/source-map.test.ts`:
- Around line 42-46: The test currently visualizes the original rawMap but uses
the remapped `combined` for `sources`, causing a mismatch; instead parse the
remapped `combined` into a RawSourceMap (e.g., JSON.parse(combined.toString())
as RawSourceMap) and pass that parsed remapped map to `visualizeSourceMap(css)`
so both `sources` and `annotations` are derived from the same remapped
`combined` produced by `remapping(rawMap, ...)`.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 57cb2bb9-c099-458b-a57f-347d94c7ca85

📥 Commits

Reviewing files that changed from the base of the PR and between bee7737 and 58a40a9.

📒 Files selected for processing (3)

• packages/tailwindcss/src/source-maps/source-map.test.ts
• packages/tailwindcss/src/source-maps/visualize-source-map.test.ts
• packages/tailwindcss/src/source-maps/visualize-source-map.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/tailwindcss/src/source-maps/visualize-source-map.ts