fix: include filename and line numbers in CSS parse errors

[ish1416]

Summary

Fixes CSS parse errors to include filename and line numbers, making debugging much easier for developers.

Currently, CSS parsing errors only show generic messages like:

This gives no clue about the file or line causing the issue.
This change adds filename and line/column info to error messages, allowing developers to quickly locate and fix syntax problems.

Key updates include:

• Added getLineAndColumn() helper to calculate line and column positions
• Implemented formatError() for standardized error output
• Updated CSS parser to attach filename and position details
• Improved parseString() to pass source metadata
• Added comprehensive test coverage for various error cases

Example output improvement:

Before:

After:

---

Test plan

• ✅ Added unit tests for all new error formats
• ✅ Added CLI integration tests
• ✅ Verified backward compatibility when filename is not provided
• ✅ All existing tests pass successfully

No breaking changes.
Fixes #19236

[coderabbitai]

Walkthrough

The changes enhance error reporting in CSS parsing by adding source location metadata (filename, line, and column numbers) to error messages. New helper functions are introduced to compute line/column positions from a given offset and format error messages with source information. The CSS parser now propagates source context through string parsing operations, and runtime errors are wrapped to include precise source locations. Test coverage is expanded to validate that error messages include filename and line/column information when a source is provided, and that errors omit this information when source is not available.

Pre-merge checks

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: include filename and line numbers in CSS parse errors' directly and clearly summarizes the main change - adding filename and line number information to CSS parse error messages.
Description check	✅ Passed	The description is well-structured and relates directly to the changeset. It explains the problem, key updates, test coverage, and references the fixed issue #19236.
Linked Issues check	✅ Passed	The PR fully addresses issue #19236 by implementing filename and line/column information in CSS parse errors through helper functions, updated parser logic, and comprehensive test coverage.
Out of Scope Changes check	✅ Passed	All changes are focused on adding source location information to CSS parse errors. Test additions in css-parser.test.ts and CLI integration tests align with the linked issue requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4363426 and 354b706.

📒 Files selected for processing (3)

• integrations/cli/index.test.ts (1 hunks)
• packages/tailwindcss/src/css-parser.test.ts (2 hunks)
• packages/tailwindcss/src/css-parser.ts (12 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

integrations/cli/index.test.ts (1)

integrations/utils.ts (3)

• test (80-455)
• json (523-523)
• css (518-518)

packages/tailwindcss/src/css-parser.ts (1)

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

• Source (6-18)

🔇 Additional comments (13)

packages/tailwindcss/src/css-parser.ts (8)

39-53: LGTM - Clean line/column calculation.

The function correctly computes 1-indexed line and column numbers by scanning the input. The approach is straightforward and appropriate for error reporting.

---

55-62: LGTM - Error formatting is clear and consistent.

The function properly handles both cases: returning the plain message when source is unavailable, and appending location info in the standard at file:line:column format when source is provided.

---

166-166: LGTM - Source propagation is correct.

The parseString function signature correctly accepts an optional source parameter, and both call sites properly propagate the source context for accurate error reporting.

Also applies to: 220-220, 622-622

---

297-297: LGTM - Accurate error location for custom properties.

The error correctly uses the start position (captured at line 207) to point to the beginning of the invalid custom property.

---

362-362: LGTM - Error locations point to declaration start.

Both error sites correctly use bufferStart to point to the beginning of the invalid declaration, providing users with a clear starting point for debugging.

Also applies to: 481-481

---

419-419: LGTM - Bracket mismatch errors point to the problem location.

Both errors correctly use the current position i (the unexpected closing bracket) to help users identify where the bracket mismatch occurs.

Also applies to: 520-520

---

562-565: LGTM - End-of-file position is appropriate for unclosed blocks.

Using input.length correctly points to the end of the file where the closing brace is missing. Including the selector or at-rule name in the message provides helpful context.

---

664-686: LGTM - Unterminated string errors are well-formatted.

The errors correctly point to the opening quote position and helpfully append the closing quote character to show users what the complete string should look like.

packages/tailwindcss/src/css-parser.test.ts (4)

1219-1225: LGTM - Single-line error test is correct.

The test properly verifies that parse errors include the filename and line number when the from option is provided.

---

1227-1238: LGTM - Multi-line error test validates line number calculation.

The test correctly verifies that line numbers are accurately calculated for errors in multi-line CSS files.

---

1240-1253: LGTM - Missing brace error test is accurate.

The test correctly validates that bracket mismatch errors include precise location information.

---

1279-1285: LGTM - Validates backward compatibility without source.

The test correctly verifies that when the from option is not provided, error messages omit the filename and location, maintaining backward compatibility.

integrations/cli/index.test.ts (1)

2108-2134: LGTM - Comprehensive CLI integration test.

The test validates the complete workflow from CLI input through parsing to error output, ensuring that parse errors include filename and precise location information in real-world usage.