No description
1ca0aacdae
This PR is an internal change only related to how we visualize source maps. As part of this PR (https://github.com/tailwindlabs/tailwindcss/pull/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. <img width="495" height="495" alt="image" src="https://github.com/user-attachments/assets/2b1c12cd-43ee-461a-b93b-bafe6ce1cce5" /> 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: <img width="1101" height="1085" alt="image" src="https://github.com/user-attachments/assets/14390026-f211-4cfc-8c6c-3293105f6403" /> 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: <img width="1200" height="981" alt="image" src="https://github.com/user-attachments/assets/e75f7622-eb51-49ee-928e-fdc8672d2c3f" /> And if we point to different files, then we visualize these as well: <img width="851" height="957" alt="image" src="https://github.com/user-attachments/assets/77e65801-b46b-4579-8659-d919a8750f60" /> 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 |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.config.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or feature ideas:
Discuss Tailwind CSS on GitHub
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.